四、高级功能与定制
4.1 树形数据（Tree Data）
Pro 及以上版本支持下钻式的树形数据展示，常用于展示组织结构、分类目录、文件系统等具有层级关系的数据。
import { DataGridPro } from '@mui/x-data-grid-pro';
const rows = [
{ id: 1, name: '技术部', hierarchy: ['技术部'] },
{ id: 2, name: '前端组', hierarchy: ['技术部', '前端组'] },
{ id: 3, name: '后端组', hierarchy: ['技术部', '后端组'] },
{ id: 4, name: '市场部', hierarchy: ['市场部'] },
{ id: 5, name: '运营部', hierarchy: ['运营部'] },
];
<DataGridPro
treeData
getTreeDataPath={(row) => row.hierarchy}
groupingColDef={
{
headerName: '组织架构',
width: 250,
}}
defaultGroupingExpansionDepth={1} // 默认展开深度
/>
树形数据的异步加载：
const loadChildren = async (nodeId) => {
const response = await fetch(`/api/organization/${nodeId}/children`);
return response.json();
};
<DataGridPro
treeData
getTreeDataPath={(row) => row.path}
onFetchRows={async (params) => {
const children = await loadChildren(params.nodeId);
return children;
}}
/>
4.2 主从视图（Master Detail）
Pro 及以上版本支持在行下方展开一个子面板，展示详情的关联数据。非常适合订单-商品、用户-订单等一对多关系的展示。
<DataGridPro
rows={orders}
columns={orderColumns}
getDetailPanelContent={({ row }) => (
<div style={
{ padding: 16 }}>
<Typography variant="h6">订单明细 - {row.orderNo}</Typography>
<DataGrid
rows={row.details}
columns={detailColumns}
hideFooter
autoHeight
/>
</div>
)}
getDetailPanelHeight={() => 300}
getDetailPanelExpandedRowIds={({ row }) => {
// 控制哪些行默认展开
return row.status === 'pending' ? [row.id] : [];
}}
/>
4.3 行分组与聚合（Premium 专属）
Premium 版本支持用户拖拽列表头进行行分组，并自动对分组后的数值列进行求和、平均等聚合运算。这是数据分析和报表类应用的核心功能。
import { DataGridPremium } from '@mui/x-data-grid-premium';
const [aggregationModel, setAggregationModel] = useState({
age: 'sum',
salary: 'average',
});
<DataGridPremium
rows={employeeData}
columns={columns}
rowGrouping
defaultGroupingExpansionDepth={-1} // -1 表示全部展开
aggregationModel={aggregationModel}
onAggregationModelChange={setAggregationModel}
groupingColDef={
{
headerName: '分组',
leafField: 'department',
}}
/>
支持的聚合函数：
4.4 单元格范围选择（Range Selection，Premium 专属）
Premium 版本支持用户通过鼠标拖拽选择连续的行列范围，并支持键盘扩展选择（Shift + 方向键）。这是数据分析场景下的高频需求。
<DataGridPremium
rowSelection
cellSelection
onCellSelectionChange={(selection) => {
console.log('选中范围:', selection);
}}
/>
4.5 图表集成（Chart Integration，Premium v9 新增）
在 v9.0.0 中，MUI X 引入了 Data Grid 与 Charts 组件的深度集成，允许用户直接从表格数据生成可视化图表。
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { ChartsCard, ChartsLine } from '@mui/x-charts';
<DataGridPremium
rows={salesData}
columns={columns}
slotProps={
{
toolbar: { showChartSelector: true },
}}
>
<ChartsCard>
<ChartsLine
xAxisKey="month"
series={[{ dataKey: 'amount', label: '销售额' }]}
/>
</ChartsCard>
</DataGridPremium>
4.6 AI 助手（AI Copilot，Premium v9 新增）
v9.0.0 版本引入了 AI 助手功能，通过 AI 自然语言生成复杂的筛选条件或生成图表视图，大幅提升数据探索效率。
<DataGridPremium
rows={data}
columns={columns}
slotProps={
{
toolbar: { showAiAssistant: true },
}}
onAiAssistantQuery={(query) => {
console.log('用户查询:', query);
// 调用 AI API 处理查询并返回结果
}}
/>
4.7 撤销/重做（Undo/Redo，Premium v9 新增）
Premium 版本在 v9.0.0 中引入了官方的撤销/重做（Undo/Redo）支持，允许用户回退数据变更，显著提升了数据编辑的安全性。
<DataGridPremium
rows={editableData}
columns={columns}
editMode="cell"
undoRedo
onUndoRedo={(action) => {
console.log('执行了撤销/重做:', action);
}}
/>
键盘快捷键：
Ctrl + Z：撤销
Ctrl + Shift + Z 或 Ctrl + Y：重做
4.8 拖动填充（Drag Fill，Premium v9 新增）
v9.0.0 新增了拖动填充功能，用户可以通过拖动单元格右下角填充柄快速复制公式或数据序列，类似 Excel 的行为。
<DataGridPremium
rows={spreadsheetData}
columns={columns}
dragFill
onDragFill={(params) => {
console.log('拖动填充:', params);
}}
/>
4.9 服务端数据源（Server-side Data Source）
对于真正的海量数据（百万级以上），一次性加载全部数据到前端是不现实的。Data Grid 支持通过 unstable_dataSource 与后端 API 交互，实现懒加载、筛选、排序和分页的服务器端处理。
const dataSource: GridDataSource = {
getRows: async (params) => {
// 1. 获取请求参数（分页、排序、筛选、分组键）
const { paginationModel, sortModel, filterModel, groupKeys } = params;
// 2. 调用后端 API
const response = await fetch('/api/data', {
method: 'POST',
body: JSON.stringify(params)
});
const data = await response.json();
// 3. 返回标准格式给 Data Grid
return {
rows: data.rows,
rowCount: data.totalCount,
};
},
};
<DataGridPro
unstable_dataSource={dataSource}
pagination
paginationMode="server"
sortingMode="server"
filteringMode="server"
/>
服务端树形数据：在 Pro 版本中，结合 unstable_dataSource 可以实现树形子节点的懒加载，简化了获取嵌套子集的数据操作，避免一次性加载全部节点。
4.10 自定义组件与插槽（Slots）
Data Grid 提供了丰富的插槽机制，允许你完全替换内部组件，实现高度定制化。
// 自定义复选框
const CustomCheckbox = (props) => <MuiCheckbox variant="outlined" {...props} />;
// 自定义加载状态
const CustomLoadingOverlay = () => (
<Box sx={
{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<CircularProgress />
<Typography sx={
{ ml: 2 }}>数据加载中...</Typography>
</Box>
);
// 自定义无数据状态
const CustomNoRowsOverlay = () => (
<Box sx={
{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Typography color="textSecondary">暂无数据</Typography>
</Box>
);
<DataGrid
slots={
{
rowCheckbox: CustomCheckbox,
loadingOverlay: CustomLoadingOverlay,
noRowsOverlay: CustomNoRowsOverlay,
}}
/>
4.11 状态持久化
Data Grid 支持将列顺序、列宽度、排序、筛选等状态持久化到 localStorage 或后端，实现用户个性化视图。
import { useGridStatePersistence } from '@mui/x-data-grid';
function PersistedDataGrid() {
const apiRef = useGridApiRef();
// 保存状态到 localStorage
const saveState = () => {
const state = apiRef.current.exportState();
localStorage.setItem('datagrid_state', JSON.stringify(state));
};
// 恢复状态
const restoreState = () => {
const savedState = localStorage.getItem('datagrid_state');
if (savedState) {
apiRef.current.restoreState(JSON.parse(savedState));
}
};
useEffect(() => {
restoreState();
}, []);
return <DataGridPro apiRef={apiRef} onStateChange={saveState} />;
}
Premium 版本在 v8.16.0 中还增加了对图表集成状态的持久化与恢复支持，确保用户体验的连续性。
来源：
http://oieaw.cn
