跳到内容

DataGridPremiumAPI

React DataGridPremium 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

导入

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

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

属性

必需

类型为 GridColDef[] 的列集合。

类型:Array<object>

表格上可用的聚合函数。

类型:object

默认值:GRID_AGGREGATION_FUNCTIONS

设置表格的聚合模型。

类型:object

用于生成聚合值的行。如果为 filtered，则聚合值仅使用当前通过筛选过程的行生成。如果为 all，则聚合值使用所有行生成。

类型:'all'
| 'filtered'

默认值:"filtered"

允许表格操作的 ref 对象。可以使用 useGridApiRef() 实例化。

类型:{ current: object }

Data Grid 的标签。

类型:string

包含 Data Grid 标签的元素的 ID。

类型:string

已弃用

如果为 true，Data Grid 的高度是动态的，并跟随 Data Grid 中的行数。

类型:bool

默认值:false

如果为 true，则根据容器大小和最大行数计算 pageSize，以避免渲染垂直滚动条。

类型:bool

默认值:false

如果为 true，则在 datagrid 挂载后自动调整列大小。

类型:bool

默认值:false

用户发起自动调整大小时的选项。

类型:{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }

控制单元格的模式。

类型:object

如果为 true，则启用单元格选择模式。

类型:bool

默认值:false

设置表格的单元格选择模型。

类型:object

如果为 true，Data Grid 将显示一个额外的列，其中包含用于选择行的复选框。

类型:bool

默认值:false

如果为 true，“全选”标题复选框仅选择当前页面上的行。与 checkboxSelection 结合使用。仅在启用分页时有效。

类型:bool

默认值:false

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的 CSS 类 API。

类型:object

复制到剪贴板时用于分隔单元格值的字符。

类型:string

默认值:'\t'

在视口之前/之后渲染的列区域（像素单位）

类型:number

默认值:150

设置 Data Grid 中列组标题的高度（像素）。如果未设置，则继承 columnHeaderHeight 值。

类型:number

设置 Data Grid 中列标题的高度（像素）。

类型:number

默认值:56

设置 Data Grid 的列可见性模型。如果已定义，Data Grid 将忽略 GridColDef 中的 hide 属性。

类型:object

如果大于 0，则行子项将扩展到此深度。如果等于 -1，则所有行子项都将展开。

类型:number

默认值:0

设置 Data Grid 的密度。

类型:'comfortable'
| 'compact'
| 'standard'

默认值:"standard"

要显示详细信息面板的行 ID。

类型:Array<number
| string>

如果为 true，则禁用聚合。

类型:bool

默认值:false

如果为 true，则禁用双击标题分隔符自动调整列大小。

类型:bool

默认值:false

如果为 true，当使用 treeData 属性对行进行分组时，筛选将仅应用于顶层行。

类型:bool

默认值:false

如果为 true，当使用 treeData 属性对行进行分组时，排序将仅应用于顶层行。

类型:bool

默认值:false

如果为 true，则禁用剪贴板粘贴。

类型:bool

默认值:false

如果为 true，则禁用列筛选器。

类型:bool

默认值:false

如果为 true，则禁用列菜单。

类型:bool

默认值:false

如果为 true，则禁用列固定。

类型:bool

默认值:false

如果为 true，则禁用列重新排序。

类型:bool

默认值:false

如果为 true，则禁用列调整大小。

类型:bool

默认值:false

如果为 true，则禁用隐藏/显示列。

类型:bool

默认值:false

如果为 true，则禁用列排序功能。

类型:bool

默认值:false

如果为 true，则禁用密度选择器。

类型:bool

默认值:false

如果为 true，则不使用 eval() 进行性能优化。

类型:bool

默认值:false

如果为 true，则禁用使用多列进行筛选。

类型:bool

默认值:false

如果为 true，则禁用使用多列进行排序。

类型:bool

默认值:false

如果为 true，则禁用使用 Ctrl/CMD 或 Shift 键进行多选。除非启用 checkboxSelection，否则 MIT DataGrid 将忽略此属性。

类型:bool

默认值:false (`!props.checkboxSelection` 对于 MIT Data Grid)

如果为 true，则禁用行分组。

类型:bool

默认值:false

如果为 true，则禁用单击行或单元格时的选择。

类型:bool

默认值:false

如果为 true，则禁用虚拟化。

类型:bool

默认值:false

控制是使用单元格编辑还是行编辑。

类型:'cell'
| 'row'

默认值:"cell"

如果预先不知道实际的 rowCount，但可以进行估计，请使用此属性。如果某些行有子项（例如在树状数据中），则此数字表示顶层行的数量。仅适用于 paginationMode="server" 和 rowCount="-1" 的情况

类型:number

不稳定的功能，可能会引入重大更改。对于每个功能，如果未明确将标志设置为 true，则该功能将完全禁用，并且属性或方法调用均无效。

类型:{ ariaV8?: bool, warnIfFocusStateIsNotSynced?: bool }

击键后等待触发筛选的毫秒延迟。

类型:number

默认值:150

筛选可以在服务器端或客户端处理。如果您想在服务器端处理筛选，请将其设置为 'server'。

类型:'client'
| 'server'

默认值:"client"

设置 Data Grid 的筛选模型。

类型:{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }

确定聚合值的位置。

类型:func

默认值:(groupNode) => groupNode == null ? 'footer' : 'inline'

签名:
function(groupNode: GridGroupNode) => GridAggregationPosition | null
  • groupNode 当前组。

返回值：聚合值的位置（如果为 null，则该组未聚合）。

动态将 CSS 类应用于单元格的函数。

类型:func

签名:
function(params: GridCellParams) => string

返回值：要应用于单元格的 CSS 类。

返回要在行详细信息中渲染的元素的函数。

类型:func

签名:
function(params: GridRowParams) => React.JSX.Element

返回值：行详细信息元素。

返回行详细信息面板高度的函数。

类型:func

默认值:"() => 500"

签名:
function(params: GridRowParams) => number | string

返回值：高度（像素单位）或 "auto" 以使用内容高度。

返回行估计高度的函数。仅在使用动态行高时有效。一旦测量出行高，此值将被丢弃。

类型:func

签名:
function(params: GridRowHeightParams) => number | null
  • params 包含来自 GridRowHeightParams 的所有属性。

返回值：估计的行高值。如果为 null 或 undefined，则应用基于密度的默认行高。

动态将 CSS 类应用于行的函数。

类型:func

签名:
function(params: GridRowClassNameParams) => string

返回值：要应用于行的 CSS 类。

设置每行行高的函数。

类型:func

签名:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
  • params 包含来自 GridRowHeightParams 的所有属性。

返回值：行高值。如果为 null 或 undefined，则应用默认行高。如果为 "auto"，则根据内容计算行高。

返回给定 GridRowModel 的 ID。确保此属性的引用是稳定的，以避免性能影响。可以通过在组件外部定义属性或通过记忆化来完成。

类型:func

允许指定行之间间距的函数。

类型:func

签名:
function(params: GridRowSpacingParams) => GridRowSpacing

返回值：行间距值。

确定树状数据中行的路径。例如，路径为 ["A", "B"] 的行是路径为 ["A"] 的行的子项。请注意，所有路径必须至少包含一个元素。

类型:func

签名:
function(row: R) => Array
  • row 我们要从中获取路径的行。

返回值：行的路径。

树状数据使用的分组列。

类型:func
| object

覆盖标题筛选器的高度。

类型:number

如果为 true，则启用标题筛选器功能。

类型:bool

默认值:false

如果为 true，则隐藏页脚组件。

类型:bool

默认值:false

如果为 true，则隐藏页脚中的分页组件。

类型:bool

默认值:false

如果为 true，则隐藏页脚中的行计数。如果启用了分页，则无效。

类型:bool

默认值:false

如果为 true，则隐藏页脚中选定的行计数。

类型:bool

默认值:false

如果为 true，则在筛选或快速筛选时忽略变音符号（重音符号）。例如，当筛选值为 cafe 时，带有 café 的行将可见。

类型:bool

默认值:false

如果为 true，则 Data Grid 在导出到 CSV 或复制到剪贴板时不会使用 valueFormatter。如果提供了对象，您可以选择忽略 CSV 导出或剪贴板导出的 valueFormatter。

类型:{ clipboardExport?: bool, csvExport?: bool }
| bool

默认值:false

已弃用

如果为 select，则处于不确定状态的组标题复选框（如“全选”复选框）将选择其下的所有行。如果为 deselect，它将取消选择其下的所有行。仅当启用 checkboxSelection 时才有效。

类型:'deselect'
| 'select'

默认值:"deselect"

DataGridPremium 的初始状态。其中的数据在初始化时设置在状态中，但不受控制。如果 initialState 中的数据之一也受到控制，则控制状态优先。

类型:object

单元格渲染时触发的回调，如果单元格可编辑，则返回 true。

类型:func

签名:
function(params: GridCellParams) => boolean

返回值：一个布尔值，指示单元格是否可编辑。

确定组在创建后是否应展开。此属性优先于 defaultGroupingExpansionDepth 属性。

类型:func

签名:
function(node: GridGroupNode) => boolean
  • node 要测试的组的节点。

返回值：一个布尔值，指示组是否展开。

确定是否可以选择行。

类型:func

签名:
function(params: GridRowParams) => boolean

返回值: 一个布尔值，指示该行是否可被选择。

如果 true，在列重新排序操作中，在释放鼠标按钮之前将鼠标指针移出网格将不会导致列跳回其原始位置。

类型:bool

默认值:false

如果 true，选择模型将保留不存在的已选行。当使用服务器端分页并且在更改页面时需要保留行选择时，此功能很有用。

类型:bool

默认值:false

如果 true，则显示加载覆盖层。

类型:bool

默认值:false

设置 Data Grid 的本地化文本。 您可以在 GitHub 仓库的 源代码 中找到所有支持的翻译键。

类型:object

在实现 Logger 接口的组件中传递自定义 logger。

类型:{ debug: func, error: func, info: func, warn: func }

默认值:console

允许传递日志级别或 false 以关闭日志记录。

类型:'debug'
| 'error'
| 'info'
| 'warn'
| false

默认值:"error" ("warn" 在开发模式下)

用于 内容安全策略 的内联样式的 Nonce。

类型:string

当行分组模型更改时触发的回调。

类型:func

签名:
function(model: GridAggregationModel, details: GridCallbackDetails) => void
  • model 聚合列。
  • details 此回调的附加详细信息。

在剪贴板粘贴操作开始之前触发的回调。使用它可以确认或取消粘贴操作。

类型:func

签名:
function(params: object) => void
  • params 传递给回调的参数。

当任何单元格被点击时触发的回调。

类型:func

签名:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含来自 GridCellParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当来自单元格元素的双击事件发生时触发的回调。

类型:func

签名:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含来自 GridCellParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当单元格进入编辑模式时触发的回调。

类型:func

签名:
function(params: GridCellParams, event: MuiEvent) => void
  • params 包含来自 GridCellParams 的所有属性。
  • event 导致此 prop 被调用的事件。

当单元格进入查看模式时触发的回调。

类型:func

签名:
function(params: GridCellParams, event: MuiEvent) => void
  • params 包含来自 GridCellParams 的所有属性。
  • event 导致此 prop 被调用的事件。

当来自单元格元素的 keydown 事件发生时触发的回调。

类型:func

签名:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含来自 GridCellParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当 cellModesModel prop 更改时触发的回调。

类型:func

签名:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
  • cellModesModel 包含哪些单元格处于“编辑”模式的对象。
  • details 此回调的附加详细信息。

当一个或多个单元格的选择状态更改时触发的回调。

类型:func

签名:
function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void
  • cellSelectionModel 形状为 GridCellSelectionModel 的对象，包含选定的单元格。
  • details 此回调的附加详细信息。

当数据被复制到剪贴板时调用的回调。

类型:func

签名:
function(data: string) => void
  • data 复制到剪贴板的数据。

当剪贴板粘贴操作结束时触发的回调。

类型:func

当剪贴板粘贴操作开始时触发的回调。

类型:func

当来自列标题元素的点击事件发生时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当来自列标题元素的 contextmenu 事件发生时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。

当来自列标题元素的双击事件发生时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当鼠标进入列标题元素时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当鼠标离开列标题元素时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当 mouseout 事件来自列标题元素时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当 mouseover 事件来自列标题元素时触发的回调。

类型:func

签名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnHeaderParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当列被重新排序时触发的回调。

类型:func

签名:
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridColumnOrderChangeParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当列正在被调整大小时触发的回调。

类型:func

签名:
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnResizeParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当列可见性模型更改时触发的回调。

类型:func

签名:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
  • model 新模型。
  • details 此回调的附加详细信息。

当列的宽度被更改时触发的回调。

类型:func

签名:
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnResizeParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当密度更改时触发的回调。

类型:func

签名:
function(density: GridDensity) => void
  • density 新的密度值。

当行的详细信息面板打开或关闭时触发的回调。

类型:func

签名:
function(ids: Array, details: GridCallbackDetails) => void
  • ids 详细信息面板已打开的行的 ID。
  • details 此回调的附加详细信息。

当 Excel 导出的状态更改时触发的回调。

类型:func

签名:
function(inProgress: string) => void
  • inProgress 指示任务是否正在进行中。

当 rowCount 被设置且下一批虚拟化行被渲染时触发的回调。

类型:func

签名:
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridFetchRowsParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当筛选器模型在应用筛选器之前更改时触发的回调。

类型:func

签名:
function(model: GridFilterModel, details: GridCallbackDetails) => void
  • model 包含 GridFilterModel 的所有属性。
  • details 此回调的附加详细信息。

当菜单关闭时触发的回调。

类型:func

签名:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridMenuParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当菜单打开时触发的回调。

类型:func

签名:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridMenuParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当分页元数据已更改时触发的回调。

类型:func

签名:
function(paginationMeta: GridPaginationMeta) => void
  • paginationMeta 更新后的分页元数据。

当分页模型已更改时触发的回调。

类型:func

签名:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
  • model 更新后的分页模型。
  • details 此回调的附加详细信息。

当固定的列已更改时触发的回调。

类型:func

签名:
function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void
  • pinnedColumns 更改后的固定列。
  • details 此回调的附加详细信息。

当首选项面板关闭时触发的回调。

类型:func

签名:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridPreferencePanelParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当首选项面板打开时触发的回调。

类型:func

签名:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridPreferencePanelParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当 processRowUpdate 抛出错误或拒绝时调用的回调。

类型:func

签名:
function(error: any) => void
  • error 抛出的错误。

当 Data Grid 调整大小时触发的回调。

类型:func

签名:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • containerSize 包含 ElementSize 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当行被点击时触发的回调。如果点击目标是由内置列添加的交互式元素，则不会调用此回调。

类型:func

签名:
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含来自 GridRowParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当行计数已更改时触发的回调。

类型:func

签名:
function(count: number) => void
  • count 更新后的行计数。

当来自行容器元素的双击事件发生时触发的回调。

类型:func

签名:
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 RowParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当行进入编辑模式时触发的回调。

类型:func

签名:
function(params: GridRowParams, event: MuiEvent) => void
  • params 包含来自 GridRowParams 的所有属性。
  • event 导致此 prop 被调用的事件。

当行进入查看模式时触发的回调。

类型:func

签名:
function(params: GridRowParams, event: MuiEvent) => void
  • params 包含来自 GridRowParams 的所有属性。
  • event 导致此 prop 被调用的事件。

当行分组模型更改时触发的回调。

类型:func

签名:
function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
  • model 用作分组标准的列。
  • details 此回调的附加详细信息。

当 rowModesModel prop 更改时触发的回调。

类型:func

签名:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
  • rowModesModel 包含哪些行处于“编辑”模式的对象。
  • details 此回调的附加详细信息。

当行正在被重新排序时触发的回调。

类型:func

签名:
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridRowOrderChangeParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当一个或多个行的选择状态更改时触发的回调。

类型:func

签名:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
  • rowSelectionModel 包含所有行 ID 的 GridSelectionModel。
  • details 此回调的附加详细信息。

当滚动到网格视口底部时触发的回调。

类型:func

签名:
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridRowScrollEndParams 的所有属性。
  • event 事件对象。
  • details 此回调的附加详细信息。

当排序模型在列被排序之前更改时触发的回调。

类型:func

签名:
function(model: GridSortModel, details: GridCallbackDetails) => void
  • model 包含 GridSortModel 的所有属性。
  • details 此回调的附加详细信息。

使用组件 UI 动态选择 pageSize。

类型:Array<number
| { label: string, value: number }>

默认值:[25, 50, 100]

如果 true，则启用分页。

类型:bool

默认值:false

关于 Data Grid 分页状态的额外信息。仅适用于 paginationMode="server"。

类型:{ hasNextPage?: bool }

分页可以在服务器端或客户端处理。如果您希望在客户端处理分页，请将其设置为“client”。如果您希望在服务器端处理分页，请将其设置为“server”。

类型:'client'
| 'server'

默认值:"client"

类型为 GridPaginationModel 的分页模型，它引用当前的 page 和 pageSize。

类型:{ page: number, pageSize: number }

要显示在左侧或右侧固定的列字段。

类型:object

要固定在顶部或底部的行数据。

类型:{ bottom?: Array<object>, top?: Array<object> }

在行和单元格编辑中，使用新值更新行之前调用的回调。

类型:func

签名:
function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise| R
  • newRow 包含新值的行对象。
  • oldRow 包含旧值的行对象。
  • params 附加参数。

返回值: 用于更新行的最终值。

如果 true，则在每次排序或筛选后，页面都将设置为 0。 此属性将在下一个主要版本中删除，重置页面将成为默认行为。

类型:bool

默认值:false

用于调整网格大小的毫秒节流延迟。

类型:number

默认值:60

在视口之前/之后渲染的行区域（像素单位）

类型:number

默认值:150

设置总行数，如果它与值 rows prop 的长度不同。如果某些行有子项（例如在树形数据中），则此数字表示顶级行的数量。仅适用于 paginationMode="server"，当 paginationMode="client" 时忽略。

类型:number

如果为 single，则所有分组的列都表示在同一网格列中。 如果为 multiple，则每个分组的列都表示在其自己的网格列中。

类型:'multiple'
| 'single'

默认值:'single'

设置网格的行分组模型。

类型:Array<string>

设置 Data Grid 中行的高度（像素单位）。

类型:number

默认值:52

控制行的模式。

类型:object

已弃用

在测量行高后等待重新计算行位置的毫秒延迟。当使用动态行高时，将其设置为较低的值可能很有用，但在显示大量行时可能会降低性能。

类型:number

默认值:166

如果 true，则启用行的重新排序。

类型:bool

默认值:false

类型为 GridRowsProp 的行集合。

类型:Array<object>

默认值:[]

如果 false，则禁用行选择模式。

类型:bool

默认值:true

设置 Data Grid 的行选择模型。

类型:Array<number
| string>
| number
| string

当 rowSelectionPropagation.descendants 设置为 true 时。 - 选择父项会自动选择其所有已筛选的后代。 - 取消选择父行会自动取消选择其所有已筛选的后代。
当 rowSelectionPropagation.parents 设置为 true 时 - 选择父项的所有已筛选后代会自动选择该父项。 - 取消选择已选定父项的后代会自动取消选择该父项。
仅适用于客户端的树形数据和行分组。

类型:{ descendants?: bool, parents?: bool }

默认值:{ parents: false, descendants: false }

加载行可以在服务器端或客户端处理。如果您想启用无限加载，请将其设置为“client”。如果您想启用懒加载，请将其设置为“server”。 * @default "client"

类型:'client'
| 'server'

设置由 getRowSpacing 添加的行之间间距的类型。

类型:'border'
| 'margin'

默认值:"margin"

覆盖 Data Grid 内部滚动条的高度/宽度。

类型:number

设置网格视口底部区域（以 px 为单位），在该区域内调用 onRowsScrollEnd。

类型:number

默认值:80

如果 true，单元格之间将显示垂直边框。

类型:bool

默认值:false

如果 true，列标题项之间将显示垂直边框。

类型:bool

默认值:false

可覆盖的组件属性，动态传递给渲染时的组件。

类型:object

可覆盖的组件。

有关更多详细信息，请参见下面的 Slots API。

类型:object

排序可以在服务器端或客户端处理。如果您希望在客户端处理排序，请将其设置为“client”。如果您希望在服务器端处理排序，请将其设置为“server”。

类型:'client'
| 'server'

默认值:"client"

排序序列的顺序。

类型:Array<'asc'
| 'desc'>

默认值:['asc', 'desc', null]

设置 Data Grid 的排序模型。

类型:Array<{ field: string, sort?: 'asc'
| 'desc' }>

此函数用于将粘贴的文本拆分为行和单元格。

类型:func

签名:
function(text: string) => void
  • text 从剪贴板粘贴的文本。

系统属性，允许定义系统覆盖以及其他 CSS 样式。

有关更多详细信息，请参见 `sx` 页面。

类型:Array<func
| object
| bool>
| func
| object

如果为正数，Data Grid 将节流来自 apiRef.current.updateRows 和 apiRef.current.setRows 的更新。 如果您有较高的更新频率，但不希望在每次单独更新时都执行过滤/排序或渲染等繁重工作，这将非常有用。

类型:number

默认值:0

如果 true，则行将根据 getTreeDataPath 属性在树结构中收集。

类型:bool

默认值:false

启用 unstable_listView 属性时渲染的列的定义。

类型:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }

如果 true，则以列表视图显示数据。 与 unstable_listColumn 结合使用。

类型:bool

如果为 true，Data Grid 将自动跨越具有相同值的行单元格。

类型:bool

默认值:false

如果为 true，当 getRowHeight 设置为 () => 'auto' 时，Data Grid 将启用列虚拟化。默认情况下，当启用动态行高以正确测量行高时，列虚拟化将被禁用。对于具有大量列的数据集，这可能会导致性能问题。启用此 prop 的缺点是，行高将根据当前渲染的单元格进行估算，这可能会在水平滚动时导致行高发生变化。

类型:bool

默认值:false

ref 被转发到根元素。

插槽

负责在 Header 筛选行中显示菜单装饰的组件

默认组件： GridHeaderFilterCell

负责在 Header 筛选行中显示菜单的组件

默认组件： GridHeaderFilterMenu

在网格中使用的自定义 Chip 组件。

默认组件： Chip

为每个单元格渲染的组件。

类名： .MuiDataGridPremium-cell

默认组件： GridCell

为每个骨架单元格渲染的组件。

默认组件： GridSkeletonCell

在每个列标题中渲染的筛选器图标组件。

默认组件： GridColumnHeaderFilterIconButton

在每个列标题中渲染的排序图标组件。

默认组件： GridColumnHeaderSortIcon

单击列标题中的 3 个点“烤串”图标渲染的列菜单组件。

默认组件： GridColumnMenu

负责渲染列标题的组件。

类名： .MuiDataGridPremium-columnHeaders

默认组件： GridColumnHeaders

负责渲染详细信息面板的组件。

类名： .MuiDataGridPremium-detailPanels

默认组件： GridDetailPanels

在网格视口底部渲染的页脚组件。

默认组件： GridFooter

在页脚中渲染的行数组件

默认组件： GridRowCount

在 Header 组件内部渲染的工具栏组件。

默认组件： null

当网格处于加载状态时渲染的加载覆盖层组件。

默认组件： GridLoadingOverlay

当网格在筛选后没有结果时渲染的无结果覆盖层组件。

默认组件： GridNoResultsOverlay

当网格没有行时渲染的无行覆盖层组件。

默认组件： GridNoRowsOverlay

默认情况下在网格页脚中渲染的分页组件。

默认组件： Pagination

单击筛选按钮时渲染的筛选面板组件。

默认组件： GridFilterPanel

单击列按钮时渲染的 GridColumns 面板组件。

默认组件： GridColumnsPanel

在 Grid Columns 面板内部用于管理列的组件。

类名： .MuiDataGridPremium-columnsManagement

默认组件： GridColumnsManagement

包装筛选器和列面板的面板组件。

类名： .MuiDataGridPremium-panel

默认组件： GridPanel

为每一行渲染的组件。

类名： .MuiDataGridPremium-row

默认组件： GridRow

在网格中用于标题和单元格的自定义 Badge 组件。

默认组件： Badge

在网格中用于标题和单元格的自定义 Checkbox 组件。

默认组件： Checkbox

在网格中使用的自定义 Divider 组件。

默认组件： Divider

在网格中使用的自定义 InputAdornment 组件。

默认组件： InputAdornment

在网格中使用的自定义 TextField 组件。

默认组件： TextField

在网格中使用的自定义 FormControl 组件。

默认组件： FormControl

在网格中使用的自定义 Select 组件。

默认组件： Select

在网格中使用的自定义 Button 组件。

默认组件： Button

在网格中使用的自定义 IconButton 组件。

默认组件： IconButton

在网格中使用的自定义 Tooltip 组件。

默认组件： Tooltip

在网格中使用的自定义 Popper 组件。

默认组件： Popper

在网格中使用的自定义 InputLabel 组件。

默认组件： InputLabel

在网格中使用的自定义 SelectOption 组件。

默认组件： MenuItem

在布尔单元格上显示的图标，表示 true 值。

默认组件： GridCheckIcon

在布尔单元格上显示的图标，表示 false 值。

默认组件： GridCloseIcon

在列标题标题侧面显示的图标，用于显示筛选器输入组件。

默认组件： GridTripleDotsVerticalIcon

默认情况下在工具栏中显示的打开筛选器按钮上显示的图标。

默认组件： GridFilterListIcon

在列标题菜单上显示的图标，用于指示已对列应用了筛选器。

默认组件： GridFilterAltIcon

在列菜单选择器选项卡上显示的图标。

默认组件： GridColumnIcon

在未排序时在列标题标题侧面显示的图标。

默认组件： GridColumnUnsortedIcon

在按升序排序时在列标题标题侧面显示的图标。

默认组件： GridArrowUpwardIcon

在按降序排序时在列标题标题侧面显示的图标。

默认组件： GridArrowDownwardIcon

在两个列标题之间显示的图标，允许调整列标题的大小。

默认组件： GridSeparatorIcon

在工具栏中的紧凑密度选项上显示的图标。

默认组件： GridViewHeadlineIcon

在工具栏中的标准密度选项上显示的图标。

默认组件： GridTableRowsIcon

在工具栏中的“舒适”密度选项上显示的图标。

默认组件： GridViewStreamIcon

默认情况下在工具栏中显示的打开导出按钮上显示的图标。

默认组件： GridSaveAltIcon

在 actions 列类型上显示的图标，用于打开菜单。

默认组件： GridMoreVertIcon

当子项折叠时，在树形数据切换列上显示的图标

默认组件： GridKeyboardArrowRight

当子项展开时，在树形数据切换列上显示的图标

默认组件： GridExpandMoreIcon

当子项折叠时，在分组列上显示的图标

默认组件： GridKeyboardArrowRight

当子项展开时，在分组列上显示的图标

默认组件： GridExpandMoreIcon

在折叠时，在详细信息面板切换列上显示的图标。

默认组件： GridAddIcon

在展开时，在详细信息面板切换列上显示的图标。

默认组件： GridRemoveIcon

为从筛选面板中删除筛选器显示的图标。

默认组件： GridAddIcon

为从筛选面板中删除筛选器显示的图标。

默认组件： GridDeleteIcon

为从筛选面板中删除所有活动筛选器显示的图标。

默认组件： GridDeleteForeverIcon

在 reorder 列类型上显示的图标，用于重新排序行。

默认组件： GridDragIcon

在快速筛选器输入框上显示的图标。

默认组件： GridSearchIcon

在快速筛选器重置输入框上显示的图标。

默认组件： GridCloseIcon

在列菜单中为隐藏列显示的图标

默认组件： GridVisibilityOffIcon

在列菜单中为升序排序显示的图标

默认组件： GridArrowUpwardIcon

在列菜单中为降序排序显示的图标

默认组件： GridArrowDownwardIcon

在列菜单中为筛选器显示的图标

默认组件： GridFilterAltIcon

在列菜单中为显示所有列显示的图标

默认组件： GridViewColumnIcon

在列菜单中为清除值显示的图标

默认组件： GridClearIcon

在处理时在输入框上显示的图标。

默认组件： GridLoadIcon

在列重新排序按钮上显示的图标。

默认组件： GridDragIcon

在列菜单中为左侧固定显示的图标

默认组件： GridPushPinLeftIcon

在列菜单中为右侧固定显示的图标

默认组件： GridPushPinRightIcon

在列菜单中为取消分组显示的图标

默认组件： GridWorkspacesIcon

在列菜单中为分组显示的图标

默认组件： GridGroupWorkIcon

在列菜单中为聚合显示的图标

默认组件： GridFunctionsIcon

CSS 类

这些类名对于使用 CSS 进行样式设置非常有用。当触发特定状态时，它们将应用于组件的插槽。

应用于 type="actions" 的单元格根元素的样式。

规则名称：actionsCell

应用于聚合时列标题的根元素的样式。

规则名称：aggregationColumnHeader

.MuiDataGridPremium-aggregationColumnHeader--alignCenter

如果 headerAlign="center"，则应用于聚合时标题的根元素的样式。

规则名称：aggregationColumnHeader--alignCenter

.MuiDataGridPremium-aggregationColumnHeader--alignLeft

如果 headerAlign="left"，则应用于聚合时标题的根元素的样式。

规则名称：aggregationColumnHeader--alignLeft

.MuiDataGridPremium-aggregationColumnHeader--alignRight

如果 headerAlign="right"，则应用于聚合时标题的根元素的样式。

规则名称：aggregationColumnHeader--alignRight

应用于聚合时列标题中聚合标签的样式。

规则名称：aggregationColumnHeaderLabel

如果 autoHeight={true}，则应用于根元素的样式。

规则名称：autoHeight

在自动调整大小时应用于根元素的样式。

规则名称：autosizing

应用于布尔单元格图标的样式。

规则名称：booleanCell

.MuiDataGridPremium-cell--editable

如果单元格可编辑，则应用于单元格元素的样式。

规则名称：cell--editable

.MuiDataGridPremium-cell--editing

如果单元格处于编辑模式，则应用于单元格元素的样式。

规则名称：cell--editing

.MuiDataGridPremium-cell--flex

在弹性显示模式下应用于单元格元素的样式。

规则名称：cell--flex

.MuiDataGridPremium-cell--pinnedLeft

如果单元格固定在左侧，则应用于单元格元素的样式。

规则名称：cell--pinnedLeft

.MuiDataGridPremium-cell--pinnedRight

如果单元格固定在右侧，则应用于单元格元素的样式。

规则名称：cell--pinnedRight

.MuiDataGridPremium-cell--rangeBottom

如果单元格位于单元格选择范围的底部边缘，则应用于单元格元素的样式。

规则名称:cell--rangeBottom

.MuiDataGridPremium-cell--rangeLeft

如果单元格元素位于单元格选择范围的左边缘，则应用此样式。

规则名称:cell--rangeLeft

.MuiDataGridPremium-cell--rangeRight

如果单元格元素位于单元格选择范围的右边缘，则应用此样式。

规则名称:cell--rangeRight

.MuiDataGridPremium-cell--rangeTop

如果单元格元素位于单元格选择范围的顶部边缘，则应用此样式。

规则名称:cell--rangeTop

.MuiDataGridPremium-cell--selectionMode

如果单元格元素位于单元格选择范围内，则应用此样式。

规则名称:cell--selectionMode

.MuiDataGridPremium-cell--textCenter

如果 align="center"，则应用此样式。

规则名称:cell--textCenter

.MuiDataGridPremium-cell--textLeft

如果 align="left"，则应用此样式。

规则名称:cell--textLeft

.MuiDataGridPremium-cell--textRight

如果 align="right"，则应用此样式。

规则名称:cell--textRight

.MuiDataGridPremium-cell--withLeftBorder

如果 showColumnVerticalBorder={true}，则将样式应用于单元格。

规则名称:cell--withLeftBorder

.MuiDataGridPremium-cell--withRightBorder

如果 showColumnVerticalBorder={true}，则将样式应用于单元格。

规则名称:cell--withRightBorder

应用于单元格复选框元素的样式。

规则名称:cellCheckbox

应用于空单元格元素的样式。

规则名称:cellEmpty

应用于骨架单元格元素的样式。

规则名称:cellSkeleton

应用于选择复选框元素的样式。

规则名称:checkboxInput

应用于列标题元素的样式。

规则名称:columnHeader

.MuiDataGridPremium-columnHeader--alignCenter

如果 headerAlign="center"，则应用此样式。

规则名称:columnHeader--alignCenter

.MuiDataGridPremium-columnHeader--alignLeft

如果 headerAlign="left"，则应用此样式。

规则名称:columnHeader--alignLeft

.MuiDataGridPremium-columnHeader--alignRight

如果 headerAlign="right"，则应用此样式。

规则名称:columnHeader--alignRight

.MuiDataGridPremium-columnHeader--dragging

当浮动列标题元素被拖动时，应用此样式。

规则名称:columnHeader--dragging

.MuiDataGridPremium-columnHeader--emptyGroup

应用于空列组标题单元格的样式。

规则名称:columnHeader--emptyGroup

.MuiDataGridPremium-columnHeader--filledGroup

如果列组标题单元格不为空，则应用此样式。

规则名称:columnHeader--filledGroup

.MuiDataGridPremium-columnHeader--filtered

如果列已应用过滤器，则应用此样式。

规则名称:columnHeader--filtered

.MuiDataGridPremium-columnHeader--last

应用于最后一个列标题元素的样式。

规则名称:columnHeader--last

.MuiDataGridPremium-columnHeader--moving

如果列标题正在被拖动，则应用此样式。

规则名称:columnHeader--moving

.MuiDataGridPremium-columnHeader--numeric

如果列的类型为 number，则应用此样式。

规则名称:columnHeader--numeric

.MuiDataGridPremium-columnHeader--pinnedLeft

规则名称:columnHeader--pinnedLeft

.MuiDataGridPremium-columnHeader--pinnedRight

规则名称:columnHeader--pinnedRight

.MuiDataGridPremium-columnHeader--sortable

如果列是可排序的，则应用此样式。

规则名称:columnHeader--sortable

.MuiDataGridPremium-columnHeader--sorted

如果列已排序，则应用此样式。

规则名称:columnHeader--sorted

.MuiDataGridPremium-columnHeader--withLeftBorder

规则名称:columnHeader--withLeftBorder

.MuiDataGridPremium-columnHeader--withRightBorder

如果 showColumnVerticalBorder={true}，则将样式应用于列标题。

规则名称:columnHeader--withRightBorder

应用于标题复选框单元格元素的样式。

规则名称:columnHeaderCheckbox

应用于列标题的可拖动容器元素的样式。

规则名称:columnHeaderDraggableContainer

应用于列标题的标题元素的样式；

规则名称:columnHeaderTitle

应用于列标题的标题容器元素的样式。

规则名称:columnHeaderTitleContainer

应用于列标题的标题（排除按钮）的样式。

规则名称:columnHeaderTitleContainerContent

应用于列标题分隔符元素的样式。

规则名称:columnSeparator

.MuiDataGridPremium-columnSeparator--resizable

如果列是可调整大小的，则应用此样式。

规则名称:columnSeparator--resizable

.MuiDataGridPremium-columnSeparator--resizing

如果列正在调整大小，则应用此样式。

规则名称:columnSeparator--resizing

.MuiDataGridPremium-columnSeparator--sideLeft

如果侧面是“left”，则应用此样式。

规则名称:columnSeparator--sideLeft

.MuiDataGridPremium-columnSeparator--sideRight

如果侧面是“right”，则应用此样式。

规则名称:columnSeparator--sideRight

应用于列管理页脚元素的样式。

规则名称:columnsManagementFooter

应用于列管理标题元素的样式。

规则名称:columnsManagementHeader

应用于列管理行元素的样式。

规则名称:columnsManagementRow

应用于列管理搜索输入元素的样式。

规则名称:columnsManagementSearchInput

.MuiDataGridPremium-container--bottom

应用于底部容器的样式。

规则名称:container--bottom

.MuiDataGridPremium-container--top

应用于顶部容器的样式。

规则名称:container--top

应用于详细信息面板元素的样式。

规则名称:detailPanel

应用于详细信息面板切换单元格元素的样式。

规则名称:detailPanelToggleCell

.MuiDataGridPremium-detailPanelToggleCell--expanded

如果详细信息面板切换单元格元素已展开，则应用此样式。

规则名称:detailPanelToggleCell--expanded

应用于布尔编辑组件根部的样式。

规则名称:editBooleanCell

应用于输入组件根部的样式。

规则名称:editInputCell

应用于过滤器表单组件根部的样式。

规则名称:filterForm

应用于过滤器表单组件的列输入的样式。

规则名称:filterFormColumnInput

应用于过滤器表单组件的删除图标的样式。

规则名称:filterFormDeleteIcon

应用于过滤器表单组件的链接运算符输入的样式。

规则名称:filterFormLogicOperatorInput

应用于过滤器表单组件的运算符输入的样式。

规则名称:filterFormOperatorInput

应用于过滤器表单组件的值输入的样式。

规则名称:filterFormValueInput

应用于过滤器图标元素的样式。

规则名称:filterIcon

应用于页脚行内单元格的根元素的样式。

规则名称:footerCell

应用于页脚容器元素的样式。

规则名称:footerContainer

应用于分组条件单元格的根元素的样式

规则名称:groupingCriteriaCell

应用于分组条件单元格的切换按钮的样式

规则名称:groupingCriteriaCellToggle

应用于列标题过滤器行的样式。

规则名称:headerFilterRow

应用于列标题图标容器的样式。

规则名称:iconButtonContainer

应用于列标题分隔符图标元素的样式。

规则名称:iconSeparator

应用于主容器元素的样式。

规则名称:main

.MuiDataGridPremium-main--hasPinnedRight

当主容器元素具有右侧固定的列时，应用此样式。

规则名称:main--hasPinnedRight

应用于菜单元素的样式。

规则名称:menu

应用于菜单图标元素的样式。

规则名称:menuIcon

应用于菜单图标按钮元素的样式。

规则名称:menuIconButton

应用于菜单列表元素的样式。

规则名称:menuList

如果菜单打开，则将样式应用于菜单图标元素。

规则名称:menuOpen

应用于覆盖层元素的样式。

规则名称:overlay

应用于覆盖层包装器元素的样式。

规则名称:overlayWrapper

应用于覆盖层包装器内部元素的样式。

规则名称:overlayWrapperInner

应用于面板内容元素的样式。

规则名称:panelContent

应用于面板页脚元素的样式。

规则名称:panelFooter

应用于面板标题元素的样式。

规则名称:panelHeader

应用于面板包装器元素的样式。

规则名称:panelWrapper

应用于纸张元素的样式。

规则名称:paper

应用于固定列的样式。

规则名称:pinnedColumns

应用于固定行容器的样式。

规则名称:pinnedRows

.MuiDataGridPremium-pinnedRows--bottom

应用于底部固定行容器的样式。

规则名称:pinnedRows--bottom

.MuiDataGridPremium-pinnedRows--top

应用于顶部固定行容器的样式。

规则名称:pinnedRows--top

应用于固定行渲染区域的样式。

规则名称:pinnedRowsRenderZone

应用于根元素的样式。

规则名称:root

.MuiDataGridPremium-root--densityComfortable

如果密度为“comfortable”，则将样式应用于根元素。

规则名称:root--densityComfortable

.MuiDataGridPremium-root--densityCompact

如果密度为“compact”，则将样式应用于根元素。

规则名称:root--densityCompact

.MuiDataGridPremium-root--densityStandard

如果密度为“standard”（默认），则将样式应用于根元素。

规则名称:root--densityStandard

.MuiDataGridPremium-root--disableUserSelection

当禁用用户选择时，将样式应用于根元素。

规则名称:root--disableUserSelection

.MuiDataGridPremium-row--detailPanelExpanded

如果行的详细信息面板已打开，则应用此样式。

规则名称:row--detailPanelExpanded

.MuiDataGridPremium-row--dragging

拖动浮动特殊行重排序单元格元素时应用的样式。

规则名称:row--dragging

.MuiDataGridPremium-row--dynamicHeight

如果行具有动态行高，则应用于该行的样式。

规则名称:row--dynamicHeight

.MuiDataGridPremium-row--editable

如果行是可编辑的，则应用于行元素的样式。

规则名称:row--editable

.MuiDataGridPremium-row--editing

如果行处于编辑模式，则应用于行元素的样式。

规则名称:row--editing

.MuiDataGridPremium-row--firstVisible

应用于网格每页上第一个可见行元素的样式。

规则名称:row--firstVisible

.MuiDataGridPremium-row--lastVisible

应用于网格每页上最后一个可见行元素的样式。

规则名称:row--lastVisible

应用于页脚行计数元素以显示总行数的样式。仅当禁用分页时有效。

规则名称:rowCount

应用于行重排序单元格根元素的样式

规则名称:rowReorderCell

.MuiDataGridPremium-rowReorderCell--draggable

当允许拖动时，应用于行重排序单元格根元素的样式

规则名称:rowReorderCell--draggable

应用于行重排序单元格容器元素的样式。

规则名称:rowReorderCellContainer

应用于特殊行重排序单元格内行可拖动占位符元素的样式。

规则名称:rowReorderCellPlaceholder

应用于骨架行元素的样式。

规则名称:rowSkeleton

应用于两个滚动区域元素的样式。

规则名称:scrollArea

.MuiDataGridPremium-scrollArea--left

应用于左侧滚动区域元素的样式。

规则名称:scrollArea--left

.MuiDataGridPremium-scrollArea--right

应用于右侧滚动区域元素的样式。

规则名称:scrollArea--right

应用于滚动条的样式。

规则名称:scrollbar

.MuiDataGridPremium-scrollbar--horizontal

应用于水平滚动条的样式。

规则名称:scrollbar--horizontal

.MuiDataGridPremium-scrollbar--vertical

应用于水平滚动条的样式。

规则名称:scrollbar--vertical

应用于页脚选定行计数元素的样式。

规则名称:selectedRowCount

应用于排序图标元素的样式。

规则名称:sortIcon

应用于工具栏容器元素的样式。

规则名称:toolbarContainer

应用于工具栏过滤器列表元素的样式。

规则名称:toolbarFilterList

应用于树形数据分组列根部的样式。

规则名称:treeDataGroupingCell

应用于树形数据分组单元格切换按钮的样式。

规则名称:treeDataGroupingCellToggle

应用于虚拟化容器的样式。

规则名称:virtualScroller

应用于虚拟化内容的样式。

规则名称:virtualScrollerContent

.MuiDataGridPremium-virtualScrollerContent--overflowed

当虚拟化内容的高度大于虚拟化容器时，应用于虚拟化内容的样式。

规则名称:virtualScrollerContent--overflowed

应用于虚拟化渲染区域的样式。

规则名称:virtualScrollerRenderZone

应用于具有边框的单元格、列标题和其他元素的样式。仅设置边框颜色。

规则名称:withBorderColor

如果 showColumnVerticalBorder={true}，则应用于网格的样式。

规则名称:withVerticalBorder


您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。