跳到内容

DataGridProAPI

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

演示

导入

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

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

Props

必需

GridColDef[] 类型的列集合。

类型：Array<object>

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

类型：{ current: object }

数据表格的标签。

类型：string

包含数据表格标签的元素的 id。

类型：string

已弃用

如果为 true，数据表格的高度是动态的，并跟随数据表格中的行数。

类型：bool

默认值：false

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

类型：bool

默认值：false

如果为 true，则在数据表格挂载后自动调整列大小。

类型：bool

默认值：false

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

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

控制单元格的模式。

类型：object

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

类型：bool

默认值：false

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

类型：bool

默认值：false

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

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

类型：object

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

类型：string

默认值：'\t'

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

类型：number

默认值：150

设置数据表格中列组标题的高度（像素为单位）。如果未设置，则继承 columnHeaderHeight 值。

类型：number

设置数据表格中列标题的高度（像素为单位）。

类型：number

默认值：56

设置数据表格的列可见性模型。如果已定义，则数据表格将忽略 GridColDef 中的 hide 属性。

类型：object

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

类型：number

默认值：0

设置数据表格的密度。

类型：'comfortable'
| 'compact'
| 'standard'

默认值："standard"

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

类型：Array<number
| string>

如果为 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，则不使用 eval() 进行性能优化。

类型：bool

默认值：false

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

类型：bool

默认值：false

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

类型：bool

默认值：false

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

类型：bool

默认值：false (MIT Data Grid 的 !props.checkboxSelection)

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

类型：bool

默认值：false

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

类型：bool

默认值：false

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

类型：'cell'
| 'row'

默认值："cell"

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

类型：number

不稳定的功能，可能会引入重大更改。对于每个功能，如果未显式将标志设置为 true，则该功能将被完全禁用，并且任何属性/方法调用都不会产生任何影响。

类型：{ warnIfFocusStateIsNotSynced?: bool }

在按键后触发筛选之前要等待的毫秒延迟。

类型：number

默认值：150

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

类型：'client'
| 'server'

默认值："client"

设置数据表格的筛选模型。

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

动态地将 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，则数据表格在导出到 CSV 或复制到剪贴板时将不使用 valueFormatter。如果提供了对象，您可以选择忽略 CSV 导出或剪贴板导出的 valueFormatter。

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

默认值：false

已弃用

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

类型：'deselect'
| 'select'

默认值："deselect"

DataGridPro 的初始状态。其中的数据将在初始化时设置在状态中，但不会被控制。如果 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

设置数据表格的本地文本。您可以在 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(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 导致调用此属性的事件。

当单元格变为查看模式时触发的回调。

类型：func

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

当单元格元素发出 keydown 事件时触发的回调。

类型：func

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

当 cellModesModel 属性更改时触发的回调。

类型：func

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

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

类型：func

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

当列标题元素发出 click 事件时触发的回调。

类型：func

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

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

类型：func

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

当列标题元素发出 double click 事件时触发的回调。

类型：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 此回调的附加详细信息。

当鼠标移出列标题元素时触发的回调。

类型：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: 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 此回调的附加详细信息。

当 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 更新后的行数。

当行容器元素发出 double click 事件时触发的回调。

类型：func

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

当行变为编辑模式时触发的回调。

类型：func

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

当行变为查看模式时触发的回调。

类型：func

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

当 rowModesModel 属性更改时触发的回调。

类型：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 属性值的长度不同。 如果某些行有子行（例如在树状数据中），则此数字表示顶级行的数量。 仅适用于 paginationMode="server"，当 paginationMode="client" 时将被忽略。

类型：number

设置 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

设置在网格视口底部调用 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' }>

系统属性，允许定义系统覆盖以及其他 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 启用列虚拟化。 默认情况下，当启用动态行高以正确测量行高时，列虚拟化将被禁用。 对于具有大量列的数据集，这可能会导致性能问题。 启用此属性的缺点是，行高将根据当前渲染的单元格进行估算，这可能会在水平滚动时导致行高变化。

类型：bool

默认值：false

ref 被转发到根元素。

Slots

负责在标头过滤器行中显示菜单装饰的组件

默认组件: GridHeaderFilterCell

负责在标头过滤器行中显示菜单的组件

默认组件: GridHeaderFilterMenu

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

默认组件: Chip

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

类名: .MuiDataGridPro-cell

默认组件: GridCell

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

默认组件: GridSkeletonCell

在每个列标题中渲染的过滤器图标组件。

默认组件: GridColumnHeaderFilterIconButton

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

默认组件: GridColumnHeaderSortIcon

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

默认组件: GridColumnMenu

负责渲染列标题的组件。

类名: .MuiDataGridPro-columnHeaders

默认组件: GridColumnHeaders

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

类名: .MuiDataGridPro-detailPanels

默认组件: GridDetailPanels

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

默认组件: GridFooter

在页脚中渲染的行计数组件

默认组件: GridRowCount

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

默认组件: null

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

默认组件: GridLoadingOverlay

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

默认组件: GridNoResultsOverlay

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

默认组件: GridNoRowsOverlay

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

默认组件: Pagination

点击过滤器按钮时渲染的过滤器面板组件。

默认组件: GridFilterPanel

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

默认组件: GridColumnsPanel

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

类名: .MuiDataGridPro-columnsManagement

默认组件: GridColumnsManagement

包装过滤器和列面板的面板组件。

类名: .MuiDataGridPro-panel

默认组件: GridPanel

为每一行渲染的组件。

类名: .MuiDataGridPro-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

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

默认组件: GridCheckIcon

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

默认组件: 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

CSS 类

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

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

规则名称:actionsCell

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

规则名称:aggregationColumnHeader

.MuiDataGridPro-aggregationColumnHeader--alignCenter

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

规则名称:aggregationColumnHeader--alignCenter

.MuiDataGridPro-aggregationColumnHeader--alignLeft

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

规则名称:aggregationColumnHeader--alignLeft

.MuiDataGridPro-aggregationColumnHeader--alignRight

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

规则名称:aggregationColumnHeader--alignRight

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

规则名称:aggregationColumnHeaderLabel

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

规则名称:autoHeight

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

规则名称:autosizing

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

规则名称:booleanCell

.MuiDataGridPro-cell--editable

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

规则名称:cell--editable

.MuiDataGridPro-cell--editing

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

规则名称:cell--editing

.MuiDataGridPro-cell--flex

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

规则名称:cell--flex

.MuiDataGridPro-cell--pinnedLeft

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

规则名称:cell--pinnedLeft

.MuiDataGridPro-cell--pinnedRight

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

规则名称:cell--pinnedRight

.MuiDataGridPro-cell--rangeBottom

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

规则名称:cell--rangeBottom

.MuiDataGridPro-cell--rangeLeft

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

规则名称:cell--rangeLeft

.MuiDataGridPro-cell--rangeRight

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

规则名称:cell--rangeRight

.MuiDataGridPro-cell--rangeTop

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

规则名称:cell--rangeTop

.MuiDataGridPro-cell--selectionMode

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

规则名称:cell--selectionMode

.MuiDataGridPro-cell--textCenter

如果 align="center"，则应用于单元格元素的样式。

规则名称:cell--textCenter

.MuiDataGridPro-cell--textLeft

如果 align="left"，则应用于单元格元素的样式。

规则名称:cell--textLeft

.MuiDataGridPro-cell--textRight

如果 align="right"，则应用于单元格元素的样式。

规则名称:cell--textRight

.MuiDataGridPro-cell--withLeftBorder

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

规则名称:cell--withLeftBorder

.MuiDataGridPro-cell--withRightBorder

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

规则名称:cell--withRightBorder

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

规则名称:cellCheckbox

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

规则名称:cellEmpty

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

规则名称:cellSkeleton

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

规则名称:checkboxInput

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

规则名称:columnHeader

.MuiDataGridPro-columnHeader--alignCenter

当 headerAlign="center" 时，应用于列标题的样式。

规则名称:columnHeader--alignCenter

.MuiDataGridPro-columnHeader--alignLeft

当 headerAlign="left" 时，应用于列标题的样式。

规则名称:columnHeader--alignLeft

.MuiDataGridPro-columnHeader--alignRight

当 headerAlign="right" 时，应用于列标题的样式。

规则名称:columnHeader--alignRight

.MuiDataGridPro-columnHeader--dragging

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

规则名称:columnHeader--dragging

.MuiDataGridPro-columnHeader--emptyGroup

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

规则名称:columnHeader--emptyGroup

.MuiDataGridPro-columnHeader--filledGroup

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

规则名称:columnHeader--filledGroup

.MuiDataGridPro-columnHeader--filtered

如果列已应用过滤器，则应用于列标题的样式。

规则名称:columnHeader--filtered

.MuiDataGridPro-columnHeader--last

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

规则名称:columnHeader--last

.MuiDataGridPro-columnHeader--moving

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

规则名称:columnHeader--moving

.MuiDataGridPro-columnHeader--numeric

如果列的类型为 number，则应用于列标题的样式。

规则名称:columnHeader--numeric

.MuiDataGridPro-columnHeader--pinnedLeft

规则名称:columnHeader--pinnedLeft

.MuiDataGridPro-columnHeader--pinnedRight

规则名称:columnHeader--pinnedRight

.MuiDataGridPro-columnHeader--sortable

如果列是可排序的，则应用于列标题的样式。

规则名称:columnHeader--sortable

.MuiDataGridPro-columnHeader--sorted

如果列已排序，则应用于列标题的样式。

规则名称:columnHeader--sorted

.MuiDataGridPro-columnHeader--withLeftBorder

规则名称:columnHeader--withLeftBorder

.MuiDataGridPro-columnHeader--withRightBorder

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

规则名称:columnHeader--withRightBorder

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

规则名称:columnHeaderCheckbox

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

规则名称:columnHeaderDraggableContainer

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

规则名称:columnHeaderTitle

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

规则名称:columnHeaderTitleContainer

应用于列标题的标题（不包括按钮）的样式。

规则名称:columnHeaderTitleContainerContent

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

规则名称:columnSeparator

.MuiDataGridPro-columnSeparator--resizable

如果列是可调整大小的，则应用于列标题分隔符的样式。

规则名称:columnSeparator--resizable

.MuiDataGridPro-columnSeparator--resizing

如果列正在被调整大小，则应用于列标题分隔符的样式。

规则名称:columnSeparator--resizing

.MuiDataGridPro-columnSeparator--sideLeft

如果侧面是 "left"，则应用于列标题分隔符的样式。

规则名称:columnSeparator--sideLeft

.MuiDataGridPro-columnSeparator--sideRight

如果侧面是 "right"，则应用于列标题分隔符的样式。

规则名称:columnSeparator--sideRight

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

规则名称:columnsManagementFooter

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

规则名称:columnsManagementHeader

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

规则名称:columnsManagementRow

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

规则名称:columnsManagementSearchInput

.MuiDataGridPro-container--bottom

应用于底部容器的样式。

规则名称:container--bottom

.MuiDataGridPro-container--top

应用于顶部容器的样式。

规则名称:container--top

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

规则名称:detailPanel

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

规则名称:detailPanelToggleCell

.MuiDataGridPro-detailPanelToggleCell--expanded

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

规则名称:detailPanelToggleCell--expanded

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

规则名称:editBooleanCell

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

规则名称:editInputCell

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

规则名称:filterForm

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

规则名称:filterFormColumnInput

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

规则名称:filterFormDeleteIcon

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

规则名称:filterFormLogicOperatorInput

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

规则名称:filterFormOperatorInput

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

规则名称:filterFormValueInput

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

规则名称:filterIcon

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

规则名称:footerCell

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

规则名称:footerContainer

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

规则名称:groupingCriteriaCell

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

规则名称:groupingCriteriaCellToggle

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

规则名称:headerFilterRow

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

规则名称:iconButtonContainer

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

规则名称:iconSeparator

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

规则名称:main

.MuiDataGridPro-main--hasPinnedRight

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

规则名称:main--hasPinnedRight

应用于菜单元素的样式。

规则名称:menu

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

规则名称:menuIcon

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

规则名称:menuIconButton

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

规则名称:menuList

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

规则名称:menuOpen

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

规则名称:overlay

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

规则名称:overlayWrapper

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

规则名称:overlayWrapperInner

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

规则名称:panelContent

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

规则名称:panelFooter

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

规则名称:panelHeader

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

规则名称:panelWrapper

应用于纸张元素的样式。

规则名称:paper

应用于固定列的样式。

规则名称:pinnedColumns

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

规则名称:pinnedRows

.MuiDataGridPro-pinnedRows--bottom

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

规则名称:pinnedRows--bottom

.MuiDataGridPro-pinnedRows--top

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

规则名称:pinnedRows--top

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

规则名称:pinnedRowsRenderZone

应用于根元素的样式。

规则名称:root

.MuiDataGridPro-root--densityComfortable

如果密度为 "comfortable"，则应用于根元素的样式。

规则名称:root--densityComfortable

.MuiDataGridPro-root--densityCompact

如果密度为 "compact"，则应用于根元素的样式。

规则名称:root--densityCompact

.MuiDataGridPro-root--densityStandard

如果密度为 "standard" (默认)，则应用于根元素的样式。

规则名称:root--densityStandard

.MuiDataGridPro-root--disableUserSelection

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

规则名称:root--disableUserSelection

.MuiDataGridPro-row--detailPanelExpanded

如果行的详细信息面板是打开的，则应用于该行的样式。

规则名称:row--detailPanelExpanded

.MuiDataGridPro-row--dragging

当浮动特殊行重新排序单元格元素被拖动时，应用于该元素的样式。

规则名称:row--dragging

.MuiDataGridPro-row--dynamicHeight

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

规则名称:row--dynamicHeight

.MuiDataGridPro-row--editable

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

规则名称:row--editable

.MuiDataGridPro-row--editing

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

规则名称:row--editing

.MuiDataGridPro-row--firstVisible

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

规则名称:row--firstVisible

.MuiDataGridPro-row--lastVisible

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

规则名称:row--lastVisible

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

规则名称:rowCount

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

规则名称:rowReorderCell

.MuiDataGridPro-rowReorderCell--draggable

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

规则名称:rowReorderCell--draggable

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

规则名称:rowReorderCellContainer

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

规则名称:rowReorderCellPlaceholder

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

规则名称：rowSkeleton

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

规则名称：scrollArea

.MuiDataGridPro-scrollArea--left

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

规则名称：scrollArea--left

.MuiDataGridPro-scrollArea--right

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

规则名称：scrollArea--right

应用于滚动条的样式。

规则名称：scrollbar

.MuiDataGridPro-scrollbar--horizontal

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

规则名称：scrollbar--horizontal

.MuiDataGridPro-scrollbar--vertical

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

规则名称：scrollbar--vertical

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

规则名称：selectedRowCount

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

规则名称：sortIcon

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

规则名称：toolbarContainer

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

规则名称：toolbarFilterList

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

规则名称：treeDataGroupingCell

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

规则名称：treeDataGroupingCellToggle

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

规则名称：virtualScroller

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

规则名称：virtualScrollerContent

.MuiDataGridPro-virtualScrollerContent--overflowed

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

规则名称：virtualScrollerContent--overflowed

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

规则名称：virtualScrollerRenderZone

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

规则名称：withBorderColor

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

规则名称：withVerticalBorder


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

源代码

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