State Persistence

Assume that you are navigating from one page to another. After sometime due to some other reason you might want to come back to the same page which you were initially & want to see some filtered data in the table. But when you come back to that previous page you might see that all the changes that you did has gone. So in these type of scenarios, you might want to save the previous state of the table.

Data table allows users to save the state in the scenarios such as filtering, sorting, etc. you can tryout the mentioned behaviour by doing sorting, filtering, etc. data and coming back to the same page after navigating to other sections.

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

To enable state persistence, simply 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's browser storage. In default the table store data in the session storage.

Useful Properties

There are some additional properties which are depended with this state persistence control.

Storage Mode

storageMode: string = 'session' or 'local'  
Default Value: 'session'

This property let you to control the browser storage type that you want to use 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: ''

The page property lets you to assign a name for the state that you are 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 as "table_details". Then the state will be saved with the key name of "grid_state_table_details".

In the previous section example has id named "sales_products_detail_summery". So that will be saved in the storage as "grid_state_sales_products_detail_summery"

API Doc for State Persistence