State Persistence

Assume that you are navigating from one page to another, and you want to be back in the previous page where you were, with the same filtering options you had applied. In such scenarios, you might want to save the previous state of the table.

Therefore, the data table allows users to save the state in scenarios such as filtering, sorting, pagination etc. using state persistence functionality.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-state-persistence-usage',
  templateUrl: './state-persistence-usage.component.html'
})
export class StatePersistenceUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Basic Usage

persistTableState: boolean   Default Value: falseTarget Component: <ng-data-table>

To enable the state persistence, set persistTableState to true and by default persistTableState is false.

  <ng-data-table
    ...
    [persistTableState]="true">
  </ng-data-table>

The updated state of the data table will be stored in the users browser storage. In default the table store data in the session storage.

Useful Properties

There are some additional properties which are dependent on this state persistence control.

Storage Mode

storageMode: string = 'session' or 'local'   Default Value: 'session'Target Component: <ng-data-table>

This property let the user to control the browser storage type that requires to save the data table state. There are two types of storage modes are available.

  • local - Browser Local Storage
  • session - Browser Session Storage

The following example shows storing data in the local storage.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-storage-mode-usage',
  templateUrl: './storage-mode-usage.component.html'
})
export class StorageModeUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

State Saving ID

id: string   Default Value: ''Target Component: <ng-data-table>

This property lets the user to assign a name for the state that the user is saving in the browser storage. Please note that, the provided id value will be added with the prefix of 'grid_state_'. Assume that you provided ID (Identifier) as 'table_details'. Then the state will be saved with the key name of 'grid_state_table_details'.

In the previous example, ID was named as 'sales_products_advanced_02'. So that will be saved in the storage as 'grid_state_sales_products_advanced_02'.

Column Binding
API Doc for State Persistence