在 Material UI 的 Data Grid 中，自定义插槽（Custom Slots）和子组件（Subcomponents）允许开发者根据特定需求灵活扩展数据表的功能。这使得 Data Grid 更加可定制，可以更好地满足不同应用场景的需求。本文将详细介绍如何使用自定义插槽和子组件，包括具体的示例代码、属性及方法的详解。

1. 安装 MUI X Data Grid

首先，确保你已经安装了 Material UI 和 Data Grid 包。如果还没有安装，可以使用以下命令：

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

2. 创建基本的 Data Grid 示例

在深入自定义插槽之前，先创建一个基本的 Data Grid 示例。

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 },
  { field: 'email', headerName: 'Email', width: 200 },
];

const rows = [
  { id: 1, name: 'John Doe', age: 35, email: 'john.doe@example.com' },
  { id: 2, name: 'Jane Smith', age: 42, email: 'jane.smith@example.com' },
  { id: 3, name: 'Mike Johnson', age: 28, email: 'mike.johnson@example.com' },
  { id: 4, name: 'Alice Brown', age: 31, email: 'alice.brown@example.com' },
  { id: 5, name: 'Bob White', age: 27, email: 'bob.white@example.com' },
];

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

export default BasicDataGrid;

3. 自定义插槽和子组件的使用

3.1 自定义单元格（Custom Cell）

我们可以为特定列定义自定义单元格，以实现更复杂的功能。例如，下面的示例为 age 列添加了一个自定义单元格，显示更复杂的内容。

const CustomCell = (params) => {
  return (
    <div style={{ color: params.value > 30 ? 'red' : 'green' }}>
      {params.value}
    </div>
  );
};

const CustomCellDataGrid = () => {
  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { field: 'name', headerName: 'Name', width: 150 },
    {
      field: 'age',
      headerName: 'Age',
      width: 110,
      renderCell: (params) => <CustomCell {...params} />,
    },
    { field: 'email', headerName: 'Email', width: 200 },
  ];

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

export default CustomCellDataGrid;

3.2 自定义头部（Custom Header）

可以自定义列头部，以展示额外的信息或功能，比如排序按钮、筛选按钮等。

const CustomHeader = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}>
      <span>Name</span>
      <button onClick={() => alert('Sort by Name!')}>Sort</button>
    </div>
  );
};

const CustomHeaderDataGrid = () => {
  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    {
      field: 'name',
      headerName: 'Name',
      width: 150,
      renderHeader: () => <CustomHeader />,
    },
    { field: 'age', headerName: 'Age', width: 110 },
    { field: 'email', headerName: 'Email', width: 200 },
  ];

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

export default CustomHeaderDataGrid;

3.3 自定义工具栏（Custom Toolbar）

自定义工具栏可以提供筛选、搜索、导出等功能。

import { GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';

const CustomToolbar = () => {
  return (
    <GridToolbarContainer>
      <GridToolbarExport />
      <button onClick={() => alert('Custom Action!')}>Custom Action</button>
    </GridToolbarContainer>
  );
};

const CustomToolbarDataGrid = () => {
  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'age', headerName: 'Age', width: 110 },
    { field: 'email', headerName: 'Email', width: 200 },
  ];

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

export default CustomToolbarDataGrid;

3.4 自定义行（Custom Row）

如果需要为某些行提供特定的样式或行为，可以使用 getRowClassName 方法。

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

const CustomRowDataGrid = () => {
  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'age', headerName: 'Age', width: 110 },
    { field: 'email', headerName: 'Email', width: 200 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowClassName={getRowClassName}
        sx={{
          '& .highlight-row': {
            backgroundColor: 'rgba(255, 255, 0, 0.3)',
          },
        }}
      />
    </div>
  );
};

export default CustomRowDataGrid;

3.5 自定义分组（Custom Grouping）

如果需要对数据进行分组显示，可以自定义分组显示的样式和内容。

const CustomGroupingDataGrid = () => {
  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'age', headerName: 'Age', width: 110 },
    { field: 'email', headerName: 'Email', width: 200 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        groupingColDef={{
          headerName: 'Group',
          renderCell: (params) => <strong>{params.value}</strong>,
        }}
      />
    </div>
  );
};

export default CustomGroupingDataGrid;

4. 综合示例：结合所有自定义插槽

以下是一个综合示例，结合了自定义单元格、头部、工具栏和行样式的功能。

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

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

const CustomToolbar = () => (
  <GridToolbarContainer>
    <GridToolbarExport />
    <button onClick={() => alert('Custom Action!')}>Custom Action</button>
  </GridToolbarContainer>
);

const ComprehensiveDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        components={{ Toolbar: CustomToolbar }}
        getRowClassName={(params) => (params.row.age > 30 ? 'highlight-row' : '')}
        sx={{
          '& .highlight-row': {
            backgroundColor: 'rgba(255, 0, 0, 0.1)',
          },
        }}
      />
    </div>
  );
};

export default ComprehensiveDataGrid;

5. 总结

通过以上示例，我们深入探讨了 Material UI Data Grid 中的自定义插槽和子组件的功能。通过自定义单元格、头部、工具栏和行样式，我们可以根据具体需求灵活调整 Data Grid 的表现，使其更符合用户体验和业务需求。

希望本篇博客能帮助你更好地理解和使用 Material UI 的 Data Grid 自定义功能。如有任何问题或建议，欢迎在评论区留言！