Allow showing row number

[RuntimeRascal]

Feature Check list

• You read Creating Issues, Features and Pull Requests
• Agree to the Code of Conduct
• Read the README to ensure the feature is not already present
• Considered the value versus complexity for all users of the library as well as library maintenance
• Considered if this can be a storybook or documentation example

Is your feature request related to a problem? Please describe

Allow showing or calculating the row's index as displayed. Much like a a code editor may allow showing line numbers or tabular data in excel may show the record number.

Describe the solution you'd like

I believe a 'showRowNumber' property could make sense. If set to true Then essentially a col all the way to left of table row is automatically added and shows the row number or record index + 1. Much like the selection checkbox will show, but instead show the number.

I thought about adding the index to the col cell callback much like many javascript collection manipulation functions offer. [].map( (row, index, array)=>{} ). Currently the callback passes just the row. We can find the row by looking in the data collection we pass to table, however, upon sort for example this can change the collection order but not the collection we passed in. Albeit collection stored in a react state. Also, this path would require the cell callback be raised to recalculate the index on things that change the order such as sort.

Describe alternatives you've considered

One can store the index in the data so it can be displayed and updated on custom sort and such but this is not something anyone wants to do.

Additional context

I have the requirement to show row numbers and also use the table comp to scenarios with ranging data sets from 1 record to 3000+ records. I implemented an infinite scroll and use a react comp state to manage the currently rendered records. I allow sorting which does not update the react state collection to reflect the new ordering of the data which means I then have a mismatch of ordering between what is rendered in table and the react state.

[jbetancur]

I've had a few requests for this so I'll flag this as a feature. Have you considered just re-mapping your data before you pass it to RDT?

 const indexData = yourData.map((item, i) => ({ index: i, ...item }))

This would be O(n) which is fine considering that you are virtualizing your page data via infinite scroll it would not noticeably impact performance on re-render.

In any case, I agree that it would be nice to avoid the map, but perhaps mapping the data can help you in the meantime.

I'm really interested in how you implemented infinite scroll with RDT. If so this could make an awesome story example/documentation.

[RuntimeRascal]

I'm really interested in how you implemented infinite scroll with RDT. If so this could make an awesome story example/documentation.

Thanks for responding so quickly. I do have a work-around that I'm currently using. It is similar to re-mapping before passing to table but it takes into account the ordering is adjusted on sort while this new order is not reflected in the data state var. I have recently realized that the time it takes for react to complete after calling to update state of a array with React.useState is significant. I suspect it doesn't return until render finishes or something like that. I am using a custom sort function and could update the react data state after sorting but this got expensive quick with larger data sets.

I created a code sandbox to implement scroll behavior but I did not use RDT in it so I will update it to use the table so I can post what I did for implementing a infinite scroll.

[RuntimeRascal]

@jbetancur Here is a sandbox with a infinite scroll example. To make more realistic, I used faker to create data. This is similar to making an service call when scroll to end to get more items.

https://codesandbox.io/s/rdt-infinitescrolllike-to76m

[jbetancur]

@simpert This is awesome thanks!

[jbetancur]

@simpert I tried to implement and ran into a roadblock. If I add a row index it will never change so not sure if this is what you wanted. Can you confirm? Otherwise, the only way to solve this that I can see is to mutate your state data before passing it in which is exactly what data.map(add your index) would do.

[jbetancur]

#642

Implements rowIndex. on column: cell, selector and format