[data grid] Issues with Row Grouping: Auto-Collapse on Update and Checkbox Selection

[artzlite]

The problem in depth

I am experiencing two issues with the row grouping feature in MUI DataGrid Premium. Below are the details:

1. Auto-Collapse on Data Update: When the rows' data is updated, the row groups auto-collapse. I expect the groups to maintain their expanded/collapsed state even after the data is updated.
2. Checkbox Selection on Row Group: When selecting a row group using the checkbox, it does not select all rows within that group. The expected behavior is that selecting a row group should select all the rows within that group.

Steps to Reproduce:

1. Use the provided example code to create a DataGridPremium with row grouping.
2. Observe the behavior when rows' data is updated.
3. Attempt to use the checkbox selection on a row group.

https://codesandbox.io/s/react-data-grid-row-grouping-sxnwpd?file=/demo.tsx

Not sure it's a bug or not because I found some links
#8823
#8580

import * as React from "react";
import { interval } from "rxjs";
import {
  DataGridPremium,
  useGridApiRef,
} from "@mui/x-data-grid-premium";
import {
  useMovieData,
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
  randomInt
} from "@mui/x-data-grid-generator";

const initialRows = [
  {
    id: 1,
    name: randomTraderName(),
    class: "A",
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate()
  },
  {
    id: 2,
    name: randomTraderName(),
    class: "A",
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate()
  },
  {
    id: 3,
    name: randomTraderName(),
    class: "A",
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate()
  },
  {
    id: 4,
    name: randomTraderName(),
    class: "B",
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate()
  },
  {
    id: 5,
    name: randomTraderName(),
    class: "B",
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate()
  },
  {
    id: 6,
    name: randomTraderName(),
    class: "B",
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate()
  }
];

export default function RowGroupingBasicExample() {
  const data = useMovieData();
  const apiRef = useGridApiRef();
  const [rows, setRows] = React.useState(initialRows);

  const columns = [
    { field: "name", headerName: "Name", width: 180, editable: true },
    { field: "class", headerName: "Class", width: 180, editable: true },
    { field: "age", headerName: "Age", type: "number", editable: true },
    {
      field: "dateCreated",
      headerName: "Date Created",
      type: "date",
      width: 180,
      editable: true
    },
    {
      field: "lastLogin",
      headerName: "Last Login",
      type: "dateTime",
      width: 220,
      editable: true
    }
  ];

  React.useEffect(() => {
    const subscription = interval(5000).subscribe(() => {
      const updatedRows = rows.map((row) => ({
        ...row,
        name: randomTraderName(),
        age: randomInt(10, 15)
      }));
      setRows(updatedRows);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [rows]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGridPremium
        {...data}
        rows={rows}
        columns={columns}
        apiRef={apiRef}
        checkboxSelection
      />
    </div>
  );
}

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Row group collapses when row data is updated
Order ID: 93539

[michelengelen]

Hey @artzlite

We know about this and are aware that this impacts some implementations.
related issues:

• [data grid] Tree data expansion state is lost when data is updated in 6.0.0-beta.1 #7771
• [data grid] All grouped rows collapses when rows updating (by state, not by updateRows) #13064
• [data grid] tree collapses when controlled row selection is used #13605

@cherniavskii is there already someone working on this?

[kevinshare]

Hey my company also uses this group / tree data selection implementation all over their applications. I ran into this as well and see this is most likely getting worked on so I will hold off on the data grid release for a little bit, rather than hack around it.

I noticed on top of this collapse issue, when I select a tree data parent with checkbox selection that the children don't get selected. Is this something I should be handling utilizing some custom function reading the hierarchy property, or is this child selection of nested rows something that we would see on the apiRef automatically in the future?

FYI: Love Mui X so far and Im trying to move our entire company off of AG Grid and on to Mui X so once this stuff is ironed out I will be able to secure many more premium licenses! Thank you for being quick to tackle this!

[michelengelen]

@kevinshare we are working on this atm: #13757 💪🏼

[michelengelen]

@MBilalShafi does #13757 also includes the introduction of internal state for group expansion?

[MBilalShafi]

Auto-Collapse on Data Update: When the rows' data is updated, the row groups auto-collapse. I expect the groups to maintain their expanded/collapsed state even after the data is updated.

@artzlite The behavior you are experiencing is more or less the "expected" behavior. The rows prop is intentionally designed to have a recomputation of the Data Grid's internal rows' tree whenever the prop updates, that includes the row expansion state. For partial updates, it is recommended to use the API method updateRows instead. Have you already tried using it instead of updating the rows prop?

Here's the updated codesandbox example on top of your code, where I tried and it seems to keep the expansion state now: https://codesandbox.io/p/sandbox/inspiring-cannon-lqww4z

You can read some more context about this API design choice in this comment.

Does that make sense to you?

@MBilalShafi does #13757 also includes the introduction of internal state for group expansion?

@michelengelen It does not. Continuing on my answer to the above question, I think that's something we do not intend right now. Obviously, we can discuss this and eventually decide on doing it, but currently, the expectation is to use the API method updateRows for all the use-cases except where full regeneration of the row tree is required.

[anushaananad]

Hey my company also uses this group / tree data selection implementation all over their applications. I ran into this as well and see this is most likely getting worked on so I will hold off on the data grid release for a little bit, rather than hack around it.

I noticed on top of this collapse issue, when I select a tree data parent with checkbox selection that the children don't get selected. Is this something I should be handling utilizing some custom function reading the hierarchy property, or is this child selection of nested rows something that we would see on the apiRef automatically in the future?

FYI: Love Mui X so far and Im trying to move our entire company off of AG Grid and on to Mui X so once this stuff is ironed out I will be able to secure many more premium licenses! Thank you for being quick to tackle this!

Regarding the checkbox selection issue (not propagating to children), the solution mentioned in the below issue helped resolve mine, and the checkboxes worked well. #4248

Hope this helps you as well!

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.