Speed up DataGrid scrolling on wide / large tables#287
Draft
debba wants to merge 2 commits into
Draft
Conversation
…umns Scrolling tables with ~500 rows and 30-40 columns was very laggy: the whole tbody re-rendered on every scroll tick (no row/cell memoization) and each row was dynamically re-measured. - Extract the per-row render into a React.memo MemoRow (DataGridRow.tsx). Stable per-grid deps are bundled into one memoized rowCtx so the default shallow compare only re-renders rows that actually changed; volatile per-row values are passed as primitives. - Stabilize handleCellDoubleClick/handleEditCommit/handleKeyDown with useCallback (reading live editingCell via a ref) so the memo holds. - Compute formatCellValue once per cell (was twice: title + display). - Fixed row height (height:35) and drop measureElement/data-index from the rows, matching the proven fixed-size pattern in MiniResultGrid. - Move the cell default-render helper to src/utils/dataGridCell.tsx and add unit tests.
…res) Heavy wide_table seed in a dedicated perf_demo database, added to the existing demo stack, to reproduce and profile DataGrid scroll perf. Mixed column types (int/bigint/decimal/double/varchar/text/date/ datetime/boolean/JSON). SQL generated by demo/generate-perf-sql.py; pre-configured connections added to demo/connections.json.
Contributor
|
Tested with my own much larger table and it feels good. A great improvement. Also the codechanges look good to me. |
Collaborator
Author
|
@thomaswasle thanks a lot for your feedback 😃 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Scrolling a table with ~500 rows and 30-40 columns was painfully slow. The grid only virtualized rows, so every scroll tick re-rendered the whole visible
<tbody>(≈30 rows × 40 cells) from scratch, and each row was re-measured on the fly with a per-row ResizeObserver.What changed
React.memocomponent (DataGridRow). All the stable, grid-wide dependencies are bundled into one memoizedrowCtxobject, and the volatile per-row bits (isSelected, editing/focused/expanded column, …) are passed as plain primitives. During a vertical scroll only the rows that actually changed re-render — the rest bail out of the shallow compare.handleCellDoubleClick,handleEditCommitandhandleKeyDownare nowuseCallbacks (they read the liveeditingCellthrough a ref), otherwise the memo would never hold across re-renders.formatCellValueis computed once per cell instead of twice (it was being run again just for thetitletooltip).measureElement— same approachMiniResultGridalready uses. No more layout thrashing while scrolling.src/utils/dataGridCell.tsxwith unit tests.Behaviour is unchanged: inline editing, JSON/text expansion, FK/blob buttons, selection highlighting, sticky
#column and sticky header all work as before.Trying it out
There's now a
perf_demodatabase in the demo stack with awide_tableof 50 columns × 50,000 rows on both MySQL and Postgres, with a mix of column types so the various cell renderers get exercised. Bring up the stack and openperf_demo.wide_table:The SQL is generated by
demo/generate-perf-sql.pyand the connections are already indemo/connections.json.Notes
#column, expansioncolSpan). Easy follow-up if very wide tables still feel heavy.tsc, eslint and the full test suite (2508 tests) are green.Worth profiling with React DevTools on the 50k×50 table to confirm rows that stay on screen don't re-render mid-scroll.