Menú
@mui/x-data-grid v9.3 在 Foundation 项目中的详尽用法。社区版全功能 + 项目自实现的 Pro/Premium 功能（列钉住/树形数据/行分组/聚合/Excel导出等）。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Foundation 脚手架的子窗口系统使用指南：ChildWindowService（Open/Close/List）、事件总线通信（定向 / 广播）、预设类型（confirm / message / blank）、新增子窗口类型标准操作，以及"子窗口 MVVM 与主窗口一致、通信只走事件总线"等铁律。
MUI 9 数据展示类组件在 Foundation 项目中的详尽用法。当使用 Typography/Avatar/Badge/Chip/Divider/List/Table/Tooltip 时参考。
MUI 9 反馈类组件在 Foundation 项目中的详尽用法。当使用 Alert/Dialog/Progress/Skeleton/Snackbar/Backdrop 时参考。
Foundation 项目 @mui/icons-material 图标库详尽用法指南。Icon 铁律：只用 *Rounded 系列，禁止 emoji/Unicode/第三方 icon 包。
MUI 9 输入类组件在 Foundation 项目中的详尽用法。当使用 Button/TextField/Select/Checkbox/Switch/Slider/Radio/Rating/Autocomplete/ToggleButton/FAB 时参考。
MUI 9 布局类组件在 Foundation 项目中的详尽用法。当使用 Box/Container/Grid/Stack/ImageList 时参考。
| name | foundation-mui-x-data-grid |
| description | @mui/x-data-grid v9.3 在 Foundation 项目中的详尽用法。社区版全功能 + 项目自实现的 Pro/Premium 功能（列钉住/树形数据/行分组/聚合/Excel导出等）。 |
| 功能 | 说明 |
|---|---|
| 列定义 & 列类型 | string/number/date/dateTime/boolean/singleSelect/actions |
| 自定义渲染 | renderCell / renderHeader / renderEditCell |
| 列宽调整 | resizable prop |
| 列可见性 | columnVisibilityModel |
| 排序 | 单列/多列排序 |
| 筛选 | 单列/多列筛选，自定义 operator |
| 分页 | 客户端分页，paginationModel |
| 行选择 | 单选/多选 checkbox |
| 密度 | compact/standard/comfortable |
| CSV 导出 | GridToolbar 内置 |
| 打印 | GridToolbar 内置 |
| 虚拟化 | 行/列虚拟化，支持大数据量 |
| 行高 | rowHeight / getRowHeight 动态行高 |
| 单元格编辑 | cell editing mode |
以下功能由项目自行实现，位于 src/components/x-pro/data-grid/。
禁止使用 @mui/x-data-grid-pro / @mui/x-data-grid-premium 官方付费包。
| 功能 | 组件/Prop | 说明 |
|---|---|---|
| 列钉住 | DataGridPro + pinnedColumns | 左右固定列 |
| 列排序拖拽 | columnReordering | 拖拽列头改变顺序 |
| 行排序拖拽 | rowReordering + onRowOrderChange | 拖拽行改变顺序 |
| 树形数据 | treeData: TreeDataConfig | 层级展开/折叠 |
| 主从表 | masterDetail: MasterDetailConfig | 展开行详情面板 |
| 行钉住 | pinnedRows | 顶部/底部固定行 |
| 懒加载 | lazyLoading: LazyLoadingConfig | 滚动按需加载 |
| 列头筛选 | headerFilters: HeaderFilterConfig | 列头下方筛选输入 |
| 剪贴板粘贴 | clipboardPaste: ClipboardPasteConfig | 从 Excel 粘贴数据 |
| 行分组 | DataGridPremium + rowGroupingModel | 按字段自动分组 |
| 聚合 | aggregationModel | sum/avg/min/max/count |
| Excel 导出 | useExcelExport hook | .xlsx 导出（xlsx 可选） |
| 单元格选择 | cellSelection | 类 Excel 范围选择 |
// Pro/Premium 功能统一 import
import { DataGridPro, DataGridPremium } from '@/components/x-pro';
theme.palette.foundation.*，禁止硬编码 hex@mui/icons-material 的 *Rounded 系列t('key')<Name>.styles.ts，工厂函数接收 Theme 返回 SxPropslocaleText prop 注入翻译| 文件 | 内容 |
|---|---|
| columns.md | 列定义、列类型、自定义渲染、列宽、列可见性 |
| rows.md | 行模型、行高、行样式、行 ID、动态行 |
| editing.md | 单元格编辑、行编辑、校验、自定义编辑组件 |
| sorting-filtering.md | 排序模型、筛选模型、自定义 operator |
| pagination-selection.md | 分页、行选择、密度控制 |
| toolbar-export.md | 工具栏、CSV 导出、打印、列可见性面板 |
| styling-slots.md | sx 样式、styled 覆盖、slots 替换 |
| api-events.md | useGridApiRef、事件系统、命令式 API |
| pro-features.md | 自实现 Pro 功能：列钉住/列拖拽/行拖拽/树形数据/主从表/行钉住/懒加载/列头筛选/剪贴板粘贴 |
| premium-features.md | 自实现 Premium 功能：行分组/聚合/Excel 导出/单元格选择 |