We needed a fast row selection feature for our table using MRT with 50-100 rows and 30+ columns, totaling up to 1500 cells. Enabling row selection in Material React Table triggers a complete table re-render for each selected row, which can take from one to three seconds or more, depending on the data in the cells. We know that MUI isn't the most performance solution for such a large number of React components.
We discovered that using rows MRT's memo mode allows for efficient background processing, but it doesn't update the UI. To address this, we implemented custom JavaScript on top of React, MUI, and MRT to dynamically update the UI. This led to the creation of the useMrtMemoModeRowsSelectionWorkaround() hook and its accompanying functions.
The useMrtMemoModeRowsSelectionWorkaround() hook effectively handles row selection in memoMode: 'rows', supports group row expansion, group selection in multi-level column group mode, and provides workarounds for showing or hiding columns in this memo mode.
- The hook: src/hooks/useMrtMemoModeRowsSelectionWorkaround
- An example of usage: src/Minimal example.tsx
- A bit extended exampple: src/Extended example.tsx
- CodeSandbox: pa4080/mrt-large-data-handling
- The initial state of the repository was forked from this CodeSandbox: material-react-table-example-advanced
- The inital state of the table was taken from the MRT Docs: Column Grouping Example
npm installoryarnnpm run startoryarn start