---
product: "AG Grid"
title: "Grid State"
description: "Grid State is a serialisable object capturing a user's changes to the grid, such as sort, filters and column order. Save it to restore a view between sessions, or switch between saved configurations on demand."
framework: angular
version: "36.3.0"
related:
    - title: "Grid Context"
      url: "https://www.ag-grid.com/archive/36.3.0/angular-data-grid/context/"
    - title: "Grid Lifecycle"
      url: "https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-lifecycle/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# Grid State

Grid State is a serialisable object capturing a user's changes to the grid, such as sort, filters and column order. Save it to restore a view between sessions, or switch between saved configurations on demand.

## Saving and Restoring State

The following example shows how the current grid state can be saved and restored.

- Try sorting / re-sizing / hiding a column / apply a filter / scroll the grid / change the current page
- Click **Recreate with State** to destroy the grid and re-create using the saved state. Note how the grid returns to the same state.
- Alternatively click **Save State**, then **Recreate without State** to start from the column definitions, and **Set State** to restore the saved state.

#### Grid State

```ts
import { HttpClient } from "@angular/common/http";
import { Component, signal } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";
import type {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridPreDestroyedEvent,
  GridReadyEvent,
  GridState,
  RowSelectionOptions,
  StateUpdatedEvent,
  Toolbar,
} from "ag-grid-community";
import { ModuleRegistry, enableDevValidations } from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";

import type { IOlympicData } from "./interfaces";
import "./styles.css";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);

@Component({
  standalone: true,
  imports: [AgGridAngular],
  selector: "my-app",
  template: `
    <div class="example-wrapper">
      <div>
        <span class="button-group">
          <button (click)="recreateWithCurrentState()">
            Recreate with State
          </button>
          <button (click)="saveState()">Save State</button>
          <button (click)="recreateWithNoState()">
            Recreate without State
          </button>
          <button (click)="setState()">Set State</button>
          <button (click)="printState()">Print State</button>
        </span>
      </div>
      @if (gridVisible()) {
        <ag-grid-angular
          style="width: 100%; height: 100%;"
          gridId="gridState"
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef"
          [defaultColGroupDef]="defaultColGroupDef"
          [autoGroupColumnDef]="autoGroupColumnDef"
          [sideBar]="true"
          [toolbar]="toolbar"
          [pagination]="true"
          [rowSelection]="rowSelection"
          [cellSelection]="true"
          [calculatedColumns]="true"
          [enableRowPinning]="true"
          [suppressColumnMoveAnimation]="true"
          [ensureDomOrder]="true"
          [rowData]="rowData"
          [initialState]="initialState"
          [gridOptions]="gridOptions"
          (stateUpdated)="onStateUpdated($event)"
          (gridReady)="onGridReady($event)"
        />
      }
    </div>
  `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  public columnDefs: (ColDef | ColGroupDef)[] = [
    { field: "athlete", minWidth: 150 },
    { field: "age" },
    { field: "country", minWidth: 150 },
    {
      headerName: "Competition",
      groupId: "competition",
      children: [
        { field: "year" },
        { field: "date", minWidth: 150 },
        { field: "sport", minWidth: 150 },
      ],
    },
    {
      headerName: "Medals",
      groupId: "medals",
      children: [
        { field: "gold" },
        { field: "silver", columnGroupShow: "open" },
        { field: "bronze", columnGroupShow: "open" },
        { field: "total", columnGroupShow: "closed" },
      ],
    },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    enableValue: true,
    headerNameEditable: true,
  };
  public defaultColGroupDef: Partial<ColGroupDef> = {
    headerNameEditable: true,
  };
  public autoGroupColumnDef: AutoGroupColumnDef = { minWidth: 200 };
  public rowSelection: RowSelectionOptions = {
    mode: "multiRow",
  };
  public toolbar: Toolbar = {
    items: ["agQuickFilterToolbarItem", "agFindToolbarItem"],
  };
  public rowData?: IOlympicData[];
  public gridVisible = signal(true);
  public initialState?: GridState;
  public gridOptions: GridOptions = {
    onGridPreDestroyed: (params: GridPreDestroyedEvent<IOlympicData>) => {
      console.log("Grid state on destroy (can be persisted)", params.state);
    },
  };

  constructor(private http: HttpClient) {}

  private savedState?: GridState;

  recreateWithCurrentState(): void {
    this.recreateGrid(this.gridApi.getState());
  }

  recreateWithNoState(): void {
    this.recreateGrid();
  }

  saveState(): void {
    this.savedState = this.gridApi.getState();
    console.log("Saved state", this.savedState);
  }

  setState(): void {
    if (this.savedState) {
      this.gridApi.setState(this.savedState);
      console.log("Set state", this.savedState);
    }
  }

  private recreateGrid(initialState?: GridState): void {
    this.gridVisible.set(false);
    this.initialState = initialState;
    this.rowData = undefined;
    setTimeout(() => {
      this.gridVisible.set(true);
    });
  }

  printState(): void {
    console.log("Grid state", this.gridApi.getState());
  }

  onStateUpdated(params: StateUpdatedEvent<IOlympicData>): void {
    console.log("State updated", params.state);
  }

  onGridReady(params: GridReadyEvent<IOlympicData>): void {
    this.gridApi = params.api;
    this.http
      .get<IOlympicData[]>(
        "https://www.ag-grid.com/example-assets/olympic-winners.json",
      )
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Grid State](https://www.ag-grid.com/archive/36.3.0/examples/grid-state/grid-state/angular/)

### Saving State

The current grid state can be retrieved from the `stateUpdated` event, which fires whenever the state changes. The state is also available on the [Grid Pre-Destroyed Event](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-lifecycle/#grid-pre-destroyed), which can be used to get the state when the grid is destroyed.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `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. |

The state can also be retrieved on demand via the `gridApi.getState()` method.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getState` | `Function` |  |  | Get the current state of the grid. Can be used in conjunction with the `initialState` grid option or `api.setState()` to save and restore grid state. [Module](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/modules/): `GridStateModule`. |

> **Note**
>
> It is the application's responsibility to persist the grid state to a suitable location.

### Sparse State Object

The state object only records what differs from the grid's defaults. Taking sort as an example, `sortModel` lists only the sorted columns, and if no column is sorted the `sort` property is omitted entirely.

```js
// State of grid sorted by gold.
{
    version: '36.3.0-beta.20261103.1437',
    sort: { sortModel: [{ colId: 'gold', sort: 'desc' }] },
    columnOrder: { orderedColIds: ['athlete', 'gold', 'silver', 'country'] },
}

// State after the user cleared the sort. The sort property is absent, not empty.
{
    version: '36.3.0-beta.20261103.1437',
    columnOrder: { orderedColIds: ['athlete', 'gold', 'silver', 'country'] },
}
```

Because of this, an absent property means "none" rather than "unspecified". Restoring the second state must leave the grid unsorted. This matters when restoring a state that supplies only some of the column state properties, as covered in [Column State and Column Definitions](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#column-state-and-column-definitions).

### Restore via Initial State

To restore a saved state to a new grid, pass the saved [GridState](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#gridstate) to the grid option `initialState`. It is read once on creation, applying filters and groups before any data renders, so there is no flash of unfiltered or ungrouped data.

If cell data types are inferred and the row data is empty or not yet set, the filter state is applied once row data is added. To apply it straight away, set `cellDataType: false` on the default column definition, or provide a cell data type for every column.

```ts
<ag-grid-angular
    [initialState]="initialState"
    /* other grid options ... */ />

// A state previously saved by the application
this.initialState = savedState;
```

To exclude a property from being restored, for example the `scroll` position, remove it from the `initialState` object. The grid then uses its default for that property.

```js
// Restore everything except the scroll position and the row selection.
const { scroll, rowSelection, ...stateToRestore } = savedState;

const gridOptions = {
    initialState: stateToRestore,
};
```

Column state properties are the exception. When `initialState` contains any of them, an omitted one is reset, overriding the matching value in the column definitions. See [Column State and Column Definitions](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#column-state-and-column-definitions).

### Restore via API

To restore state on an existing grid use the `api.setState(state)` method. This enables, for example, a user to save multiple configurations of the same grid and switch between them on demand.

```js
// Restore a saved state onto an existing grid
api.setState(savedState);
```

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `setState` | `Function` |  |  | Set the current state of the grid. Can be used in conjunction with `api.getState()` or `onStateUpdated` to save and restore grid state. The provided state replaces the grid state rather than patching it: every section it omits is reset unless listed in `propertiesToIgnore`. [Module](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/modules/): `GridStateModule`. |

> **Note**
>
> `setState` should only be used to restore grid state. The grid does not support being used as a controlled component, so do not call this on every state update.

To exclude properties from being restored, pass their names as the second argument, `propertiesToIgnore`. Those properties are left as they are on the grid.

```js
// Restore a saved state but keep the current filter state of the grid.
api.setState(savedState, ['filter']);
```

Every property the provided state omits is reset because of the [sparse nature](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#sparse-state-object) of the state object. So a hand-built state containing only `columnOrder` will clear the sort, filters, row groups, pinning and every other property.

The example below switches between full states captured with `api.getState()`.

- **Default View** applies the state captured when the grid first rendered, before any view was applied.
- **Medals by Country** and **Swimming Leaders** apply states saved after a user configured the grid.
- **Column Order Only** applies a hand-built state containing just `columnOrder`, showing that omitted properties are reset.
- Toggle **Ignore Filter** to conditionally pass `['filter']` as `propertiesToIgnore` to enable maintaining the current filter state while switching views.

#### Switching Between Saved States

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateKey,
  ModuleRegistry,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { savedStates } from "./savedStates";
import "./styles.css";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div>
      <span class="button-group">
        <button (click)="applyDefaultView()">Default View</button>
        <button (click)="applyView('medalsByCountry')">
          Medals by Country
        </button>
        <button (click)="applyView('swimmingLeaders')">Swimming Leaders</button>
        <button (click)="setColumnOrderOnly()">Column Order Only</button>
        <button (click)="filterCountry()">Filter: United States</button>
        <label>
          <input id="ignoreFilter" type="checkbox" />
          Ignore Filter
        </label>
      </span>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [gridId]="gridId"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [rowGroupPanelShow]="rowGroupPanelShow"
      [sideBar]="sideBar"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  gridId = "savedViews";
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "country", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "year" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    filter: true,
    floatingFilter: true,
    enableRowGroup: true,
    enableValue: true,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    minWidth: 200,
  };
  rowGroupPanelShow: "always" | "onlyWhenGrouping" | "never" = "always";
  sideBar: SideBarDef | string | string[] | boolean | null = "columns";
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onFirstDataRendered(event: FirstDataRenderedEvent<IOlympicData>) {
    // Capture the state before any view is applied, so the default view can be restored.
    defaultState = event.api.getState();
  }

  applyDefaultView() {
    if (defaultState) {
      this.gridApi.setState(defaultState, getPropertiesToIgnore());
    }
  }

  filterCountry() {
    this.gridApi.setFilterModel({
      country: { filterType: "set", values: ["United States"] },
    });
  }

  applyView(viewName: string) {
    const state = savedStates[viewName];
    this.gridApi.setState(state, getPropertiesToIgnore());
    console.log(`Applied view "${viewName}"`, state);
  }

  setColumnOrderOnly() {
    // A sparse state: every property it omits is reset unless it is ignored.
    this.gridApi.setState(
      {
        columnOrder: {
          orderedColIds: [
            "total",
            "gold",
            "silver",
            "bronze",
            "athlete",
            "country",
            "sport",
            "year",
          ],
        },
      },
      getPropertiesToIgnore(),
    );
  }

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;

    this.http
      .get<IOlympicData[]>(
        "https://www.ag-grid.com/example-assets/olympic-winners.json",
      )
      .subscribe((data) => (this.rowData = data));
  }
}

let defaultState: GridState | undefined;
// `propertiesToIgnore` lists the properties to leave untouched when the state is applied.
function getPropertiesToIgnore(): GridStateKey[] | undefined {
  const ignoreFilter =
    document.querySelector<HTMLInputElement>("#ignoreFilter")!.checked;
  return ignoreFilter ? ["filter"] : undefined;
}
```

[Live example: Switching Between Saved States](https://www.ag-grid.com/archive/36.3.0/examples/grid-state/saved-views/angular/)

## Column State and Column Definitions

Column state properties such as `sort`, `hide`, `pinned` and `aggFunc` have two possible sources: the grid state and the column definitions. When `initialState` includes some but not all of the [column state properties](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#gridstate-column-properties), the grid must decide what to do with the missing ones.

By default the missing properties are reset, overriding the column definition values. This follows from the [sparse nature](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#sparse-state-object) of the state object: a saved state with no `sort` property came from an unsorted grid, and restoring it must produce an unsorted grid even if a column definition sets a sort.

In the snippet below only `columnOrder` is provided, so the `sort: 'asc'` on Country is overridden and the grid is created unsorted.

```js
columnDefs: [
    { field: 'athlete' },
    { field: 'country', sort: 'asc' },
],

initialState: {
    // Only the column order is provided, so every other column state property is reset.
    columnOrder: {
        orderedColIds: ['country', 'athlete'],
    },
}
```

To fall back to the column definition values instead, set `partialColumnState: true`. Missing column state properties then keep whatever the column definitions specify. This is the right choice for a state built by hand. For a state saved from the grid, a missing property means the user had none, and the flag would wrongly reapply the column definition values.

In the example below the column definitions pin Country, hide Year and sum Gold and Silver into a grand total row. Each button recreates the grid with a different `initialState`.

- **No State** shows the grid as defined by the column definitions.
- **Column Order (overrides defaults)** supplies only `columnOrder`. Country is unpinned, Year appears and the totals are blank.
- **Column Order + partialColumnState (keeps defaults)** supplies the same `columnOrder` with `partialColumnState: true`. The order is applied and the column definition defaults remain.

#### Partial Column State

```ts
import { HttpClient } from "@angular/common/http";
import { Component, signal } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";
import type {
  ColDef,
  GridApi,
  GridReadyEvent,
  GridState,
} from "ag-grid-community";
import { ModuleRegistry, enableDevValidations } from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";

import type { IOlympicData } from "./interfaces";
import "./styles.css";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);

// Only the column order is supplied; every other column state section is omitted.
const columnOrderState: GridState = {
  columnOrder: {
    orderedColIds: ["gold", "silver", "athlete", "sport", "country", "year"],
  },
};

@Component({
  standalone: true,
  imports: [AgGridAngular],
  selector: "my-app",
  template: `
    <div class="example-wrapper">
      <div>
        <span class="button-group">
          <button (click)="recreateWithNoState()">No State</button>
          <button (click)="recreateWithColumnOrder()">
            Column Order (overrides defaults)
          </button>
          <button (click)="recreateWithPartialColumnOrder()">
            Column Order + partialColumnState (keeps defaults)
          </button>
        </span>
      </div>
      @if (gridVisible()) {
        <ag-grid-angular
          style="width: 100%; height: 100%;"
          gridId="partialColumnState"
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef"
          [grandTotalRow]="'bottom'"
          [rowData]="rowData"
          [initialState]="initialState"
          (gridReady)="onGridReady($event)"
        />
      }
    </div>
  `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  public columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country", pinned: "left" },
    { field: "year", hide: true },
    { field: "sport" },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  public rowData?: IOlympicData[];
  public gridVisible = signal(true);
  public initialState?: GridState;

  constructor(private http: HttpClient) {}

  recreateGrid(state?: GridState): void {
    this.gridVisible.set(false);
    console.log("Recreating grid with initialState", state);
    this.initialState = state;
    this.rowData = undefined;
    setTimeout(() => {
      this.gridVisible.set(true);
    });
  }

  recreateWithNoState(): void {
    this.recreateGrid();
  }

  recreateWithColumnOrder(): void {
    this.recreateGrid(columnOrderState);
  }

  recreateWithPartialColumnOrder(): void {
    this.recreateGrid({ ...columnOrderState, partialColumnState: true });
  }

  onGridReady(params: GridReadyEvent<IOlympicData>): void {
    this.gridApi = params.api;
    this.http
      .get<IOlympicData[]>(
        "https://www.ag-grid.com/example-assets/olympic-winners.json",
      )
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Partial Column State](https://www.ag-grid.com/archive/36.3.0/examples/grid-state/partial-column-state/angular/)

## Compatibility

### Column and Group Ids

Columns are identified in the state by their [Column ID](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-updating-definitions/#matching-columns), and [Column Groups](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-groups/) by their `groupId`. A column that provides neither `colId` nor `field` is given a positional ID. If the column definitions are reordered between saving and restoring, column state could be restored to the wrong column.

> **Note**
>
> For best results ensure columns and groups have unique `field` or explicit `colId` and groups have an explicit `groupId`.

### Grid State API vs Column State API

Grid state and [Column State](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-state/) overlap: the [column state properties](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grid-state/#gridstate-column-properties) of grid state carry the same information as Column State, in a different shape. Which one to use depends on the task:

- **Grid state** saves and restores the grid as a whole, columns included. It is typically round-tripped through storage between sessions, and restoring it updates all columns together.
- **Column State** targets one aspect of the columns directly, in place, without touching anything else. Use `api.applyColumnState()` for a one-off change such as reordering or resizing a subset of columns while leaving sort, filters and the rest of the grid untouched. See [Applying Partial State](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-state/#applying-partial-state) for more examples.

If code was already using Column State alongside other custom APIs to manage grid-level state by hand, `convertColumnState` and `convertColumnGroupState` convert that Column State into the equivalent grid state sections:

```js
import { convertColumnState, convertColumnGroupState } from 'ag-grid-community';

const state = {
    ...convertColumnState(columnState),
    ...convertColumnGroupState(columnGroupState),
};
```

### Versioned State

The grid state includes the version it was generated from. This enables grid states generated on older versions of the grid to be consumed by newer versions of the grid. If there is a change in format the grid will automatically apply the conversion to the old state.

### Serializable State

The grid state is designed to be serialisable, so any functions will be stripped out. This has implications for features such as Aggregation. If a custom aggregation function has been provided it must be [Registered as Custom Functions](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/aggregation-custom-functions/#registering-custom-functions) via a string, as opposed to directly registering the function with the column. This enables the grid state to safely store the `aggFunc` string value against the column. A column using an inline aggregation function is left out of the `aggregation` property, so a state saved from such a grid does not restore that aggregation.

## API Reference

### GridState

Properties available on the `GridState` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `version` | `string` |  |  | Grid version number |
| `columnGroup` | `ColumnGroupState` |  |  | Opened Column Groups, and column group header names edited by end users See [Column Groups](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-groups/) for more information. |
| `filter` | `FilterState` |  |  | Column Filters and Advanced Filter See [Filtering Overview](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/filtering-overview/) for more information. |
| `find` | `FindState` |  |  | Find search value and active match. Works for Client-Side Row Model only, and only when the Quick Access Toolbar is configured with `agFindToolbarItem`; otherwise the `findSearchValue` grid option is the only source See [Find](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/find/) for more information. |
| `quickFilter` | `QuickFilterState` |  |  | Quick Filter search text. Only captured and restored when the Quick Access Toolbar is configured with `agQuickFilterToolbarItem`; otherwise the `quickFilterText` grid option is the only source See [Quick Filter](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/filter-quick/) for more information. |
| `focusedCell` | `FocusedCellState` |  |  | Currently focused cell. Works for Client-Side Row Model only See [Keyboard Navigation](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/keyboard-navigation/) for more information. |
| `pagination` | `PaginationState` |  |  | Current page and page size. With the Server Side Row Model or Infinite Row Model, restoring a page beyond the rows the grid already knows about needs `serverSideInitialRowCount` or `infiniteInitialRowCount` respectively set high enough to cover it, otherwise the grid restores the last page it knows about instead. See [Row Pagination](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/row-pagination/) for more information. |
| `rowPinning` | `RowPinningState` |  |  | Currently manually pinned rows See [Row Pinning](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/row-pinning/) for more information. |
| `cellSelection` | `CellSelectionState` |  |  | Currently selected cell ranges See [Cell Selection](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/cell-selection/) for more information. |
| `rowGroupExpansion` | `RowGroupExpansionState` |  |  | Currently expanded group rows See [Opening Groups](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grouping-opening-groups/) for more information. |
| `ssrmRowGroupExpansion` | `RowGroupExpansionState \| RowGroupBulkExpansionState` |  |  | Currently expanded Server-Side Row Model group rows when using `ssrmExpandAllAffectsAllRows` See [SSRM Row Grouping](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/server-side-model-grouping/) for more information. |
| `rowSelection` | `string[] \| ServerSideRowSelectionState \| ServerSideRowGroupSelectionState` |  |  | Currently selected rows. For Server-Side Row Model, will be `ServerSideRowSelectionState \| ServerSideRowGroupSelectionState`, for other row models, will be an array of row IDs. Can only be set for Client-Side Row Model and Server-Side Row Model. See [Row Selection](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/row-selection/) for more information. |
| `scroll` | `ScrollState` |  |  | Current scroll position. Works for Client-Side Row Model only |
| `sideBar` | `SideBarState` |  |  | Current Side Bar positioning and opened tool panel, including the state of each tool panel See [Side Bar](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/side-bar/) for more information. |
| `userColumns` | `UserColumnState[]` |  |  | Columns the user created or removed at runtime, such as Calculated Columns, along with the column definition properties they changed. Unlike the other sections, which configure existing columns, this section can create and remove them. See [Calculated Columns](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/calculated-columns/) for more information. |

### GridState (column properties)

The following properties hold column state and are affected by `partialColumnState`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `aggregation` | `AggregationState` |  |  | Aggregation Functions (column state) See [Aggregation](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/aggregation/) for more information. |
| `columnOrder` | `ColumnOrderState` |  |  | Column Order (column state) See [Column Moving](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-moving/) for more information. |
| `columnPinning` | `ColumnPinningState` |  |  | Left/right Pinned Columns (column state) See [Column Pinning](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-pinning/) for more information. |
| `columnSizing` | `ColumnSizingState` |  |  | Column Sizes - width/flex (column state) See [Column Sizing](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-sizing/) for more information. |
| `columnVisibility` | `ColumnVisibilityState` |  |  | Hidden Columns (column state) See [Column Visibility](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-properties/#reference-display-hide) for more information. |
| `columnHeaderName` | `ColumnHeaderNameState` |  |  | Column Header Names edited by end users (column state) See [Editable Header Name](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/column-headers/#editable-header-name) for more information. |
| `pivot` | `PivotState` |  |  | Current pivot mode and pivot columns, and pivot column label sort (column state) See [Pivoting](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/pivoting/) for more information. |
| `rowGroup` | `RowGroupState` |  |  | Current Row Group Columns (column state) See [Row Grouping](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/grouping/) for more information. |
| `sort` | `SortState` |  |  | Current sort columns and direction, ordered by `sortIndex` (column state) See [Row Sorting](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/row-sorting/) for more information. |
| `showValuesAs` | `ShowValuesAsState` |  |  | The per-column "Show Values As" mode (column state) See [Show Values As](https://www.ag-grid.com/archive/36.3.0/angular-data-grid/aggregation-show-values-as/) for more information. |
| `partialColumnState` | `boolean` |  |  | Set to `true` when `initialState` supplies some but not all of the column state sections. Without it, the omitted sections are reset, overriding column definition values such as `hide`, `pinned` or `aggFunc`. Not required when passing the whole state object retrieved from the grid. Ignored by `api.setState`; use the second argument `propertiesToIgnore` to leave sections untouched. |