MUI X Data Grid 是 Material UI 提供的一个强大且灵活的表格组件，适用于高效展示和管理大量数据。它提供了丰富的功能，如排序、筛选、分页、编辑等，使开发者可以轻松实现复杂的数据展示需求。

1. 安装 MUI X Data Grid

首先，确保已经安装了 Material UI 和 MUI X Data Grid：

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

2. 基本使用

2.1 引入 Data Grid

引入所需的组件和样式：

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

2.2 创建基本示例

以下是一个简单的示例，展示了如何创建一个基本的数据网格：

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@example.com' },
  { id: 2, name: 'Jane Smith', age: 42, email: 'jane@example.com' },
  { id: 3, name: 'Mike Johnson', age: 28, email: 'mike@example.com' },
];

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

export default BasicDataGrid;

2.3 解释代码

• columns: 定义数据列的属性，包括字段名、标题和宽度。
• rows: 包含显示的数据数组。
• DataGrid: 主要的表格组件，接受 rows 和 columns 属性。

3. 高级功能

3.1 排序和筛选

MUI X Data Grid 支持列的排序和筛选。只需设置 sortable 和 filterable 属性：

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

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

3.2 分页

可以轻松启用分页功能：

<DataGrid rows={rows} columns={columns} pageSize={5} rowsPerPageOptions={[5, 10, 20]} />

3.3 编辑功能

MUI X Data Grid 还支持行和单元格的编辑。设置 editable 属性以启用编辑：

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

const EditableDataGrid = () => {
  const [data, setData] = React.useState(rows);

  const handleProcessRowUpdate = (newRow) => {
    const updatedRows = data.map((row) => (row.id === newRow.id ? newRow : row));
    setData(updatedRows);
    return newRow;
  };

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

3.4 自定义渲染单元格

可以通过 renderCell 方法来自定义单元格的渲染：

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

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

4. 结合其他组件使用

4.1 与 Dialog 结合

可以结合 Dialog 组件，在编辑行时弹出对话框：

import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from '@mui/material';

const EditableDialogDataGrid = () => {
  const [open, setOpen] = React.useState(false);
  const [selectedRow, setSelectedRow] = React.useState(null);

  const handleOpen = (params) => {
    setSelectedRow(params.row);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleSave = () => {
    // 保存逻辑
    setOpen(false);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns.map((col) => ({
          ...col,
          renderCell: (params) => (
            <Button onClick={() => handleOpen(params)}>{params.value}</Button>
          ),
        }))}
        pageSize={5}
      />
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>编辑行</DialogTitle>
        <DialogContent>
          {/* 编辑表单内容 */}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>取消</Button>
          <Button onClick={handleSave}>保存</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

4.2 与 Snackbar 结合

在更新数据时，可以结合 Snackbar 显示提示信息：

import Snackbar from '@mui/material/Snackbar';

const DataGridWithSnackbar = () => {
  const [openSnackbar, setOpenSnackbar] = React.useState(false);
  
  const handleProcessRowUpdate = (newRow) => {
    setOpenSnackbar(true);
    return newRow;
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        processRowUpdate={handleProcessRowUpdate}
      />
      <Snackbar
        open={openSnackbar}
        onClose={() => setOpenSnackbar(false)}
        message="数据已更新"
        autoHideDuration={2000}
      />
    </div>
  );
};

5. 其他常用属性

5.1 主要属性

• rows: 需要展示的数据数组。
• columns: 列配置数组。
• pageSize: 每页展示的行数。
• onRowClick: 行点击事件处理。
• checkboxSelection: 启用复选框选择功能。
• sortingOrder: 自定义排序顺序。

5.2 事件处理

• processRowUpdate: 行更新时触发，可以用于处理编辑逻辑。
• onSelectionModelChange: 选择模型变化时触发。

6. 总结

MUI X Data Grid 是一个功能强大的表格组件，提供了许多内置功能，帮助开发者快速实现复杂的数据展示需求。通过与其他 Material UI 组件结合使用，可以轻松实现更复杂的用户交互和界面。

希望本文能帮助你更好地理解和使用 MUI X Data Grid。如果你有任何问题或建议，欢迎在评论区留言！