Interface TableStateIf

The state of a table as plain JSON: column layout, sorting, scroll position, tree, checked and selected rows, header groups and data of your own. Get it with TableApi.getState, apply it with TableApi.applyState or pass it at the start as TableOptionsIf.initialState – e.g. to store it on your server per user. TableOptionsIf.autoRestoreOptions stores it in localStorage for you.

Every part is optional: a missing part is not applied (the table keeps its current state of that part). Columns are identified by their property, rows by their id (AutoRestoreOptionsIf.getRowId) – never by an index, so the state survives moved columns and rows that arrive in another order. Unknown columns and rows are ignored. The state holds no cell values – but row ids can be personal data (e.g. an e-mail address as id).

Example

const state: TableStateIf = tableApi.getState();
localStorage.setItem("orders-layout", JSON.stringify(state));
// later, e.g. in another table:
tableApi.applyState(JSON.parse(localStorage.getItem("orders-layout")!) as TableStateIf);
Copy

Example

// hand-written: "total" first and 240 px wide, "city" hidden, sorted by total descending
const state: TableStateIf = {
  version: 1,
  columns: [{ property: "total", width: 240 }, { property: "id" }, { property: "city", visible: false }],
  sort: [{ property: "total", sortState: "desc" }]
};
Copy

See

Training: Remember the state

Since

1.1.92