[question] Height fitting the size from row content

[noghartt]

Order ID 💳

49216

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

With DataGridPremium, I have an infinite scrolling with dynamic height (using getRowHeight with auto, etc).

When I have fewer rows (about 20 rows or less), that doesn't need to scroll, I would like to fit the height of my DataGrid with the size of these rows. Is there a way that I could do it?

Or is there a way where I could have something like: getTotalSize() from the DataGrid?

With @tanstack/react-virtual, the useVirtualizer hook provides to me a method called getTotalSize() that returns the current size (after rows) of my "virtualized items container". Is there anything similar on DataGrid?

I found two methods on useGridApiRef that seems interesting, with getAllRowsId + unstable_getRowHeight (and a sum via reduce) could I reach a similar behavior?

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Linux 5.18 NixOS 22.11 (Raccoon) 22.11 (Raccoon) CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics Memory: 4.51 GB / 14.87 GB Container: Yes Shell: 5.1.16 - /nix/store/fcd0m68c331j7nkdxvnnpb8ggwsaiqac-bash-5.1-p16/bin/bash Binaries: Node: 16.14.2 - /nix/store/zl4bvsqfxyx5vn9bbhnrmbmpfvzqj4gd-nodejs-16.14.2/bin/node Yarn: 1.22.19 - ~/entria/nix-env/woovi-admin/node_modules/.bin/yarn npm: 8.5.0 - /nix/store/zl4bvsqfxyx5vn9bbhnrmbmpfvzqj4gd-nodejs-16.14.2/bin/npm Utilities: Make: 4.3 - /nix/store/jm3nxvmxcm5nvalbv28acvygismcykvj-gnumake-4.3/bin/make GCC: 11.2.0 - /nix/store/58pwclg9yr437h0pfgrnbd0jis8fqasd-gcc-wrapper-11.2.0/bin/gcc Git: 2.37.1 - /etc/profiles/per-user/noghartt/bin/git Clang: 11.1.0 - /etc/profiles/per-user/noghartt/bin/clang Virtualization: Docker: 20.10.14 - /nix/store/5a5i251w81licm57ikbiysc9fcpw391s-docker-20.10.14/bin/docker IDEs: Emacs: 28.1.91 - /etc/profiles/per-user/noghartt/bin/emacs Nano: 6.3 - /run/current-system/sw/bin/nano VSCode: 1.70.0 - /etc/profiles/per-user/noghartt/bin/code Vim: 9.0 - /run/current-system/sw/bin/vim Languages: Bash: 5.1.16 - /nix/store/fcd0m68c331j7nkdxvnnpb8ggwsaiqac-bash-5.1-p16/bin/bash Perl: 5.34.1 - /run/current-system/sw/bin/perl Python: 3.9.12 - /nix/store/hym1n0ygqp9wcm7pxn4sfrql3fg7xa09-python3-3.9.12/bin/python Python3: 3.9.12 - /nix/store/hym1n0ygqp9wcm7pxn4sfrql3fg7xa09-python3-3.9.12/bin/python3 Databases: MongoDB: 3.6.23 - /nix/store/yslpc5lnli8kc71lw5ixm3q4hq5dpfcv-mongodb-3.6.23/bin/mongo Browsers: Firefox: 103.0.2 Monorepos: Yarn Workspaces: 1.22.19 Lerna: 5.4.2 ```

[m4theushw]

We have the autoHeight prop, but this prop is either always on or always off. It may have problems if its value is changed after initialization.

I found two methods on useGridApiRef that seems interesting, with getAllRowsId + unstable_getRowHeight (and a sum via reduce) could I reach a similar behavior?

We already have the content size stored in the state. You can access it using the gridRowsMetaSelector. See https://mui.com/x/react-data-grid/state/#access-the-state

const { currentPageTotalHeight } = gridRowsMetaSelector(apiRef.current.state);

[noghartt]

We already have the content size stored in the state. You can access it using the gridRowsMetaSelector. See https://mui.com/x/react-data-grid/state/#access-the-state

I tried to use gridRowMetaSelector with useGridApiRef hook, but it's dispatching an error with gridRowMetaSelector returns. state.rowsMeta seems to be undefined on initial render, it could be a bug or something like that?

[noghartt]

I managed to get the gridRowMetaSelector working, but I have a weird issue. For some reason, it was returning 512px as the height from my table, even if has only one row.

Do you know why this is happening?

An example of code is:

  const [height, setHeight] = useState<string | number>(0);

  useEffect(() => {
    const fewerItems = rows.length < 20;

    if (fewerItems) {
      const { currentPageTotalHeight } = gridRowsMetaSelector(apiRef.current.state);

      setHeight(currentPageTotalHeight); // 512px

      return;
    }

    setHeight('calc(100vh - 210px)');
  }, [rows.length]);

I think that couldn't be a problem to put it inside a useEffect no?