[data grid] `rowSpanning` makes group header disappear if first row is removed from set

[vanyadymousky]

Steps to reproduce

Link to live example: required

Steps:

1. Create a row set with grouping field
2. Remove first row
3. Add first row back

Current behavior

Grouping column value disappear

Expected behavior

Grouping column value should not disappear

Context

I have a table with grouping column and my data changes frequently - I want grouping column value to be always present no matter how many rows it has

Your environment

npx @mui/envinfo

System: OS: macOS 15.0.1 Binaries: Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.92 Edge: Not Found Safari: 18.0.1 npmPackages: @emotion/react: ^11.4.1 => 11.11.4 @emotion/styled: ^11.3.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.0.1 => 5.15.20 @mui/lab: ^5.0.0-alpha.49 => 5.0.0-alpha.170 @mui/material: ^5.0.2 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.17 @mui/utils: 5.16.6 @mui/x-data-grid: 7.22.1 @mui/x-data-grid-pro: ^7.22.1 => 7.22.1 @mui/x-date-pickers: ^7.6.2 => 7.7.0 @mui/x-internals: 7.21.0 @mui/x-license: 7.21.0 @types/react: ^18.0.25 => 18.3.3 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: 5.2.2 => 5.2.2

Search keywords: unstable_rowSpanning, row spanning Order ID: 60827

[michelengelen]

Hey @vanyadymousky ... your implementation was not working the way you explained in your steps. Here's a trimmed down version of it that exactly works as imagined:

export default function RowSpanningClassSchedule() {
  const [loading, setLoading] = React.useState(false);
  const [rows, setRows] = React.useState(initialRows);
  return (
    <Box>
      <Button
        onClick={() => {
          setLoading(true);
          setTimeout(() => {
            setRows(initialRows.slice(1));
            setLoading(false);
          }, 1000);
        }}
      >
        Remove first row
      </Button>
      <Button
        onClick={() => {
          setLoading(true);
          setTimeout(() => {
            setRows(initialRows);
            setLoading(false);
          }, 1000);
        }}
      >
        Add first row
      </Button>
      <DataGrid
        rowHeight={38}
        columns={columns}
        rows={rows}
        unstable_rowSpanning
        disableRowSelectionOnClick
        loading={loading}
        hideFooter
        hideFooterPagination
        hideFooterSelectedRowCount
      />
    </Box>
  );
}

If you still have problems that are reproducible please reach out again, but this isn't a bug on our end

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @vanyadymousky How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.