JavaScript Data GridGrid State

This section covers saving and restoring the grid state, such as the filter model, selected rows, etc.

Saving and Restoring State

The initial state is provided via the grid option initialState. It is only read once when the grid is created.

const gridOptions = {
    initialState: {
        filter: {
            filterModel: { 
                year: {
                    filterType: 'set',
                    values: ['2012'],
                }
            }
        },
        columnVisibility: {
            hiddenColIds: ['athlete'],
        },
        rowGroup: {
            groupColIds: ['athlete'],
        }
    },

    // other grid options ...
}

The current grid state can be retrieved by listening to the state updated event, which is fired with the latest state when it changes, or via api.getState().

The state is also passed in the Grid Pre-Destroyed Event, which can be used to get the state when the grid is destroyed.

gridPreDestroyed
GridPreDestroyedEvent
Invoked immediately before the grid is destroyed. This is useful for cleanup logic that needs to run before the grid is torn down.
stateUpdated
StateUpdatedEvent
Grid state has been updated.

State Contents

The following is captured in the grid state:

When restoring current page using the Server Side Row Model or Infinite Row Model additional configuration is required:

  • For the Server Side Row Model - set the serverSideInitialRowCount property to a value which includes the rows to be shown.
  • For the Infinite Row Model - set the infiniteInitialRowCount property to a value which includes the rows to be shown.

All state properties are optional, so a property can be excluded if you do not want to restore it.

If applying some but not all of the column state properties, then initialState.partialColumnState must be set to true.

Properties available on the GridState interface.

version
string
Grid version number
aggregation
AggregationState
Includes aggregation functions (column state)
columnGroup
ColumnGroupState
Includes opened groups
columnOrder
ColumnOrderState
Includes column ordering (column state)
columnPinning
ColumnPinningState
Includes left/right pinned columns (column state)
columnSizing
ColumnSizingState
Includes column width/flex (column state)
columnVisibility
ColumnVisibilityState
Includes hidden columns (column state)
filter
FilterState
Includes Column Filters and Advanced Filter
focusedCell
FocusedCellState
Includes currently focused cell. Works for Client-Side Row Model only
pagination
PaginationState
Includes current page
pivot
PivotState
Includes current pivot mode and pivot columns (column state)
cellSelection
CellSelectionState
Includes currently selected cell ranges
rowGroup
RowGroupState
Includes current row group columns (column state)
rowGroupExpansion
RowGroupExpansionState
Includes currently expanded group rows
rowSelection
string[] | ServerSideRowSelectionState | ServerSideRowGroupSelectionState
Includes currently selected rows. For Server-Side Row Model, will be ServerSideRowSelectionState | ServerSideRowGroupSelectionState, for other row models, will be an array of row IDs
scroll
ScrollState
Includes current scroll position. Works for Client-Side Row Model only
sideBar
SideBarState
Includes current Side Bar positioning and opened tool panel
sort
SortState
Includes current sort columns and direction (column state)
partialColumnState
boolean
When providing a partial initialState with some but not all column state properties, set this to true. Not required if passing the whole state object retrieved from the grid.