MUI 的 Data Grid 是一个强大而灵活的表格组件，适合展示和管理大量数据。在 MUI X 的 Data Grid 中，Layout 是一个重要的概念，它影响了表格的外观和用户体验。本篇博客将详细介绍 Data Grid 的布局使用，包括基本示例、属性、方法及与其他组件结合的应用。

1. 安装 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 创建基本的 Data Grid 示例

以下是一个简单的 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@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. Data Grid 的布局属性

MUI X Data Grid 提供了一些布局属性，可以自定义表格的外观和交互方式。

3.1 固定列和行

可以通过 getRowClassName 和 components 属性来固定列和行：

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

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

3.2 自定义行和单元格样式

可以使用 getRowHeight 和 getCellClassName 方法自定义行和单元格的样式：

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

const getCellClassName = (params) => {
  return params.value > 30 ? 'highlight-cell' : '';
};

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

3.3 自定义列顺序和可见性

可以使用 columns 属性中的 hide 属性和 flex 属性来调整列的可见性和宽度：

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

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

4. 结合其他组件使用

4.1 与 Toolbar 结合

可以与 Material UI 的 Toolbar 组件结合使用，添加过滤和搜索功能：

import { Toolbar, TextField } from '@mui/material';

const EnhancedDataGrid = () => {
  const [filterText, setFilterText] = React.useState('');

  const filteredRows = rows.filter((row) => 
    row.name.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <Toolbar>
        <TextField
          variant="outlined"
          placeholder="Search by name"
          onChange={(e) => setFilterText(e.target.value)}
        />
      </Toolbar>
      <DataGrid rows={filteredRows} columns={columns} pageSize={5} />
    </div>
  );
};

4.2 与 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>
  );
};

5. 其他重要属性和方法

5.1 主要属性

• rows: 数据源，展示的行数据。
• columns: 定义列的结构和行为。
• pageSize: 每页展示的行数。
• onRowClick: 行点击事件。
• autoHeight: 自动计算表格高度。

5.2 事件处理

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

6. 总结

MUI X Data Grid 是一个功能强大的表格组件，具有丰富的布局和样式定制选项，能够适应多种场景的需求。通过与其他 Material UI 组件结合，可以实现更复杂的用户界面和交互功能。

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