使用嵌套列表和动态列填充DataGrid

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
];

const NestedListDataGrid = ({ data }) => {
  const processedData = data.map(item => {
    if (item.children) {
      item.children.forEach(child => {
        child.parentId = item.id;
      });
      return [...item.children, item];
    }
    return item;
  }).flat();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={processedData} columns={columns} />
    </div>
  );
};

export default NestedListDataGrid;

const preprocessData = (data) => {
  return data.map(item => {
    if (!item.id) item.id = Math.random().toString(36).substr(2, 9);
    if (!item.name) item.name = 'Unknown';
    if (item.children) {
      item.children = preprocessData(item.children);
    }
    return item;
  });
};

const processedData = preprocessData(data);