Vue 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.

<ag-grid-vue
    :initialState="initialState"
    /* other grid options ... */>
</ag-grid-vue>

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

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.

State Contents

The following is captured in the grid state:

• Aggregation Functions (column state)
• Opened Column Groups
• Column Order (column state)
• Pinned Columns (column state)
• Column Sizes (column state)
• Hidden Columns (column state)
• Column Filter Model
• Advanced Filter Model
• Focused Cell (Client-Side Row Model only)
• Current Page
• Pivot Mode and Columns (column state)
• Cell Selection
• Row Group Columns (column state)
• Expanded Row Groups
• Row Selection
• Side Bar
• Sort (column state)

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.

The state also contains the grid version number. When applying state with older version numbers, any old state properties will be automatically migrated to the current format.