Chapter 33 of 34

Remember the state: sorting, scroll position, open nodes

After a reload everything looks like before – one localStorage key per table.

⏱ 4 min
▶ Video episode 033
git tag ep-033
needs @guiexpert/table@1.1.89

After this chapter you can

switch on autoRestoreOptions
remember expanded tree nodes
choose a storage key

Switch it on

TableOptionsIf.autoRestoreOptions stores the state of a table in localStorage and restores it on the next start. Start from AutoRestoreOptions and switch on what you need:

import { AutoRestoreOptions, TableOptions, type TableOptionsIf } from "@guiexpert/table";
import type { Order } from "./data/orders";

export function createOrderTableOptions(): TableOptionsIf {
  return {
    ...new TableOptions(),
    autoRestoreOptions: {
      ...new AutoRestoreOptions<Order>(),
      getStorageKeyFn: () => "ge-demo-orders",          // one key per table (localStorage)
      autoRestoreSortingState: true,
      autoRestoreScrollPosition: true
    }
  };
}

Screenshot: Sort, scroll, reload — Double-click “Total”, scroll down, then “reload page”. The table comes back sorted and at the same row.

What can be remembered

Option	Remembers
`autoRestoreSortingState`	sorted column and direction (incl. the header icon)
`autoRestoreScrollPosition`	scroll position
`autoRestoreCollapsedExpandedState`	expanded / collapsed nodes of a tree – needs `getRowId`

For trees (chapter 30 (Tree table)) the table needs a stable id per node to recognise it after a reload:

autoRestoreOptions: {
  ...new AutoRestoreOptions<OrderNode>(),
  getStorageKeyFn: () => "ge-demo-order-tree",
  getRowId: node => node.id,                 // "Czechia", "Czechia/Becker KG", "4711"
  autoRestoreCollapsedExpandedState: true,
  autoRestoreScrollPosition: true
}

The last chapter: a checklist for your own table – and when to choose something else. chapter 34 (Checklist & finale).

Remember the state: sorting, scroll position, open nodes

Switch it on

What can be remembered

Next

API used in this chapter