Numbering table rows? possible? [solved]

Help / Discuss
,
#1

Does anyone have a way of auto numbering table rows in xwiki?

What I was looking for was to have one column of a table row the row number. And in the case of {{sortable_tables filterable=“yes”/}} tables, that the numbering would only number the visible rows that the filter selects.

Thoughts?

#2

Have you tried using CSS counters?
Maybe something like this

To be honest I have not tried it due to the lack of a suitable table, but that is the first thing that came to my mind.

1 Like
#3

I’ll give it a try and see what happens.

#4

Thanks for the link. It was most helpful in getting what I wanted to achieve.

I finally had some time to test it out.

First, I limited the change to Sortable Tables using this nifty macro

{{sortable_tables filterable="yes"/}}

Based on what I read, here is the minimal CSS I added to the wiki theme customization under Administer Wiki, Look & Feel, Themes, Color Theme, Customize, Advanced

table.sortable tr.odd, table.sortable tr.even {
    counter-increment: rowNumber;
}
table.sortable tr:not(:first-child) td:first-child::before {
    content: counter(rowNumber) ".  ";
}
table.sortable td:first-child {
    text-align:center; /*optional*/
    white-space: nowrap; /*optional - same as using <td nowrap>*/
}

The css adds the row number to the first TD column in the sortable table. The counter is only incremented for the even and odd table rows which is a style automatically added to the sortable table rows. It avoids numbering the filter row and the first header row.

If I don’t like it adding a number to the first column of data, then I can always add in a dummy column before the first column and give it a header of “#”.

The nice thing about this is it only numbers the rows that are present - so if I filter the rows, it only numbers the appearing rows.

That works for me.

[edit: fixed a couple of css mistakes]

1 Like