[DataGrid] Support column virtualization with dynamic row height #15541
Conversation
cherniavskii
added
component: data grid
|
Deploy preview: https://deploy-preview-15541--material-ui-x.netlify.app/ Updated pages: |
cherniavskii
force-pushed
the
column-virtualization-dynamic-height
branch
from
028dfe6 to
29c8454
Compare
| * If `true`, the Data Grid doesn't disable column virtualization when `getRowHeight` is set to `() => 'auto'`. | ||
| * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. | ||
| * For datasets with a large number of columns, this can cause performance issues. | ||
| * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally. |
There was a problem hiding this comment.
Love that, giving the control of the UX tradeoff in the hands of designers.
There was a problem hiding this comment.
It looks like AG Grid doesn't support this option https://www.ag-grid.com/javascript-data-grid/row-height/#auto-row-height. Still, experiencing this https://codesandbox.io/p/sandbox/focused-rain-zxyt6p?file=%2Fdemo.js%3A21%2C35, I almost wonder if this shouldn't be the default. As a developer or Product Manager, it's easier to search for "layout shift with auto height" than "grid slow performance" 😄.
Anyway, we have this in the docs. We will see how this goes.
There was a problem hiding this comment.
It looks like AG Grid doesn't support this option ag-grid.com/javascript-data-grid/row-height#auto-row-height.
I think they don't need it – they took an interesting approach of per-column row auto height.
So they can exclude specific columns from virtualization (i.e. always render them) if they have auto height enabled.
It's smart.
|
Cherry-pick PRs will be created targeting branches: v7.x |
Closes #9738
Preview: https://deploy-preview-15541--material-ui-x.netlify.app/x/react-data-grid/row-height/#column-virtualization
Before: https://codesandbox.io/p/sandbox/nostalgic-yalow-ssxn8l
After: https://codesandbox.io/p/sandbox/icy-haze-gmx4wg