[DataGrid] Refactor: row virtualization & rendering #12247
Conversation
|
Deploy preview: https://deploy-preview-12247--material-ui-x.netlify.app/ |
| ) { | ||
| isRowWithFocusedCellNotInRange = true; | ||
| const firstRowToRender = renderContext.firstRowIndex; | ||
| const lastRowToRender = Math.min(renderContext.lastRowIndex, rowModels.length); |
There was a problem hiding this comment.
Yes, in some cases renderContext.lastRowIndex is greater than rowModels.length. It's not a new bug, it's just that before this PR the Math.min operation was hiding as rows.slice(firstRowToRender, lastRowToRender).
The root cause is that renderContext lags behind the rows when the "view" changes (e.g. filter modified, row expanded/collapsed, sorting modifier, etc). I've partially addressed the issue with the useGridApiEventHandler calls below, but some cases remain. I don't have enough time to hunt them all down in this PR.
romgrk
changed the title
| NONE, | ||
| LEFT, | ||
| RIGHT, | ||
| VIRTUAL, |
There was a problem hiding this comment.
I've introduced the "virtual" term to refer to out-of-viewport focused cells that need to be rendered to keep their DOM state alive.
zannager
added
the
component: data grid
A few performance & refactor changes for the row rendering.
Based on #12238
Changes:
offsetsobject to avoid re-renders{ colSpan: 1 }Very limited performance gains, around 3%, but it's always nice to shave off some CPU time during scrolling.