angular/table-state

What problem does it solve?

This Skill prevents missing APIs and broken reactivity in TanStack Table v9 by teaching you how to correctly own, initialize, and read table state in Angular using feature-registered slices and signal-backed atoms.

Core Features & Use Cases

• Feature-registered state slices in v9: explains that a state slice only exists when its feature is registered in _features, eliminating “Property does not exist” TypeScript issues.
• injectTable lazy initializer model: shows how to place stable references outside the initializer while keeping reactive signal reads inside it so the table syncs correctly.
• Three state surfaces (baseAtoms, atoms, store.state): teaches when to read from table.atoms.<slice>.get(), when a snapshot from table.store.state is enough, and how to use computed(...) for derivations and shallow equality.
• Controlled state ownership with Angular signals: provides the recommended state + on[State]Change pattern and clarifies updater-or-value handling to keep ownership consistent.
• External atom alternative: covers how and when to use atoms: { pagination: paginationAtom } for app-wide cross-component coordination.
• Failure-mode guardrails: highlights common v8-to-v9 migration mistakes, missing _features, and incorrect direct atom/state writes that bypass handlers.

Quick Start

Configure your Angular Table v9 by registering the needed features in _features, creating the table via injectTable(() => ({ _features, _rowModels, columns, data: this.data(), initialState, state, on[State]Change })), and then read reactive values from table.atoms.<slice>.get() inside templates or Angular computed/effect blocks.