search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.17k stars 1.3k forks source link

[question] Is it possible to use dynamic row height with autoPageSize ? #5697

Open ddolcimascolo opened 2 years ago

ddolcimascolo commented 2 years ago

Order ID 💳

31461

Duplicates

Latest version

The problem in depth 🔍

Hey guys,

I'm currently trying out the dynmaic row height feature that we might benefit in our app. We're making extensive use of autoPageSize in a dashboard-like page where user can resize the tables. This works fine but we have a few data cells that contain lots of data and these are currently ellipsed.

When enabling dynamic row height with getRowHeight={() => 'auto'} we're able to make the cell content wrap so that it makes the row higher. Everything looks nice except that the autoPageSize does not account for dynamic row height, and the selected number of rows is based on the size of a single, non-wrapped row.

Is it something that is supposed to work? If not, do you plan to support that?

Thanks in advance, Cheers,

David

Your environment 🌎

`npx @mui/envinfo` ``` System: OS: Linux 5.15 Linux Mint 20.3 (Una) Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Browsers: Chrome: 103.0.5060.134 Firefox: 103.0 ``` Browser: Chrom
cherniavskii commented 2 years ago

Hey @ddolcimascolo Indeed, it doesn't work with autoPageSize - that's the limitation that we should mention in our docs.

Dynamic row height feature works in a way that it measures the current row height and reacts to its change. This means that row height could change over time - see this demo https://codesandbox.io/s/94kbib?file=/demo.tsx For autoPageSize that would mean that page size can change if row height changes, which would rather be unexpected. cc @m4theushw

m4theushw commented 2 years ago

It's not only a limitation of the dynamic row height but also of the variable row height. autoPageSize bases solely on the row height calculated from the density: https://github.com/mui/mui-x/blob/01aa9c57e7e622ca7a8caa0adbab75f7779b1c90/packages/grid/x-data-grid/src/hooks/features/pagination/useGridPageSize.ts#L40

But when the height is not static this value shouldn't be used. I don't think we can support it properly. A specific page may have more rows than another page. This will make too confusing to use the pagination controls.

cherniavskii commented 2 years ago

I'm keeping this issue open as an opportunity to mention in the docs that dynamic and variable row height doesn't work with autoPageSize