angular/compose-with-tanstack-store

Compose TanStack Table v9 with @tanstack/angular-store using external atoms.

28.3k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill angular-compose-with-tanstack-store
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular/compose-with-tanstack-store
Source: https://github.com/TanStack/table/tree/main/packages/angular-table/skills/angular/compose-with-tanstack-store
Command: npx skills add https://github.com/TanStack/table --skill angular-compose-with-tanstack-store

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of keeping TanStack Table v9 state consistent when you need cross-component, cross-route, or cross-app sharing instead of relying only on component-local Angular signals.

Core Features & Use Cases

  • External state ownership via atoms: wire TanStack Store atoms into TanStack Table slices so multiple consumers read/write the same state source of truth.
  • Use the right read surfaces: understand and use table.atoms.<slice>, table.baseAtoms.<slice>, and table.store correctly with Angular signal reactivity.
  • URL sync and multi-table coordination: build patterns like deep-linkable pagination/sorting and shared filters across multiple tables.

Quick Start

Ask an AI coding assistant to show how to create a shared Store atom for pagination and pass it through the atoms option in injectTable, then mirror atom changes to the Angular router query params for URL-synced paging.

Frequently Asked Questions about angular/compose-with-tanstack-store

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share TanStack Table state across multiple components in Angular?

You can share TanStack Table state across Angular components by replacing internal slice state with external TanStack Store atoms, allowing multiple consumers to read and write the same source of truth.

How do I sync TanStack Table pagination and filtering with the URL in Angular?

You can sync TanStack Table pagination and filtering with the URL by wiring shared Store atoms through the atoms option and mirroring atom changes to Angular router query params for deep-linkable state.

What is the difference between table.atoms, table.baseAtoms, and table.store in TanStack Table?

These represent different read surfaces for state: table.atoms serves as the winning state source satisfying atom precedence, while baseAtoms and table.store provide lower-level access integrated with Angular signal reactivity.

Can I use Angular signals to manage TanStack Table v9 state globally?

Yes, you can manage TanStack Table v9 state globally by routing updates and resets through external TanStack Store atoms that integrate with Angular signal-backed reactivity surfaces instead of component-local signals.

What is the best way to coordinate a shared filter state across multiple TanStack Tables?

The best way to coordinate shared filter state across multiple TanStack Tables is by using external TanStack Store atoms as the central state source, ensuring all table instances read and write to the same atoms.

Why does my external TanStack Store state not override TanStack Table internal state?

External state might not override internal state if atom precedence is not satisfied; you must use atoms.<slice> as the winning state source to ensure the external TanStack Store atom correctly takes precedence.