本文介绍如何利用 mui datagrid pro 的内置状态选择器（如 `gridfilteredsortedrowidsselector`）获取当前过滤/排序后的行数据，并在页面顶部动态展示指定列的求和值与行数统计，无需重新请求后端。
在使用 MUI DataGrid Pro 构建数据看板时，一个常见需求是：在用户应用列过滤、搜索或排序后，实时汇总当前可见行中关键数值列（如 value_1、value_2）的总和及总行数，并将其置于表格上方作为摘要信息展示。这一能力完全依赖于 DataGrid Pro 内置的状态管理机制，无需触发额外 API 请求，性能高效且响应即时。
✅ 核心实现原理
MUI X 提供了底层状态选择器（Selectors），其中 gridFilteredSortedRowIdsSelector 是关键——它从 apiRef 中读取当前经过所有过滤器（filter model）、排序（sort model）和分页（pagination）处理后实际渲染的行 ID 列表。基于这些 ID，我们可通过 apiRef.current.getRow(id) 精确获取每行的最新状态数据（含编辑中的临时变更），从而安全地进行聚合计算。
? 实现步骤（推荐封装为独立组件）
首先，创建一个受控的汇总组件（例如 DataGridSummaryBar），使用 useGridApiContext() 获取上下文 API，并调用选择器：
import { useGridApiContext } from '@mui/x-data-grid-pro';
import { gridFilteredSortedRowIdsSe
lector } from '@mui/x-data-grid-pro';
const DataGridSummaryBar = () => {
const apiRef = useGridApiContext();
// ✅ 获取当前过滤+排序后的行 ID 数组
const filteredRowIds = gridFilteredSortedRowIdsSelector(apiRef);
// ✅ 通过 ID 批量获取完整行对象（自动包含编辑态、虚拟列等）
const rows = filteredRowIds.map(id => apiRef.current.getRow(id));
// ✅ 安全聚合：添加空值校验，避免 NaN
const totalValue1 = rows.reduce((sum, row) => sum + (row?.value_1 ?? 0), 0);
const totalValue2 = rows.reduce((sum, row) => sum + (row?.value_2 ?? 0), 0);
const totalCount = rows.length;
return (
Total Val 1: {totalValue1.toFixed(2)} |
Total Val 2: {totalValue2.toFixed(2)} |
Total #: {totalCount}
);
};
lector } from '@mui/x-data-grid-pro';
const DataGridSummaryBar = () => {
const apiRef = useGridApiContext();
// ✅ 获取当前过滤+排序后的行 ID 数组
const filteredRowIds = gridFilteredSortedRowIdsSelector(apiRef);
// ✅ 通过 ID 批量获取完整行对象（自动包含编辑态、虚拟列等）
const rows = filteredRowIds.map(id => apiRef.current.getRow(id));
// ✅ 安全聚合：添加空值校验，避免 NaN
const totalValue1 = rows.reduce((sum, row) => sum + (row?.value_1 ?? 0), 0);
const totalValue2 = rows.reduce((sum, row) => sum + (row?.value_2 ?? 0), 0);
const totalCount = rows.length;
return (
Total Val 1: {totalValue1.toFixed(2)} |
Total Val 2: {totalValue2.toFixed(2)} |
Total #: {totalCount}
);
};⚠️ 注意事项：必须在 内部使用：该组件需作为 slots.toolbar 或自定义 slot 的子组件（如示例中使用 slots={{ toolbar: DataGridSummaryBar }}），以确保能正确访问 apiRef 上下文；类型安全建议：若使用 TypeScript，应为 row 添加明确接口（如 RowType），替代 any，提升可维护性；性能优化：gridFilteredSortedRowIdsSelector 是 memoized selector，仅在过滤/排序状态变化时重新计算，无额外开销；空值防护：务必对 row?.value_x 做空值判断（?? 0），防止因字段缺失导致 NaN 污染总和。
? 集成到 DataGridPro
将组件注入 toolbar 插槽（推荐位置：紧贴表格顶部，语义清晰）：
}} // ... 其他 props（editMode, onRowEditStop 等保持不变） />
? 进阶提示
- 若需支持「仅汇总可见页」（而非全部过滤结果），可结合 gridPaginationStateSelector 获取当前页码与页大小，再对 filteredRowIds 进行切片；
- 对于高精度浮点运算（如金额），建议使用 decimal.js 或 roundToTwoDecimals 工具函数替代原生 toFixed()，规避 JavaScript 浮点误差；
- 总结栏可进一步扩展为响应式布局（如移动端堆叠显示）、支持导出汇总数据，或联动图表库（如 Recharts）生成迷你趋势图。
通过上述方式，你即可零成本、高可靠性地实现“所见即所算”的交互体验——用户每一次拖动滑块、输入关键词、点击列头排序，汇总数字都将毫秒级同步更新，真正发挥 MUI DataGrid Pro 状态驱动架构的优势。
