跳到内容

DataGridAPI

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

演示

导入

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

通过阅读关于最小化捆绑包大小的指南，了解两者之间的区别。

Props

必需

类型为 GridColDef[] 的列集合。

类型:Array<object>

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

类型:{ current: object }

Data Grid 的标签。

类型:string

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

类型:string

已弃用

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

类型:bool

默认值:false

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

类型:bool

默认值:false

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

类型:bool

默认值:false

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

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

控制单元格的模式。

类型:object

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

类型:bool

默认值:false

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

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

类型:object

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

类型:string

默认值:'\t'

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

类型:number

默认值:150

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

类型:number

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

类型:number

默认值:56

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

类型:object

设置 Data Grid 的密度。

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

默认值:"standard"

如果为 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，则禁用使用 Ctrl/CMD 或 Shift 键进行多选。除非启用了 checkboxSelection，否则 MIT DataGrid 将忽略此 prop。

类型: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"

设置 Data Grid 的筛选模型。

类型:{ 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

签名:
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。确保此 prop 的引用是稳定的，以避免性能影响。可以通过在组件外部定义 prop 或通过记忆化来实现。

类型:func

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

类型:func

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

返回：行间距值。

如果为 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"

DataGrid 的初始状态。其中的数据将在初始化时设置在状态中，但不会受到控制。如果 initialState 中的某个数据也受到控制，则控制状态优先。

类型:object

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

类型:func

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

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

确定是否可以选择行。

类型:func

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

返回：指示行是否可选择的布尔值。

如果为 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(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 的事件。

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

类型: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(data: string) => void
  • data 复制到剪贴板的数据。

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

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

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

类型: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(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(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 的事件。

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

类型:func

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

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

类型:func

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

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

类型:func

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

使用组件 UI 动态选择 pageSize。

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

默认值:[25, 50, 100]

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

类型:{ hasNextPage?: bool }

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

类型:'client'
| 'server'

默认值:"client"

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

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

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

类型:func

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

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

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

类型:bool

默认值:false

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

类型:number

默认值:60

在视口之前/之后渲染的像素行区域

类型:number

默认值:150

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

类型:number

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

类型:number

默认值:52

控制行的模式。

类型:object

已弃用

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

类型:number

默认值:166

类型为 GridRowsProp 的行集合。

类型:Array<object>

默认值:[]

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

类型:bool

默认值:true

设置 Data Grid 的行选择模型。

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

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

类型:'border'
| 'margin'

默认值:"margin"

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

类型:number

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

类型:bool

默认值:false

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

类型:bool

默认值:false

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

类型:object

可覆盖的组件。

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

类型:object

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

类型:'client'
| 'server'

默认值:"client"

排序顺序的顺序。

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

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

设置 Data Grid 的排序模型。

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

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

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

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

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

类型:bool

默认值:false

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

类型:bool

默认值:false

ref 被转发到根元素。

Slots

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

默认组件: Chip

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

类名: .MuiDataGrid-cell

默认组件: GridCell

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

默认组件: GridSkeletonCell

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

默认组件: GridColumnHeaderFilterIconButton

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

默认组件: GridColumnHeaderSortIcon

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

默认组件: GridColumnMenu

负责渲染列标题的组件。

类名: .MuiDataGrid-columnHeaders

默认组件: GridColumnHeaders

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

类名: .MuiDataGrid-detailPanels

默认组件: GridDetailPanels

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

默认组件: GridFooter

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

默认组件: GridRowCount

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

默认组件: null

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

默认组件: GridLoadingOverlay

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

默认组件: GridNoResultsOverlay

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

默认组件: GridNoRowsOverlay

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

默认组件: Pagination

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

默认组件: GridFilterPanel

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

默认组件: GridColumnsPanel

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

类名: .MuiDataGrid-columnsManagement

默认组件: GridColumnsManagement

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

类名: .MuiDataGrid-panel

默认组件: GridPanel

为每行渲染的组件。

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

CSS 类

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

应用于类型为“actions”的单元格根元素的样式。

规则名称：actionsCell

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

规则名称：aggregationColumnHeader

.MuiDataGrid-aggregationColumnHeader--alignCenter

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

规则名称：aggregationColumnHeader--alignCenter

.MuiDataGrid-aggregationColumnHeader--alignLeft

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

规则名称：aggregationColumnHeader--alignLeft

.MuiDataGrid-aggregationColumnHeader--alignRight

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

规则名称：aggregationColumnHeader--alignRight

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

规则名称：aggregationColumnHeaderLabel

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

规则名称：autoHeight

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

规则名称：autosizing

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

规则名称：booleanCell

.MuiDataGrid-cell--editable

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

规则名称：cell--editable

.MuiDataGrid-cell--editing

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

规则名称：cell--editing

.MuiDataGrid-cell--flex

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

规则名称：cell--flex

.MuiDataGrid-cell--pinnedLeft

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

规则名称：cell--pinnedLeft

.MuiDataGrid-cell--pinnedRight

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

规则名称：cell--pinnedRight

.MuiDataGrid-cell--rangeBottom

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

规则名称：cell--rangeBottom

.MuiDataGrid-cell--rangeLeft

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

规则名称：cell--rangeLeft

.MuiDataGrid-cell--rangeRight

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

规则名称：cell--rangeRight

.MuiDataGrid-cell--rangeTop

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

规则名称：cell--rangeTop

.MuiDataGrid-cell--selectionMode

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

规则名称：cell--selectionMode

.MuiDataGrid-cell--textCenter

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

规则名称：cell--textCenter

.MuiDataGrid-cell--textLeft

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

规则名称：cell--textLeft

.MuiDataGrid-cell--textRight

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

规则名称：cell--textRight

.MuiDataGrid-cell--withLeftBorder

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

规则名称：cell--withLeftBorder

.MuiDataGrid-cell--withRightBorder

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

规则名称：cell--withRightBorder

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

规则名称：cellCheckbox

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

规则名称：cellEmpty

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

规则名称：cellSkeleton

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

规则名称：checkboxInput

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

规则名称：columnHeader

.MuiDataGrid-columnHeader--alignCenter

如果 headerAlign="center"，则应用于列标题的样式。

规则名称：columnHeader--alignCenter

.MuiDataGrid-columnHeader--alignLeft

如果 headerAlign="left"，则应用于列标题的样式。

规则名称：columnHeader--alignLeft

.MuiDataGrid-columnHeader--alignRight

如果 headerAlign="right"，则应用于列标题的样式。

规则名称：columnHeader--alignRight

.MuiDataGrid-columnHeader--dragging

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

规则名称：columnHeader--dragging

.MuiDataGrid-columnHeader--emptyGroup

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

规则名称：columnHeader--emptyGroup

.MuiDataGrid-columnHeader--filledGroup

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

规则名称：columnHeader--filledGroup

.MuiDataGrid-columnHeader--filtered

如果列标题应用了筛选器，则应用于列标题的样式。

规则名称：columnHeader--filtered

.MuiDataGrid-columnHeader--last

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

规则名称：columnHeader--last

.MuiDataGrid-columnHeader--moving

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

规则名称：columnHeader--moving

.MuiDataGrid-columnHeader--numeric

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

规则名称：columnHeader--numeric

.MuiDataGrid-columnHeader--pinnedLeft

规则名称：columnHeader--pinnedLeft

.MuiDataGrid-columnHeader--pinnedRight

规则名称：columnHeader--pinnedRight

.MuiDataGrid-columnHeader--sortable

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

规则名称：columnHeader--sortable

.MuiDataGrid-columnHeader--sorted

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

规则名称：columnHeader--sorted

.MuiDataGrid-columnHeader--withLeftBorder

规则名称：columnHeader--withLeftBorder

.MuiDataGrid-columnHeader--withRightBorder

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

规则名称：columnHeader--withRightBorder

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

规则名称：columnHeaderCheckbox

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

规则名称：columnHeaderDraggableContainer

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

规则名称：columnHeaderTitle

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

规则名称：columnHeaderTitleContainer

应用于列标题的标题，除了按钮。

规则名称：columnHeaderTitleContainerContent

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

规则名称：columnSeparator

.MuiDataGrid-columnSeparator--resizable

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

规则名称：columnSeparator--resizable

.MuiDataGrid-columnSeparator--resizing

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

规则名称：columnSeparator--resizing

.MuiDataGrid-columnSeparator--sideLeft

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

规则名称：columnSeparator--sideLeft

.MuiDataGrid-columnSeparator--sideRight

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

规则名称：columnSeparator--sideRight

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

规则名称：columnsManagementFooter

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

规则名称：columnsManagementHeader

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

规则名称：columnsManagementRow

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

规则名称：columnsManagementSearchInput

.MuiDataGrid-container--bottom

应用于底部容器的样式。

规则名称：container--bottom

.MuiDataGrid-container--top

应用于顶部容器的样式。

规则名称：container--top

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

规则名称：detailPanel

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

规则名称：detailPanelToggleCell

.MuiDataGrid-detailPanelToggleCell--expanded

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

规则名称：detailPanelToggleCell--expanded

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

规则名称：editBooleanCell

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

规则名称：editInputCell

应用于筛选器表单组件根部的样式。

规则名称：filterForm

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

规则名称：filterFormColumnInput

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

规则名称：filterFormDeleteIcon

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

规则名称：filterFormLogicOperatorInput

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

规则名称：filterFormOperatorInput

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

规则名称：filterFormValueInput

应用于筛选器图标元素的样式。

规则名称：filterIcon

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

规则名称：footerCell

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

规则名称：footerContainer

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

规则名称：groupingCriteriaCell

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

规则名称：groupingCriteriaCellToggle

应用于列标题筛选器行的样式。

规则名称：headerFilterRow

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

规则名称:iconButtonContainer

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

规则名称:iconSeparator

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

规则名称:main

.MuiDataGrid-main--hasPinnedRight

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

规则名称:main--hasPinnedRight

应用于菜单元素的样式。

规则名称:menu

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

规则名称:menuIcon

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

规则名称:menuIconButton

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

规则名称:menuList

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

规则名称:menuOpen

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

规则名称:overlay

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

规则名称:overlayWrapper

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

规则名称:overlayWrapperInner

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

规则名称:panelContent

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

规则名称:panelFooter

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

规则名称:panelHeader

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

规则名称:panelWrapper

应用于纸张元素的样式。

规则名称:paper

应用于固定的列的样式。

规则名称:pinnedColumns

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

规则名称:pinnedRows

.MuiDataGrid-pinnedRows--bottom

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

规则名称:pinnedRows--bottom

.MuiDataGrid-pinnedRows--top

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

规则名称:pinnedRows--top

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

规则名称:pinnedRowsRenderZone

应用于根元素的样式。

规则名称:root

.MuiDataGrid-root--densityComfortable

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

规则名称:root--densityComfortable

.MuiDataGrid-root--densityCompact

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

规则名称:root--densityCompact

.MuiDataGrid-root--densityStandard

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

规则名称:root--densityStandard

.MuiDataGrid-root--disableUserSelection

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

规则名称:root--disableUserSelection

.MuiDataGrid-row--detailPanelExpanded

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

规则名称:row--detailPanelExpanded

.MuiDataGrid-row--dragging

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

规则名称:row--dragging

.MuiDataGrid-row--dynamicHeight

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

规则名称:row--dynamicHeight

.MuiDataGrid-row--editable

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

规则名称:row--editable

.MuiDataGrid-row--editing

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

规则名称:row--editing

.MuiDataGrid-row--firstVisible

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

规则名称:row--firstVisible

.MuiDataGrid-row--lastVisible

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

规则名称:row--lastVisible

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

规则名称:rowCount

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

规则名称:rowReorderCell

.MuiDataGrid-rowReorderCell--draggable

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

规则名称:rowReorderCell--draggable

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

规则名称:rowReorderCellContainer

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

规则名称:rowReorderCellPlaceholder

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

规则名称:rowSkeleton

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

规则名称:scrollArea

.MuiDataGrid-scrollArea--left

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

规则名称:scrollArea--left

.MuiDataGrid-scrollArea--right

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

规则名称:scrollArea--right

应用于滚动条的样式。

规则名称:scrollbar

.MuiDataGrid-scrollbar--horizontal

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

规则名称:scrollbar--horizontal

.MuiDataGrid-scrollbar--vertical

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

规则名称:scrollbar--vertical

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

规则名称:selectedRowCount

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

规则名称:sortIcon

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

规则名称:toolbarContainer

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

规则名称:toolbarFilterList

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

规则名称:treeDataGroupingCell

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

规则名称:treeDataGroupingCellToggle

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

规则名称:virtualScroller

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

规则名称:virtualScrollerContent

.MuiDataGrid-virtualScrollerContent--overflowed

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

规则名称:virtualScrollerContent--overflowed

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

规则名称:virtualScrollerRenderZone

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

规则名称:withBorderColor

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

规则名称:withVerticalBorder


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

源代码

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