跳到内容
+

数据表格 - 入门指南

开始使用您需要的最后一个 React 数据表格。安装软件包，配置列，提供行，即可开始使用。

安装

使用您最喜欢的软件包管理器，安装商业版本的 @mui/x-data-grid-pro 或 @mui/x-data-grid-premium，或免费社区版本的 @mui/x-data-grid。

npm install @mui/x-data-grid

数据表格软件包对 @mui/material 有对等依赖。如果您尚未在项目中使用它，可以使用以下命令安装它

npm install @mui/material @emotion/react @emotion/styled

请注意，react 和 react-dom 也是对等依赖项

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

样式引擎

Material UI 默认使用 Emotion 作为样式引擎。如果您想改用 styled-components，请运行

npm install @mui/styled-engine-sc styled-components

快速入门

首先，您必须如下所示导入组件。为避免名称冲突，功能齐全的企业表格组件命名为 Data Grid Pro，免费社区版本命名为 Data Grid。

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

定义行

行是键值对对象，将列名作为键，将其值作为值进行映射。您还应该在每行上提供一个 id 属性，以允许增量更新和更好的性能。

这是一个示例

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

定义列

与行类似，列是使用 GridColDef 接口的一组属性定义的对象。它们通过其 field 属性映射到行。

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

您可以导入 GridColDef 以查看所有列属性。

演示

将它们放在一起，这就是您入门所需的一切，您可以在这个实时交互式演示中看到

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

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

TypeScript

为了从 CSS 覆盖 和 默认属性自定义 中受益，TypeScript 用户需要导入以下类型。在内部，它使用模块扩展来扩展默认主题结构。

import type {} from '@mui/x-data-grid/themeAugmentation';
import type {} from '@mui/x-data-grid-pro/themeAugmentation';
import type {} from '@mui/x-data-grid-premium/themeAugmentation';

const theme = createTheme({
  components: {
    // Use `MuiDataGrid` on DataGrid, DataGridPro and DataGridPremium
    MuiDataGrid: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

许可证

虽然我们的核心库完全在 MIT 许可下授权，但 MUI X 的一部分组件是在商业许可下提供的。请注意许可证。

计划

该组件有 不同的计划

您可以在 许可页面 中找到有关计划的更多信息。

功能比较

下表总结了社区版数据表格和企业版 Data Grid Pro 组件中可用的功能。社区版的所有功能在企业版中均可用。企业版组件分为两个计划：Pro 版和 Premium 版。

功能 社区版 Pro 版 Premium 版
列
列分组 ✅ ✅ ✅
列跨度 ✅ ✅ ✅
列调整大小 ✅ ✅ ✅
列自动调整大小 ✅ ✅ ✅
列重新排序 ❌ ✅ ✅
列固定 ❌ ✅ ✅
行
行高 ✅ ✅ ✅
行跨度 ✅ ✅ ✅
行重新排序 ❌ ✅ ✅
行固定 ❌ ✅ ✅
选择
单行选择 ✅ ✅ ✅
复选框选择 ✅ ✅ ✅
多行选择 ❌ ✅ ✅
单元格范围选择 ❌ ❌ ✅
筛选
快速筛选 ✅ ✅ ✅
列筛选器 ✅ ✅ ✅
多列筛选 ❌ ✅ ✅
表头筛选 ❌ ✅ ✅
排序
列排序 ✅ ✅ ✅
多列排序 ❌ ✅ ✅
分页
分页 ✅ ✅ ✅
分页 > 每页 100 行 ❌ ✅ ✅
编辑
行编辑 ✅ ✅ ✅
单元格编辑 ✅ ✅ ✅
导入和导出
CSV 导出 ✅ ✅ ✅
打印 ✅ ✅ ✅
剪贴板复制 ✅ ✅ ✅
剪贴板粘贴 ❌ ❌ ✅
Excel 导出 ❌ ❌ ✅
渲染
可自定义组件 ✅ ✅ ✅
列虚拟化 ✅ ✅ ✅
行虚拟化 > 100 行 ❌ ✅ ✅
分组和透视
树状数据 ❌ ✅ ✅
主从视图 ❌ ✅ ✅
行分组 ❌ ❌ ✅
聚合 ❌ ❌ ✅
透视 ❌ ❌ 🚧
其他
可访问性 ✅ ✅ ✅
键盘导航 ✅ ✅ ✅
本地化 ✅ ✅ ✅

API