[data grid] Data grid produces fatal error on empty rows with Preact

[vsacom]

Steps to reproduce

Steps to reproduce:

1. Install Preact template using npm init preact, use typescript
2. Install DataGridPro using Getting started instructions
3. Pass empty rows as parameter to DataGridPro
4. Run npm run dev
5. Refresh page, observe console log

Link to live example: https://codesandbox.io/p/sandbox/determined-germain-jyyl3r

1. Run the preview
2. Open console
3. Refresh page, observe console log

Current behavior

Using this setup with Preact, the community version of DataGrid works fine.
Also DataGridPro works fine when providing existing rows on initial render.
But as is often the case, the rows might not be available on initial render.

With empty rows on DataGridPro, the table is rendered erroneously as the render is halted on the following JS-errors;

Uncaught TypeError: Cannot set properties of null (setting 'scrollLeft')
at Object.__ (useGridColumnHeaders.js:68:61)
at w (index.js:493:22)
at Array.forEach ()
at b (index.js:420:38)

Uncaught (in promise) Error: Invalid argument passed to hook. Hooks should not be called with NaN in the dependency array. Hook index 1155 in component ForwardRef(DataGridPro) was called with NaN.
at l.diffed (debug.js:368:19)
at options.diffed (vnode.js:59:18)
at l.diffed (index.js:63:20)
at l.diffed (render.js:246:3)
at L (index.js:280:31)
at P (children.js:133:3)
at L (index.js:234:4)
at P (children.js:133:3)
at L (index.js:234:4)
at x (component.js:133:3)

Expected behavior

When passing empty rows to DataGridPro, the table is rendered with "No rows" label and without console errors.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.38 
    @mui/core-downloads-tracker:  5.15.12 
    @mui/material: ^5.15.12 => 5.15.12 
    @mui/private-theming:  5.15.12 
    @mui/styled-engine:  5.15.11 
    @mui/system:  5.15.12 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.12 
    @mui/x-data-grid:  6.19.6 
    @mui/x-data-grid-pro: ^6.19.6 => 6.19.6 
    @mui/x-license-pro:  6.10.2 
    @types/react:  18.2.64 
    react:  18.2.0 
    react-dom:  18.2.0 
    typescript: ^5.4.2 => 5.4.2 

Order ID

82100

Search keywords: DataGridPro preact

[MBilalShafi]

Thank you @vsacom for reporting, seems like the ! operator is not performing well here:

mui-x/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

Line 126 in f68925c

apiRef.current.columnHeadersContainerElementRef!.current!.scrollLeft = 0;

@mui/xgrid I think we need to deviate away from this unless absolutely sure about the use-case.
I'll add the issue to our backlog for the team to prioritize it.

[cherniavskii]

Fixed by #12553

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @vsacom?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.