[DataGridPro] When using 'pinnedRows', 'getRowClassName' causes error if 'rows' prop is empty array

[danlechambre]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using the pinnedRows prop in combination with the getRowClassName prop, the rows props cannot be an empty array.

It results in:
Uncaught TypeError: Cannot read properties of null (reading 'firstRowIndex') at GridRow
... seems its trying to access a row when it shouldn't.

Using the pinnedRows without getRowClassName works as expected, and vice-versa.

Expected behavior 🤔

We should be able to use getRowClassName with pinnedRows, irrespective of whether we have any data in rows.

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/rowpinning-demo-mui-x-forked-xjczdd?file=/demo.tsx

Steps:

1. Add pinnedRows and getRowClassName props to DataGridPro component
2. Set rows prop to an empty array

Context 🔦

In our app, we use React Query to fetch data for the grid. React Query's data can be undefined, but we feed its loading state into the grid and set rows to [] whilst it is loading (as rows cannot be undefined).

The grid props generally look something like:

rows={data ?? []}
loading={isLoading}

This is so that the grid has it's required rows prop whilst React Query's data is not ready to access

Its entirely possible I'm approaching this the wrong way though, but it feels like there could be any number of circumstances in which rows may be empty (hence the NoRowsOverlay)

Your environment 🌎

Tested in Chrome and Firefox

npx @mui/envinfo

System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: Not Found
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.7.1 => 11.9.3 
    @emotion/styled: ^11.6.0 => 11.9.3 
    @mui/base:  5.0.0-alpha.89 
    @mui/icons-material: ^5.2.5 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.75 => 5.0.0-alpha.90 
    @mui/material: ^5.2.6 => 5.9.0 
    @mui/private-theming:  5.9.0 
    @mui/styled-engine:  5.8.7 
    @mui/system:  5.9.0 
    @mui/types:  7.1.4 
    @mui/utils:  5.9.0 
    @mui/x-data-grid:  5.13.0 
    @mui/x-data-grid-generator: ^5.10.0 => 5.13.0 
    @mui/x-data-grid-pro: ^5.13.1 => 5.15.3 
    @mui/x-date-pickers: ^5.0.0-alpha.0 => 5.0.0-beta.0 
    @mui/x-license-pro:  5.12.3 
    @types/react: ^17.0.39 => 17.0.47 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.5 => 4.7.4 

Order ID 💳 (optional)

43201

[LaurentDelteil]

Same behavior when i add

    const initialState = useKeepGroupedColumnsHidden({
        apiRef,
        initialState: {
            aggregation: {
                model: {
                    columnKey: 'sum',
                },
            }
        },
    });
    
 experimentalFeatures={{aggregation: true}}

If it could help....

[cherniavskii]

Thanks @dc-sts