Data ID in react-table to prevent full re-rendering

What version of React-Table are you using?

Your bug may already be fixed in the latest release. Run yarn upgrade react-table! 6.5.3

What bug are you experiencing, or what feature are you proposing?

This is a feature proposal to conditionally render rows only if their ID have changed (thus introducing the concept of a row level ID)

The scenario we are trying address is the following:

• the data prop is derived from an external state (say managed by redux and wired in through a HOC)
• one of the Column allows the user to edit a cell in-place, and on input submission dispatches an action that updates the redux store
• when the redux store is updated, the react-table instance will receive a new data prop and the entire table re-renders as expected

This introduces some performance issues:

1. the entire table is re-rendered even though a single cell in a single row was updated

If for each element in data, we provided an accessor for a row key could we use that as a hint to bypass calling render on that row?

In other words, when a row key is provided - cell level accessor(s) are no longer being invoked. It is no longer react-table’s responsibility to detect cell level changes and force re-renders. It is now the custom Cell’s responsibility to re-render itself

In this scenario - with row keys enabled, react-table is only responsible for laying out rows based on key … i.e. to the extent that rows (identified by their keys) are re-arranged, inserted or removed from data

You can imagine this feature being very helpful for data intensive projects where cell values are a complex function of both the row key, column ID + the entire App’s state (i.e. redux + mobx store)

Use https://codesandbox.io/s/X6npLXPRW (by clicking the “Fork” button) to reproduce the issue.

Then paste a link to your newly forked codesandbox here…

What are the steps to reproduce the issue?

1. list the steps
2. to reproduce
3. the issue

[gary-menzel]

@shaun-k9 Despite the feature request being considered, react-table is actually not designed for rendering thousands of rows. All of the design statements and the code itself is based around a paged table (not around rendering all of the data).

Obviously, though, any PR to implement it would be seriously considered.

[tannerlinsley]

In v7, you are able to render rows with any key prop that you choose (this will override the automatic internal key provided in row.getRowProps()