Material UI 的 Data Grid 组件提供了丰富的功能，以便在 Web 应用中有效展示和管理数据。在本篇博客中，我们将详细探讨 Data Grid 中关于行的定义、更新、行高、跨越、主从关系、行排序、行固定及行自定义等功能。每个部分将附带详细示例，帮助你全面理解这些功能的实现。

1. 安装 MUI X Data Grid

首先，确保你已经安装了必要的依赖包：

npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid

2. 行定义

2.1 基本行定义

行的数据通过 rows 属性传入，每一行都是一个对象，通常包含 id 字段和其他数据字段。

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

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

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
];

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

export default BasicDataGrid;

3. 行更新

3.1 编辑行数据

通过 onRowEdit 事件可以更新行数据：

const handleRowEdit = (newRow) => {
  const updatedRows = rows.map((row) =>
    row.id === newRow.id ? newRow : row
  );
  setRows(updatedRows);
};

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  onRowEdit={handleRowEdit}
/>

4. 行高

4.1 自定义行高

使用 getRowHeight 属性可以动态设置行高：

const getRowHeight = (params) => {
  return params.row.age > 30 ? 60 : 40;
};

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  getRowHeight={getRowHeight}
/>

5. 行跨越

5.1 行跨越功能

使用 renderCell 方法自定义单元格内容，并可以实现跨越效果：

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  {
    field: 'age',
    headerName: 'Age',
    width: 110,
    renderCell: (params) => (
      <div style={{ gridColumn: 'span 2' }}>{params.value}</div>
    ),
  },
];

6. 主从关系

6.1 主从行

实现主从关系的简单示例，使用 DataGrid 的嵌套行：

const [expandedRow, setExpandedRow] = React.useState(null);

const handleRowExpand = (id) => {
  setExpandedRow(expandedRow === id ? null : id);
};

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  onRowClick={(params) => handleRowExpand(params.id)}
  getRowClassName={(params) => (params.id === expandedRow ? 'expanded' : '')}
/>

7. 行排序

7.1 行排序功能

通过启用排序功能，可以允许用户按行排序：

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
];

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  sortable
/>

8. 行固定

8.1 行固定功能

通过设置 pinned 属性实现行的固定：

const pinnedRow = { id: 1, name: 'Pinned Row', age: 30 };

<DataGrid
  rows={[pinnedRow, ...rows]}
  columns={columns}
  pageSize={5}
  getRowClassName={(params) =>
    params.row.id === 1 ? 'pinned' : ''
  }
/>

9. 行自定义

9.1 行样式自定义

可以通过 getRowClassName 方法为行提供自定义样式：

const getRowClassName = (params) => {
  return params.row.age > 30 ? 'adult-row' : 'young-row';
};

// CSS样式
.adult-row {
  background-color: lightyellow;
}

.young-row {
  background-color: lightgreen;
}

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  getRowClassName={getRowClassName}
/>

10. 综合示例

结合上述所有功能的综合示例：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import './styles.css';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', flex: 1 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const initialRows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
];

const ComprehensiveDataGrid = () => {
  const [rows, setRows] = React.useState(initialRows);
  const [expandedRow, setExpandedRow] = React.useState(null);

  const handleRowEdit = (newRow) => {
    const updatedRows = rows.map((row) =>
      row.id === newRow.id ? newRow : row
    );
    setRows(updatedRows);
  };

  const getRowHeight = (params) => {
    return params.row.age > 30 ? 60 : 40;
  };

  const handleRowExpand = (id) => {
    setExpandedRow(expandedRow === id ? null : id);
  };

  const getRowClassName = (params) => {
    return params.row.age > 30 ? 'adult-row' : 'young-row';
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        onRowEdit={handleRowEdit}
        getRowHeight={getRowHeight}
        onRowClick={(params) => handleRowExpand(params.id)}
        getRowClassName={getRowClassName}
      />
    </div>
  );
};

export default ComprehensiveDataGrid;

11. 结论

Material UI 的 Data Grid 提供了丰富的行管理功能，包括行定义、更新、跨越、主从关系、排序、固定及自定义等。通过这些功能，开发者可以灵活地构建出适合业务需求的数据表格。

希望本篇博客能帮助你更好地理解和使用 MUI X Data Grid 的行管理特性。如果有任何问题或建议，欢迎在评论区分享！