[data grid] Row grouping does not work with nested row values

[cbrainee]

The problem in depth

I am unable to group rows with certain data structures.
I understand there are a couple ways to have data displayed within a cell.
Using just formatValue will not work for this case because I have rows which have events on them. I do this by returning a react component within the renderCell function.
In the documentation, it shows that if I want to have grouping for that column, I have to add something like this to the renderCell function:

if (data.rowNode.type === "group") {
  return data.value;
}

The problem with this is, it only groups if the property used to get the value on the row matches the field name.
If the value in the row is nested or modified within the react component, grouping does not work for that column.

Below is some sample data.

I am able to group by status because the row values are one level deep.
However, I am not able to group by customer org because the values are nested within an object.

const columns = [
  { field: "orderNumber", headerName: "Order Number", width: 150 },
  { field: "customer", headerName: "Customer", width: 150 },
  {
    field: "customerOrg",
    headerName: "Customer Org",
    width: 150,
    renderCell: (data) => {
      if (data.rowNode.type === "group") {
        return data.value;
      }
      return <p>{data.row.customerInfo?.customerOrg}</p>;
    },
    valueGetter: (value, row) => {
      return row.customerInfo?.customerOrg;
    },
  },
  { field: "name", headerName: "name", width: 150 },
  {
    field: "status",
    headerName: "Status",
    width: 130,
    renderCell: (data) => {
      if (data.rowNode.type === "group") {
        return data.value;
      }
      return <p>{data.row.status}</p>;
    },
    valueGetter: (value, row) => {
      return row.status;
    },
  },
  { field: "carrier", headerName: "Carrier", width: 150 },
  {
    field: "estimatedDelivery",
    headerName: "Estimated Delivery",
    width: 180,
  },
  { field: "actualDelivery", headerName: "Actual Delivery", width: 180 },
  {
    field: "notes",
    headerName: "Notes",
    width: 250,
    renderCell: (data) => {
      return <p>{data.row.notes}</p>;
    },
    valueGetter: (value, row) => {
      return row.notes;
    },
  },
];

const rows = [
  {
    id: 1,
    orderNumber: "ORD001",
    customer: "Customer A",
    status: "Shipped",
    carrier: "Carrier X",
    estimatedDelivery: "2024-05-03",
    actualDelivery: "2024-05-05",
    notes: "Delivered on time",
  },
  {
    id: 2,
    orderNumber: "ORD002",
    customer: "Customer B",
    status: "In Transit",
    carrier: "Carrier Y",
    estimatedDelivery: "2024-05-04",
    actualDelivery: null,
    notes: "Delayed due to weather conditions",
  },
  {
    id: 3,
    orderNumber: "ORD003",
    customer: "Customer C",
    status: "Pending",
    carrier: null,
    estimatedDelivery: null,
    actualDelivery: null,
    notes: "Order processing",
  },
  {
    id: 4,
    orderNumber: "ORD004",
    customer: "Customer D",
    status: "Delivered",
    carrier: "Carrier Z",
    estimatedDelivery: "2024-05-01",
    actualDelivery: "2024-05-02",
    notes: "Delivered early",
  },
  {
    id: 5,
    orderNumber: "ORD005",
    customer: "Customer E",
    status: "Returned",
    carrier: null,
    estimatedDelivery: "2024-04-28",
    actualDelivery: "2024-05-05",
    notes: "Customer requested return",
  },
  {
    id: 6,
    orderNumber: "ORD006",
    customer: "Customer F",
    status: "Shipped",
    carrier: "Carrier X",
    estimatedDelivery: "2024-05-06",
    actualDelivery: null,
    notes: "In transit",
  },
  {
    id: 7,
    orderNumber: "ORD007",
    customer: "Customer G",
    status: "Delivered",
    carrier: "Carrier Y",
    estimatedDelivery: "2024-04-29",
    actualDelivery: "2024-05-01",
    notes: "Delivered on time",
  },
  {
    id: 8,
    orderNumber: "ORD008",
    customer: "Customer H",
    status: "In Transit",
    carrier: "Carrier Z",
    estimatedDelivery: "2024-05-02",
    actualDelivery: null,
    notes: "Delayed due to mechanical issues",
  },
  {
    id: 9,
    orderNumber: "ORD009",
    customer: "Customer I",
    status: "Pending",
    carrier: null,
    estimatedDelivery: null,
    actualDelivery: null,
    notes: "Order processing",
  },
  {
    id: 10,
    orderNumber: "ORD010",
    customer: "Customer J",
    customerInfo: { customerOrg: "Skynet" },
    status: "Returned",
    carrier: null,
    estimatedDelivery: "2024-05-07",
    actualDelivery: "2024-05-08",
    notes: "Customer requested return",
  },
  {
    id: 11,
    orderNumber: "ORD011",
    customer: "Customer K",
    customerInfo: { customerOrg: "Skynet" },
    status: "Returned",
    carrier: null,
    estimatedDelivery: "2024-05-07",
    actualDelivery: "2024-05-08",
    notes: "Customer requested return",
  },
];

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
Google Chrome
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 16.20.2 - ~\OneDrive - LocatorX\LXDevelopment\LXConsole\Atlas-react\node_modules\.bin\node.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.97)

Search keywords: Row grouping, Premium plan
Order ID: 88342

[michelengelen]

Hey @cbrainee and thanks for raising an issue here.
Could you please provide us with a minimal working reproduction example?
It's way easier and less error prone if you could do that.

[cbrainee]

https://codesandbox.io/p/sandbox/eloquent-voice-lq5rz4?file=%2Fsrc%2FDemo.js%3A18%2C13

[michelengelen]

@cbrainee could you make that sandbox public? I cannot access it

[cbrainee]

@michelengelen Done

[michelengelen]

OK, I see that it is not working the way one would expect.
I am not familiar with how the inner workings of the row grouping look like.
@flaviendelangle you have introduced that feature if I am not mistaken
Could you please have a look here?

[flaviendelangle]

Hi,

You need to use the groupingValueGetter prop (doc) to retrieve the grouping value.

And if some value have no org, they will remain at the top level (doc).
If you want to group them as well, you must put a default value.

Here is what the final column could look like:

        {
            field: "customerOrg",
            headerName: "Customer Org",
            width: 150,
            renderCell: (data) => {
                if (data.rowNode.type === "group") {
                    return data.value;
                }
                return <p>{data.formattedValue}</p>;
            },
            valueGetter: (value, row) => {
                return row.customerInfo?.customerOrg;
            },
            groupingValueGetter: (value, row) => {
                return row.customerInfo?.customerOrg ?? 'No organization';
            },
        },

---

By the way, in the renderCell, I would advise you to use data.formattedValue instead of re-accessing it from the row.

[flaviendelangle]

By the way, you might not do this in your real application, but getRowId should be memoized, otherwise you will end up with terrible performances.
The doc is here

[cbrainee]

@flaviendelangle Thanks for the help and suggestions.

[michelengelen]

@cbrainee if this solution fits your use-case please feel free to close the issue.

[github-actions]

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