MUI X Data Grid

一个快速且可扩展的 React 数据表格和 React 数据网格。它是一个功能丰富的组件，提供 MIT 或商业许可。

Data Grid 组件使用 React 和 TypeScript 构建，为操作无限数据集提供流畅的用户体验。它具有直观的 API，用于实时更新以及主题和自定义模板——所有这些都具有闪电般的速度。

概述

Data Grid 以行和列的结构化格式呈现信息。数据在用户友好的界面中显示，以实现高效的编辑、审查和分析。

该组件有三个不同的版本，一个在 MIT 许可证下可用，另外两个在商业许可证下可用。

MIT 许可版本（也称为“社区版”）是普通数据表格的更强大的替代方案。它是一个简洁的抽象，具有编辑、分页、列分组以及单列排序和筛选等基本功能。

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

商业许可版本提供两种计划：Pro 和 Premium。

Pro 计划扩展了社区版中可用的功能，以支持更复杂的使用场景。它增加了高级筛选、列固定、列和行重新排序、对树状数据的支持以及用于处理更大数据集的虚拟化等功能。

下面的演示显示了 31 列和 100,000 行——总共超过 300 万个单元格。

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

Premium 计划包含 Pro 计划中的所有内容，以及用于数据分析和大型数据集管理的高级功能，例如具有聚合函数（例如 sum 和 average）的行分组以及导出到 Excel 文件的能力。

访问展示页面，全面了解此计划独有的所有功能。

下面的演示按商品名称对行进行分组，并使用聚合函数来计算每个组和总计（在摘要行中显示）的数量总和。您可以尝试在列的标题菜单中对其他列进行分组。

既然您在这里，请尝试导出到 Excel 以及从 Excel 表格复制和粘贴数据。

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

请参阅许可页面了解详细信息。

计划中的功能包括

您可以在功能比较、我们的实时季度路线图以及开放的GitHub 问题上找到更多详细信息。

以下是一些资源，可帮助您了解有关 Data Grid 的更多信息