Data Grid - State

Initialize and read the state of the Data Grid.

Access the state

The state is exposed on the apiRef object.

Data Grid packages expose a set of state selectors that take the apiRef as an argument and return a value. You can use them to get data from the state without worrying about its internal structure.

Direct selector access

The way to use a selector is to call it as a function with apiRef as its first argument:

const paginationModel = gridPaginationModelSelector(apiRef);

If you only need to access the state value in the render of your components, use the useGridSelector() hook. This hook ensures there is a reactive binding such that when the state changes, the component in which this hook is used is re-rendered.

const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);

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

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

Press Enter to start editing

Catalog of selectors

Some selectors have not yet been documented.

Aggregation

Signature:

gridAggregationLookupSelector: (apiRef: GridApiRef) => GridAggregationLookup

Example

const aggregationLookup = gridAggregationLookupSelector(apiRef);

Signature:

gridAggregationModelSelector: (apiRef: GridApiRef) => GridAggregationModel

Example

const aggregationModel = gridAggregationModelSelector(apiRef);

Columns

Signature:

gridColumnDefinitionsSelector: (apiRef: GridApiRef) => GridStateColDef[]

Example

const columnDefinitions = gridColumnDefinitionsSelector(apiRef);

Signature:

gridColumnFieldsSelector: (apiRef: GridApiRef) => string[]

Example

const columnFields = gridColumnFieldsSelector(apiRef);

Signature:

gridColumnLookupSelector: (apiRef: GridApiRef) => GridColumnLookup

Example

const columnLookup = gridColumnLookupSelector(apiRef);

Signature:

gridColumnsStateSelector: (apiRef: GridApiRef) => GridColumnsState

Example

const columnsState = gridColumnsStateSelector(apiRef);

Signature:

gridFilterableColumnDefinitionsSelector: (apiRef: GridApiRef) => GridStateColDef[]

Example

const filterableColumnDefinitions = gridFilterableColumnDefinitionsSelector(apiRef);

Signature:

gridFilterableColumnLookupSelector: (apiRef: GridApiRef) => GridColumnLookup

Example

const filterableColumnLookup = gridFilterableColumnLookupSelector(apiRef);

Visible Columns

Signature:

gridColumnPositionsSelector: (apiRef: GridApiRef) => number[]

Example

const columnPositions = gridColumnPositionsSelector(apiRef);

Signature:

gridColumnVisibilityModelSelector: (apiRef: GridApiRef) => GridColumnVisibilityModel

Example

const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);

Signature:

gridColumnsTotalWidthSelector: (apiRef: GridApiRef) => number

Example

const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);

Signature:

gridPinnedColumnsSelector: (apiRef: GridApiRef) => GridPinnedColumnFields

Example

const pinnedColumns = gridPinnedColumnsSelector(apiRef);

Signature:

gridVisibleColumnDefinitionsSelector: (apiRef: GridApiRef) => GridStateColDef[]

Example

const visibleColumnDefinitions = gridVisibleColumnDefinitionsSelector(apiRef);

Signature:

gridVisibleColumnFieldsSelector: (apiRef: GridApiRef) => string[]

Example

const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);

Signature:

gridVisiblePinnedColumnDefinitionsSelector: (apiRef: GridApiRef) => { left: GridStateColDef[]; right: GridStateColDef[] }

Example

const visiblePinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);

Filtering

Signature:

gridExpandedRowCountSelector: (apiRef: GridApiRef) => number

Example

const expandedRowCount = gridExpandedRowCountSelector(apiRef);

Signature:

gridExpandedSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]

Example

const expandedSortedRowEntries = gridExpandedSortedRowEntriesSelector(apiRef);

Signature:

gridExpandedSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]

Example

const expandedSortedRowIds = gridExpandedSortedRowIdsSelector(apiRef);

Signature:

gridFilterModelSelector: (apiRef: GridApiRef) => GridFilterModel

Example

const filterModel = gridFilterModelSelector(apiRef);

Signature:

gridFilteredDescendantRowCountSelector: (apiRef: GridApiRef) => number

Example

const filteredDescendantRowCount = gridFilteredDescendantRowCountSelector(apiRef);

Signature:

gridFilteredRowCountSelector: (apiRef: GridApiRef) => number

Example

const filteredRowCount = gridFilteredRowCountSelector(apiRef);

Signature:

gridFilteredSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]

Example

const filteredSortedRowEntries = gridFilteredSortedRowEntriesSelector(apiRef);

Signature:

gridFilteredSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]

Example

const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);

Signature:

gridFilteredSortedTopLevelRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]

Example

const filteredSortedTopLevelRowEntries = gridFilteredSortedTopLevelRowEntriesSelector(apiRef);

Signature:

gridFilteredTopLevelRowCountSelector: (apiRef: GridApiRef) => number

Example

const filteredTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);

Signature:

gridQuickFilterValuesSelector: (apiRef: GridApiRef) => any[] | undefined

Example

const quickFilterValues = gridQuickFilterValuesSelector(apiRef);

Pagination

Signature:

gridPageCountSelector: (apiRef: GridApiRef) => number

Example

const pageCount = gridPageCountSelector(apiRef);

Signature:

gridPageSelector: (apiRef: GridApiRef) => number

Example

const page = gridPageSelector(apiRef);

Signature:

gridPageSizeSelector: (apiRef: GridApiRef) => number

Example

const pageSize = gridPageSizeSelector(apiRef);

Signature:

gridPaginatedVisibleSortedGridRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]

Example

const paginatedVisibleSortedGridRowEntries = gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef);

Signature:

gridPaginatedVisibleSortedGridRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]

Example

const paginatedVisibleSortedGridRowIds = gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);

Signature:

gridPaginationMetaSelector: (apiRef: GridApiRef) => GridPaginationMeta

Example

const paginationMeta = gridPaginationMetaSelector(apiRef);

Signature:

gridPaginationModelSelector: (apiRef: GridApiRef) => GridPaginationModel

Example

const paginationModel = gridPaginationModelSelector(apiRef);

Signature:

gridPaginationRowCountSelector: (apiRef: GridApiRef) => number

Example

const paginationRowCount = gridPaginationRowCountSelector(apiRef);

Signature:

gridPaginationRowRangeSelector: (apiRef: GridApiRef) => { firstRowIndex: number; lastRowIndex: number } | null

Example

const paginationRowRange = gridPaginationRowRangeSelector(apiRef);

Signature:

gridVisibleRowsSelector: (apiRef: GridApiRef) => { rows: GridRowEntry<GridValidRowModel>[]; range: { firstRowIndex: number; lastRowIndex: number } | null; rowIdToIndexMap: Map<GridRowId, number> }

Example

const visibleRows = gridVisibleRowsSelector(apiRef);

Sorting

Signature:

gridSortModelSelector: (apiRef: GridApiRef) => GridSortModel

Example

const sortModel = gridSortModelSelector(apiRef);

Signature:

gridSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]

Example

const sortedRowEntries = gridSortedRowEntriesSelector(apiRef);

Signature:

gridSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]

Example

const sortedRowIds = gridSortedRowIdsSelector(apiRef);

Virtualization

Signature:

gridVirtualizationColumnEnabledSelector: (apiRef: GridApiRef) => boolean

Example

const virtualizationColumnEnabled = gridVirtualizationColumnEnabledSelector(apiRef);

Signature:

gridVirtualizationEnabledSelector: (apiRef: GridApiRef) => boolean

Example

const virtualizationEnabled = gridVirtualizationEnabledSelector(apiRef);

Signature:

gridVirtualizationRowEnabledSelector: (apiRef: GridApiRef) => boolean

Example

const virtualizationRowEnabled = gridVirtualizationRowEnabledSelector(apiRef);

Signature:

gridVirtualizationSelector: (apiRef: GridApiRef) => GridVirtualizationState

Example

const virtualization = gridVirtualizationSelector(apiRef);

Save and restore the state

The current state of the Data Grid can be exported using apiRef.current.exportState(). It can then be restored by either passing the returned value to the initialState prop or to the apiRef.current.restoreState() method.

Watch out for controlled models and their callbacks (onFilterModelChange if you use filterModel, for instance), as the Data Grid calls those callbacks when restoring the state. But if the callback is not defined or if calling it does not update the prop value, then the restored value will not be applied.

Restore the state with initialState

You can pass the state returned by apiRef.current.exportState() to the initialState prop.

In the demo below, clicking on Recreate the 2nd grid will re-mount the second Data Grid with the current state of the first Grid.

Save and restore the state from external storage

You can use apiRef.current.exportState() to save a snapshot of the state to an external storage (for example using local storage or redux). This way the state can be persisted on refresh or navigating to another page.

In the following demo, the state is saved to localStorage and restored when the page is refreshed. This is done by listening on the beforeunload event. When the component is unmounted, the useLayoutEffect cleanup function is being used instead.

Restore the state with apiRef

You can pass the state returned by apiRef.current.exportState() to the apiRef.current.restoreState method. In the demo below, clicking on Save current view will create a snapshot of the changes made in the state, considering the initial state. You can apply these changes on the Data Grid later selecting a saved view in the Custom view menu.

Restore part of the state

It is possible to restore specific properties of the state using the apiRef.current.restoreState() method. For instance, to only restore the pinned columns:

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

Data Grid - State

Initialize the state

Access the state

Direct selector access

With useGridSelector

Catalog of selectors

Aggregation

gridAggregationLookupSelectorGet the aggregation results as a lookup.

gridAggregationLookupSelector

Signature:

Example

gridAggregationModelSelectorGet the aggregation model, containing the aggregation function of each column. If a column is not in the model, it is not aggregated.

gridAggregationModelSelector

Signature:

Example

Columns

gridColumnDefinitionsSelectorGet an array of column definitions in the order rendered on screen..

gridColumnDefinitionsSelector

Signature:

Example

gridColumnFieldsSelectorGet an array of column fields in the order rendered on screen.

gridColumnFieldsSelector

Signature:

Example

gridColumnLookupSelectorGet the columns as a lookup (an object containing the field for keys and the definition for values).

gridColumnLookupSelector

Signature:

Example

gridColumnsStateSelectorGet the columns state

gridColumnsStateSelector

Signature:

Example

gridFilterableColumnDefinitionsSelectorGet the filterable columns as an array.

gridFilterableColumnDefinitionsSelector

Signature:

Example

gridFilterableColumnLookupSelectorGet the filterable columns as a lookup (an object containing the field for keys and the definition for values).

gridFilterableColumnLookupSelector

Signature:

Example

Visible Columns

gridColumnPositionsSelectorGet the left position in pixel of each visible columns relative to the left of the first column.

gridColumnPositionsSelector

Signature:

Example

gridColumnVisibilityModelSelectorGet the column visibility model, containing the visibility status of each column. If a column is not registered in the model, it is visible.

gridColumnVisibilityModelSelector

Signature:

Example

gridColumnsTotalWidthSelectorGet the summed width of all the visible columns.

gridColumnsTotalWidthSelector

Signature:

Example

gridPinnedColumnsSelectorGet the visible pinned columns model.

gridPinnedColumnsSelector

Signature:

Example

gridVisibleColumnDefinitionsSelectorGet the visible columns as a lookup (an object containing the field for keys and the definition for values).

gridVisibleColumnDefinitionsSelector

Signature:

Example

gridVisibleColumnFieldsSelectorGet the field of each visible column.

gridVisibleColumnFieldsSelector

Signature:

Example

gridVisiblePinnedColumnDefinitionsSelectorGet the visible pinned columns.

gridVisiblePinnedColumnDefinitionsSelector

Signature:

Example

Filtering

gridExpandedRowCountSelectorGet the amount of rows accessible after the filtering process.

gridExpandedRowCountSelector

Signature:

Example

gridExpandedSortedRowEntriesSelectorGet the id and the model of the rows accessible after the filtering process. Does not contain the collapsed children.

gridExpandedSortedRowEntriesSelector

Signature:

Example

gridExpandedSortedRowIdsSelectorGet the id of the rows accessible after the filtering process. Does not contain the collapsed children.

gridExpandedSortedRowIdsSelector