数据表格 - 状态

初始化和读取数据表格的状态。

初始化状态

一些状态键可以使用 initialState 属性进行初始化。此属性的格式与 apiRef.current.exportState() 的返回值相同。

<DataGrid
  {...data}
  loading={loading}
  initialState={{
    ...data.initialState,
    filter: {
      filterModel: {
        items: [{ field: 'quantity', operator: '>', value: 10000 }],
      },
    },
    sorting: {
      sortModel: [{ field: 'desk', sort: 'asc' }],
    },
  }}
/>

<DataGrid
  {...data}
  loading={loading}
  initialState={{
    ...data.initialState,
    filter: {
      filterModel: {
        items: [{ field: 'quantity', operator: '>', value: 10000 }],
      },
    },
    sorting: {
      sortModel: [{ field: 'desk', sort: 'asc' }],
    },
  }}
/>

按 Enter 开始编辑

访问状态

状态在 apiRef 对象上公开。

@mui/x-data-grid-pro 包公开了一组状态选择器，它们将 apiRef.current.state 作为参数并返回一个值。您可以使用它们从状态中获取数据，而无需担心其内部结构。

直接选择器访问

使用选择器的最简单方法是将其作为函数调用，并将 apiRef 作为其第一个参数

const paginationModel = gridPaginationModelSelector(apiRef);

使用 apiRef.current.state 调用也可以工作，但当单个页面上存在多个数据表格实例时，可能会导致副作用。如果您仍然需要使用状态调用它，请不要忘记传递实例 ID，如示例所示

const paginationModel = gridPaginationModelSelector(
  apiRef.current.state,
  apiRef.current.instanceId,
);

使用 useGridSelector

如果您只需要在组件的渲染中访问状态值，请使用 useGridSelector 钩子。此钩子确保存在反应式绑定，以便当状态更改时，使用此钩子的组件将被重新渲染。

const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);

<DataGrid
  {...data}
  loading={loading}
  paginationModel={paginationModel}
  onPaginationModelChange={setPaginationModel}
  hideFooter
  slots={{
    toolbar: Toolbar,
  }}
/>

<DataGrid
  {...data}
  loading={loading}
  paginationModel={paginationModel}
  onPaginationModelChange={setPaginationModel}
  hideFooter
  slots={{
    toolbar: Toolbar,
  }}
/>

按 Enter 开始编辑

选择器目录

一些选择器尚未被记录。

聚合

gridAggregationLookupSelector

获取聚合结果作为查找表。

签名

gridAggregationLookupSelector: (apiRef: GridApiRef) => GridAggregationLookup
// or
gridAggregationLookupSelector: (state: GridState, instanceId?: number) => GridAggregationLookup

示例

gridAggregationLookupSelector(apiRef)
// or
gridAggregationLookupSelector(state, apiRef.current.instanceId)

gridAggregationModelSelector

获取聚合模型，其中包含每列的聚合函数。如果列不在模型中，则不会聚合。

签名

gridAggregationModelSelector: (apiRef: GridApiRef) => GridAggregationModel
// or
gridAggregationModelSelector: (state: GridState, instanceId?: number) => GridAggregationModel

示例

gridAggregationModelSelector(apiRef)
// or
gridAggregationModelSelector(state, apiRef.current.instanceId)

列

gridColumnDefinitionsSelector

获取屏幕上渲染的列定义的数组。

签名

gridColumnDefinitionsSelector: (apiRef: GridApiRef) => GridStateColDef[]
// or
gridColumnDefinitionsSelector: (state: GridState, instanceId?: number) => GridStateColDef[]

示例

gridColumnDefinitionsSelector(apiRef)
// or
gridColumnDefinitionsSelector(state, apiRef.current.instanceId)

gridColumnFieldsSelector

获取屏幕上渲染的列字段的数组。

签名

gridColumnFieldsSelector: (apiRef: GridApiRef) => string[]
// or
gridColumnFieldsSelector: (state: GridState, instanceId?: number) => string[]

示例

gridColumnFieldsSelector(apiRef)
// or
gridColumnFieldsSelector(state, apiRef.current.instanceId)

gridColumnLookupSelector

将列作为查找表获取（一个对象，其中包含字段作为键，定义作为值）。

签名

gridColumnLookupSelector: (apiRef: GridApiRef) => GridColumnLookup
// or
gridColumnLookupSelector: (state: GridState, instanceId?: number) => GridColumnLookup

示例

gridColumnLookupSelector(apiRef)
// or
gridColumnLookupSelector(state, apiRef.current.instanceId)

gridColumnsStateSelector

获取列状态

签名

gridColumnsStateSelector: (state: GridState) => GridColumnsState

示例

const columnsState = gridColumnsStateSelector(apiRef.current.state);

gridFilterableColumnDefinitionsSelector

获取可筛选列的数组。

签名

gridFilterableColumnDefinitionsSelector: (apiRef: GridApiRef) => GridStateColDef[]
// or
gridFilterableColumnDefinitionsSelector: (state: GridState, instanceId?: number) => GridStateColDef[]

示例

gridFilterableColumnDefinitionsSelector(apiRef)
// or
gridFilterableColumnDefinitionsSelector(state, apiRef.current.instanceId)

gridFilterableColumnLookupSelector

将可筛选列作为查找表获取（一个对象，其中包含字段作为键，定义作为值）。

签名

gridFilterableColumnLookupSelector: (apiRef: GridApiRef) => GridColumnLookup
// or
gridFilterableColumnLookupSelector: (state: GridState, instanceId?: number) => GridColumnLookup

示例

gridFilterableColumnLookupSelector(apiRef)
// or
gridFilterableColumnLookupSelector(state, apiRef.current.instanceId)

可见列

gridColumnPositionsSelector

获取每个可见列相对于第一列左侧的像素左侧位置。

签名

gridColumnPositionsSelector: (apiRef: GridApiRef) => number[]
// or
gridColumnPositionsSelector: (state: GridState, instanceId?: number) => number[]

示例

gridColumnPositionsSelector(apiRef)
// or
gridColumnPositionsSelector(state, apiRef.current.instanceId)

gridColumnVisibilityModelSelector

获取列可见性模型，其中包含每列的可见性状态。如果列未在模型中注册，则它是可见的。

签名

gridColumnVisibilityModelSelector: (apiRef: GridApiRef) => GridColumnVisibilityModel
// or
gridColumnVisibilityModelSelector: (state: GridState, instanceId?: number) => GridColumnVisibilityModel

示例

gridColumnVisibilityModelSelector(apiRef)
// or
gridColumnVisibilityModelSelector(state, apiRef.current.instanceId)

gridColumnsTotalWidthSelector

获取所有可见列的总宽度。

签名

gridColumnsTotalWidthSelector: (apiRef: GridApiRef) => number
// or
gridColumnsTotalWidthSelector: (state: GridState, instanceId?: number) => number

示例

gridColumnsTotalWidthSelector(apiRef)
// or
gridColumnsTotalWidthSelector(state, apiRef.current.instanceId)

gridPinnedColumnsSelector

获取可见的固定列模型。

签名

gridPinnedColumnsSelector: (state: GridState) => GridPinnedColumnFields

示例

const pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);

gridVisibleColumnDefinitionsSelector

将可见列作为查找表获取（一个对象，其中包含字段作为键，定义作为值）。

签名

gridVisibleColumnDefinitionsSelector: (apiRef: GridApiRef) => GridStateColDef[]
// or
gridVisibleColumnDefinitionsSelector: (state: GridState, instanceId?: number) => GridStateColDef[]

示例

gridVisibleColumnDefinitionsSelector(apiRef)
// or
gridVisibleColumnDefinitionsSelector(state, apiRef.current.instanceId)

gridVisibleColumnFieldsSelector

获取每个可见列的字段。

签名

gridVisibleColumnFieldsSelector: (apiRef: GridApiRef) => string[]
// or
gridVisibleColumnFieldsSelector: (state: GridState, instanceId?: number) => string[]

示例

gridVisibleColumnFieldsSelector(apiRef)
// or
gridVisibleColumnFieldsSelector(state, apiRef.current.instanceId)

gridVisiblePinnedColumnDefinitionsSelector

获取可见的固定列。

签名

gridVisiblePinnedColumnDefinitionsSelector: (apiRef: GridApiRef) => { left: GridStateColDef[]; right: GridStateColDef[] }
// or
gridVisiblePinnedColumnDefinitionsSelector: (state: GridState, instanceId?: number) => { left: GridStateColDef[]; right: GridStateColDef[] }

示例

gridVisiblePinnedColumnDefinitionsSelector(apiRef)
// or
gridVisiblePinnedColumnDefinitionsSelector(state, apiRef.current.instanceId)

筛选

gridExpandedRowCountSelector

获取筛选过程后可访问的行数。

签名

gridExpandedRowCountSelector: (apiRef: GridApiRef) => number
// or
gridExpandedRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridExpandedRowCountSelector(apiRef)
// or
gridExpandedRowCountSelector(state, apiRef.current.instanceId)

gridExpandedSortedRowEntriesSelector

获取筛选过程后可访问的行的 ID 和模型。不包含折叠的子项。

签名

gridExpandedSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridExpandedSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridExpandedSortedRowEntriesSelector(apiRef)
// or
gridExpandedSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridExpandedSortedRowIdsSelector

获取筛选过程后可访问的行的 ID。不包含折叠的子项。

签名

gridExpandedSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridExpandedSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

示例

gridExpandedSortedRowIdsSelector(apiRef)
// or
gridExpandedSortedRowIdsSelector(state, apiRef.current.instanceId)

gridFilterModelSelector

获取当前的筛选模型。

签名

gridFilterModelSelector: (apiRef: GridApiRef) => GridFilterModel
// or
gridFilterModelSelector: (state: GridState, instanceId?: number) => GridFilterModel

示例

gridFilterModelSelector(apiRef)
// or
gridFilterModelSelector(state, apiRef.current.instanceId)

gridFilteredDescendantRowCountSelector

获取筛选过程后可访问的后代行数。

签名

gridFilteredDescendantRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredDescendantRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridFilteredDescendantRowCountSelector(apiRef)
// or
gridFilteredDescendantRowCountSelector(state, apiRef.current.instanceId)

gridFilteredRowCountSelector

获取筛选过程后可访问的行数。包括顶层和后代行。

签名

gridFilteredRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridFilteredRowCountSelector(apiRef)
// or
gridFilteredRowCountSelector(state, apiRef.current.instanceId)

gridFilteredSortedRowEntriesSelector

获取筛选过程后可访问的行的 ID 和模型。包含折叠的子项。

签名

gridFilteredSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridFilteredSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridFilteredSortedRowEntriesSelector(apiRef)
// or
gridFilteredSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridFilteredSortedRowIdsSelector

获取筛选过程后可访问的行的 ID。包含折叠的子项。

签名

gridFilteredSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridFilteredSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

示例

gridFilteredSortedRowIdsSelector(apiRef)
// or
gridFilteredSortedRowIdsSelector(state, apiRef.current.instanceId)

gridFilteredSortedTopLevelRowEntriesSelector

获取筛选过程后可访问的顶层行的 ID 和模型。

签名

gridFilteredSortedTopLevelRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridFilteredSortedTopLevelRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridFilteredSortedTopLevelRowEntriesSelector(apiRef)
// or
gridFilteredSortedTopLevelRowEntriesSelector(state, apiRef.current.instanceId)

gridFilteredTopLevelRowCountSelector

获取筛选过程后可访问的顶层行数。

签名

gridFilteredTopLevelRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredTopLevelRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridFilteredTopLevelRowCountSelector(apiRef)
// or
gridFilteredTopLevelRowCountSelector(state, apiRef.current.instanceId)

gridQuickFilterValuesSelector

获取当前的快速筛选值。

签名

gridQuickFilterValuesSelector: (apiRef: GridApiRef) => any[] | undefined
// or
gridQuickFilterValuesSelector: (state: GridState, instanceId?: number) => any[] | undefined

示例

gridQuickFilterValuesSelector(apiRef)
// or
gridQuickFilterValuesSelector(state, apiRef.current.instanceId)

分页

gridPageCountSelector

如果启用了分页，则获取显示所有行所需的页数

签名

gridPageCountSelector: (apiRef: GridApiRef) => number
// or
gridPageCountSelector: (state: GridState, instanceId?: number) => number

示例

gridPageCountSelector(apiRef)
// or
gridPageCountSelector(state, apiRef.current.instanceId)

gridPageSelector

如果启用了分页，则获取要渲染的页面的索引

签名

gridPageSelector: (apiRef: GridApiRef) => number
// or
gridPageSelector: (state: GridState, instanceId?: number) => number

示例

gridPageSelector(apiRef)
// or
gridPageSelector(state, apiRef.current.instanceId)

gridPageSizeSelector

如果启用了分页，则获取单页上显示的最大行数

签名

gridPageSizeSelector: (apiRef: GridApiRef) => number
// or
gridPageSizeSelector: (state: GridState, instanceId?: number) => number

示例

gridPageSizeSelector(apiRef)
// or
gridPageSizeSelector(state, apiRef.current.instanceId)

gridPaginatedVisibleSortedGridRowEntriesSelector

如果启用了分页，则获取当前页中要包含的每一行的 ID 和模型。

签名

gridPaginatedVisibleSortedGridRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridPaginatedVisibleSortedGridRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef)
// or
gridPaginatedVisibleSortedGridRowEntriesSelector(state, apiRef.current.instanceId)

gridPaginatedVisibleSortedGridRowIdsSelector

如果启用了分页，则获取当前页中要包含的每一行的 ID。

签名

gridPaginatedVisibleSortedGridRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridPaginatedVisibleSortedGridRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

示例

gridPaginatedVisibleSortedGridRowIdsSelector(apiRef)
// or
gridPaginatedVisibleSortedGridRowIdsSelector(state, apiRef.current.instanceId)

gridPaginationMetaSelector

获取分页元数据

签名

gridPaginationMetaSelector: (apiRef: GridApiRef) => GridPaginationMeta
// or
gridPaginationMetaSelector: (state: GridState, instanceId?: number) => GridPaginationMeta

示例

gridPaginationMetaSelector(apiRef)
// or
gridPaginationMetaSelector(state, apiRef.current.instanceId)

gridPaginationModelSelector

获取分页模型

签名

gridPaginationModelSelector: (apiRef: GridApiRef) => GridPaginationModel
// or
gridPaginationModelSelector: (state: GridState, instanceId?: number) => GridPaginationModel

示例

gridPaginationModelSelector(apiRef)
// or
gridPaginationModelSelector(state, apiRef.current.instanceId)

gridPaginationRowCountSelector

获取行计数

签名

gridPaginationRowCountSelector: (apiRef: GridApiRef) => number
// or
gridPaginationRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridPaginationRowCountSelector(apiRef)
// or
gridPaginationRowCountSelector(state, apiRef.current.instanceId)

gridPaginationRowRangeSelector

如果启用了分页，则获取当前页中要包含的第一行和最后一行索引。

签名

gridPaginationRowRangeSelector: (apiRef: GridApiRef) => { firstRowIndex: number; lastRowIndex: number } | null
// or
gridPaginationRowRangeSelector: (state: GridState, instanceId?: number) => { firstRowIndex: number; lastRowIndex: number } | null

示例

gridPaginationRowRangeSelector(apiRef)
// or
gridPaginationRowRangeSelector(state, apiRef.current.instanceId)

gridVisibleRowsSelector

获取筛选和排序后的行、范围和 rowIndex 查找表映射。不包含折叠的子项。

签名

gridVisibleRowsSelector: (apiRef: GridApiRef) => { rows: GridRowEntry<GridValidRowModel>[]; range: { firstRowIndex: number; lastRowIndex: number } | null; rowToIndexMap: Map<GridValidRowModel, number> }
// or
gridVisibleRowsSelector: (state: GridState, instanceId?: number) => { rows: GridRowEntry<GridValidRowModel>[]; range: { firstRowIndex: number; lastRowIndex: number } | null; rowToIndexMap: Map<GridValidRowModel, number> }

示例

gridVisibleRowsSelector(apiRef)
// or
gridVisibleRowsSelector(state, apiRef.current.instanceId)

排序

gridSortModelSelector

获取当前的排序模型。

签名

gridSortModelSelector: (apiRef: GridApiRef) => GridSortModel
// or
gridSortModelSelector: (state: GridState, instanceId?: number) => GridSortModel

示例

gridSortModelSelector(apiRef)
// or
gridSortModelSelector(state, apiRef.current.instanceId)

gridSortedRowEntriesSelector

获取排序过程后的行的 ID 和模型。

签名

gridSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridSortedRowEntriesSelector(apiRef)
// or
gridSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridSortedRowIdsSelector

获取排序过程后的行的 ID。

签名

gridSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

示例

gridSortedRowIdsSelector(apiRef)
// or
gridSortedRowIdsSelector(state, apiRef.current.instanceId)

虚拟化

gridVirtualizationColumnEnabledSelector

获取列虚拟化的启用状态

签名

gridVirtualizationColumnEnabledSelector: (apiRef: GridApiRef) => boolean
// or
gridVirtualizationColumnEnabledSelector: (state: GridState, instanceId?: number) => boolean

示例

gridVirtualizationColumnEnabledSelector(apiRef)
// or
gridVirtualizationColumnEnabledSelector(state, apiRef.current.instanceId)

gridVirtualizationEnabledSelector

获取虚拟化的启用状态

签名

gridVirtualizationEnabledSelector: (apiRef: GridApiRef) => boolean
// or
gridVirtualizationEnabledSelector: (state: GridState, instanceId?: number) => boolean

示例

gridVirtualizationEnabledSelector(apiRef)
// or
gridVirtualizationEnabledSelector(state, apiRef.current.instanceId)

gridVirtualizationRowEnabledSelector

获取行虚拟化的启用状态

签名

gridVirtualizationRowEnabledSelector: (apiRef: GridApiRef) => boolean
// or
gridVirtualizationRowEnabledSelector: (state: GridState, instanceId?: number) => boolean

示例

gridVirtualizationRowEnabledSelector(apiRef)
// or
gridVirtualizationRowEnabledSelector(state, apiRef.current.instanceId)

gridVirtualizationSelector

获取列状态

签名

gridVirtualizationSelector: (state: GridState) => GridVirtualizationState

示例

const virtualization = gridVirtualizationSelector(apiRef.current.state);

保存和恢复状态

可以使用 apiRef.current.exportState() 导出数据表格的当前状态。然后可以通过将返回的值传递给 initialState 属性或 apiRef.current.restoreState() 方法来恢复它。

注意受控模型及其回调（如果您使用 filterModel，则为 onFilterModelChange），因为数据表格在恢复状态时会调用这些回调。但是，如果未定义回调，或者调用它不更新属性值，则恢复的值将不会应用。

使用 initialState 恢复状态

您可以将 apiRef.current.exportState() 返回的状态传递给 initialState 属性。

在下面的演示中，单击 重新创建第二个表格 将使用第一个表格的当前状态重新挂载第二个数据表格。

从外部存储保存和恢复状态

您可以使用 apiRef.current.exportState() 将状态快照保存到外部存储（例如使用本地存储或 redux）。这样，状态可以在刷新或导航到另一个页面时持久保存。

在以下演示中，状态被保存到 localStorage 并在页面刷新时恢复。这是通过监听 beforeunload 事件完成的。当组件卸载时，将使用 useLayoutEffect 清理函数代替。

使用 apiRef 恢复状态

您可以将 apiRef.current.exportState() 返回的状态传递给 apiRef.current.restoreState 方法。在下面的演示中，单击 保存当前视图 将创建状态中所做更改的快照，考虑到初始状态。您可以在以后通过在 自定义视图 菜单中选择保存的视图，将这些更改应用于数据表格。

恢复部分状态

可以使用 apiRef.current.restoreState() 方法恢复状态的特定属性。例如，仅恢复固定的列

apiRef.current.restoreState({
  pinnedColumns: ['brand'],
});