I’m working on a project where I need to implement a multi-level tree grid using Material-UI’s DataGridPro. I want the grid to have a hierarchical structure where each level can have its own columns. Specifically, I need:

Top-Level Columns: Representing general request details.
Nested Level Columns: Displaying additional details for each request when expanded.
Here’s what I’m trying to achieve:

Top Level (Request Details):

• REQ NO
• REQ DATE
• ACCESSIONS
• NOTES

Nested Level (Order Details):

• ORDER ID
• LINE ID
• ASSET
• DELIVERY

When expanding a row in the top level, it should show the nested level with the corresponding columns.

Example Data Structure

const rows = [
  {
    id: 1,
    reqNo: 123,
    reqDate: '27/03/22',
    accessions: 'prateek',
    notes: 'req',
    children: [
      {
        id: 2,
        orderId: 1237,
        lineId: 2,
        asset: 'Asset A',
        delivery: 'Done',
      },
    ],
  },
];

Example Columns Configuration:

Top Level Columns:

const topLevelColumns = [
  { field: 'reqNo', headerName: 'REQ NO', width: 150 },
  { field: 'reqDate', headerName: 'REQ DATE', width: 150 },
  { field: 'accessions', headerName: 'ACCESSIONS', width: 150 },
  { field: 'notes', headerName: 'NOTES', width: 200 },
];

const nestedColumns = [
  { field: 'orderId', headerName: 'ORDER ID', width: 150 },
  { field: 'lineId', headerName: 'LINE ID', width: 150 },
  { field: 'asset', headerName: 'ASSET', width: 150 },
  { field: 'delivery', headerName: 'DELIVERY', width: 150 },
];

What I Have Tried:
I have set up the DataGridPro component with treeData and used the getTreeDataPath function, but I’m not sure how to properly configure the columns to show different levels of hierarchy correctly.

What I Need Help With:
How can I configure DataGridPro to show different columns for each level in a hierarchical tree structure?
Is there a way to ensure that nested columns are correctly displayed when expanding rows?

import * as React from "react";
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  DataGridProProps,
} from "@mui/x-data-grid-pro";
import Box from "@mui/material/Box";

const rows: GridRowsProp = [
  {
    id: 1,
    reqNo: 123,
    reqDate: '27/03/22',
    accessions: 'prateek',
    notes: 'req',
    children: [
      {
        id: 2,
        orderId: 1237,
        lineId: 2,
        asset: 'Asset A',
        delivery: 'Done',
      },
    ],
  },
];

const topLevelColumns: GridColDef[] = [
  { field: "reqNo", headerName: "REQ NO", width: 150 },
  { field: "reqDate", headerName: "REQ DATE", width: 150 },
  { field: "accessions", headerName: "ACCESSIONS", width: 150 },
  { field: "notes", headerName: "NOTES", width: 200 },
];

const nestedColumns: GridColDef[] = [
  { field: "orderId", headerName: "ORDER ID", width: 150 },
  { field: "lineId", headerName: "LINE ID", width: 150 },
  { field: "asset", headerName: "ASSET", width: 150 },
  { field: "delivery", headerName: "DELIVERY", width: 150 },
];

const getTreeDataPath: DataGridProProps["getTreeDataPath"] = (row) => {
  return row.hierarchy || [];
};

export default function RequisitionsPage() {
  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ height: 300, pt: 1 }}>
        <DataGridPro
          treeData
          rows={rows}
          columns={topLevelColumns} // Only top level columns
          getTreeDataPath={getTreeDataPath}
          defaultGroupingExpansionDepth={1}
        />
      </Box>
    </Box>
  );
}