Saved-view addon

Restore the last sort a user chose

A procurement comparison table remembers the last sort in sessionStorage, then restores it when the page reloads in the same browser tab.

Full demo and docs Column addon demo

Scenario

Comparison tables should remember intent

The user goal is to compare vendors by the same column after a refresh or return visit, without storing any row data or personal data.

saved-view sessionStorage last sort only

Try it

Save and restore sort state

Sort by Score or Cost.
Reload the page and confirm the same sort returns.
Use Clear saved sort to remove the stored value and clear sorting.
Inspect the saved state text; only key and direction are stored.

Example

Vendor shortlist

Saved sort status will appear after initialization.

Vendor shortlist

Northstar Analytics	94	$4,200	15 Jul 2026
Clearpath Ops	88	$3,100	13 Jul 2026
Beacon Systems	91	$5,200	22 Jul 2026

Accessibility notes

Persistence stays quiet

The restore happens without moving focus.
The restore happens without a sort announcement on page load.
The demo status explains what is stored for sighted users.
The helper stores only the sort key and direction.
Use session storage for tab-scoped state or local storage for longer persistence.

Developer notes

Copy points

Pass an app-specific storageKey.
Use storage: "session" for tab-scoped saved views.
Use storage: "local" only when longer persistence is appropriate.
Document the chosen storage behavior in your app.

Import path

Saved view setup

import { createSortableTable } from "../../dist/index.js";
import { syncSortableTableSavedView } from "../../dist/saved-view.js";

const instance = createSortableTable(table, { allowUnsort: true });

syncSortableTableSavedView(instance, {
  table,
  storageKey: "vendor-shortlist:last-sort",
  storage: "session"
});