@tanstack/angular-table 9.0.0-beta.38 → 9.0.0-beta.42

package/README.md

@@ -40,6 +40,7 @@
 > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
 > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
 > - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
+> - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
 
 A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
 

package/dist/README.md

@@ -40,6 +40,7 @@
 > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
 > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
 > - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
+> - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
 
 A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-table",
-  "version": "9.0.0-beta.38",
+  "version": "9.0.0-beta.42",
   "description": "Headless UI for building powerful tables & datagrids for Angular.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@tanstack/angular-store": "^0.11.0",
     "tslib": "^2.8.1",
-    "@tanstack/table-core": "9.0.0-beta.38"
+    "@tanstack/table-core": "9.0.0-beta.42"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.6.1",

package/skills/create-table-hook/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: create-table-hook
+description: >
+  Create an Angular injectAppTable/createAppColumnHelper abstraction with shared features/defaults, registered components, injectTableContext/injectTableCellContext/injectTableHeaderContext, and correct FlexRender component-versus-function handling.
+metadata:
+  type: framework
+  library: '@tanstack/angular-table'
+  framework: angular
+  library_version: '9.0.0-beta.42'
+requires:
+  - '@tanstack/table-core#core'
+  - getting-started
+  - table-state
+sources:
+  - 'TanStack/table:docs/framework/angular/guide/composable-tables.md'
+  - 'TanStack/table:examples/angular/composable-tables'
+  - 'TanStack/table:packages/angular-table/src/helpers/createTableHook.ts'
+---
+
+This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it for repeated app conventions; keep one-off tables on `injectTable`.
+
+## Setup
+
+```ts
+import {
+  createTableHook,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/angular-table'
+
+export const {
+  injectAppTable,
+  createAppColumnHelper,
+  injectTableContext,
+  injectTableCellContext,
+  injectTableHeaderContext,
+} = createTableHook({
+  features: tableFeatures({ rowSortingFeature }),
+})
+```
+
+```ts
+const helper = createAppColumnHelper<Person>()
+const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
+
+export class PeopleTable {
+  readonly table = injectAppTable(() => ({ columns, data: this.data() }))
+}
+```
+
+## Core Patterns
+
+### Consume typed DI context in registered components
+
+```ts
+export class NameCell {
+  readonly cell = injectTableCellContext<string, Person>()
+  readonly value = computed(() => this.cell().getValue())
+}
+```
+
+Use the matching table/header/cell injector instead of threading context props through reusable components.
+
+### Distinguish component types from render functions
+
+Register either an Angular component type or a render function. Return component types directly when FlexRender should set context inputs; use `flexRenderComponent(Component, options)` only for explicit inputs/outputs/injector/bindings/directives.
+
+## Common Mistakes
+
+### CRITICAL Calling app helpers outside DI
+
+Wrong:
+
+```ts
+export function make() {
+  return injectAppTable(() => options)
+}
+```
+
+Correct:
+
+```ts
+export class PeopleTable {
+  readonly table = injectAppTable(() => options())
+}
+```
+
+Both app-table construction and returned context injectors require Angular injection context.
+
+Source: `packages/angular-table/src/helpers/createTableHook.ts`
+
+### HIGH Prop drilling registered context
+
+Wrong:
+
+```ts
+cell: (ctx) => flexRenderComponent(NameCell, { inputs: { cell: ctx.cell } })
+```
+
+Correct:
+
+```ts
+cell: (ctx) => ctx.cell.NameCell
+```
+
+Registered components can consume the app hook’s typed cell context directly.
+
+Source: `docs/framework/angular/guide/composable-tables.md`
+
+### HIGH Wrapping a function as a component
+
+Wrong:
+
+```ts
+flexRenderComponent((props) => props.cell.getValue())
+```
+
+Correct:
+
+```ts
+;(props) => props.cell.getValue()
+```
+
+`flexRenderComponent` validates an Angular component type; plain render functions are already valid render content.
+
+Source: `packages/angular-table/src/flex-render/flexRenderComponent.ts`
+
+### MEDIUM Abstracting a one-off table
+
+Wrong:
+
+```ts
+const hook = createTableHook({ features: tableFeatures({}) })
+```
+
+Correct:
+
+```ts
+readonly table = injectTable(() => ({ features, columns, data: this.data() }))
+```
+
+Use the app hook only when shared defaults, types, or registered components justify it.
+
+Source: `docs/framework/angular/guide/composable-tables.md`
+
+## API Discovery
+
+Inspect `node_modules/@tanstack/angular-table/src/helpers/createTableHook.ts`, `helpers/{table,cell,header}.ts`, and `flex-render/` for exact DI and rendering contracts.

package/skills/getting-started/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: getting-started
+description: >
+  Create an Angular TanStack Table v9 table with injectTable inside injection context, explicit stable tableFeatures and columns, signal-backed data, and FlexRender structural directives or helpers.
+metadata:
+  type: framework
+  library: '@tanstack/angular-table'
+  framework: angular
+  library_version: '9.0.0-beta.42'
+requires:
+  - '@tanstack/table-core#core'
+  - '@tanstack/table-core#table-features'
+sources:
+  - 'TanStack/table:docs/framework/angular/guide/migrating.md'
+  - 'TanStack/table:docs/framework/angular/guide/rendering.md'
+  - 'TanStack/table:examples/angular/basic-inject-table'
+  - 'TanStack/table:packages/angular-table/src/index.ts'
+---
+
+This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Read them first for the headless model and explicit features.
+
+## Setup
+
+```ts
+import { Component, signal } from '@angular/core'
+import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'
+
+type Person = { name: string; age: number }
+const features = tableFeatures({})
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'age', header: 'Age' },
+]
+
+@Component({
+  selector: 'app-table',
+  imports: [FlexRender],
+  template: `<table>
+    <tbody>
+      @for (row of table.getRowModel().rows; track row.id) {
+        <tr>
+          @for (cell of row.getAllCells(); track cell.id) {
+            <td>
+              <ng-container *flexRenderCell="cell; let value">{{
+                value
+              }}</ng-container>
+            </td>
+          }
+        </tr>
+      }
+    </tbody>
+  </table>`,
+})
+export class TableComponent {
+  readonly data = signal<Person[]>([{ name: 'Ada', age: 36 }])
+  readonly table = injectTable(() => ({ features, columns, data: this.data() }))
+}
+```
+
+## Core Patterns
+
+### Keep static inputs outside the initializer
+
+`injectTable` reruns its options initializer when a signal read changes. Define features, row-model factories, and columns at module or stable class scope; read only changing values inside.
+
+### Render each content kind correctly
+
+Import `FlexRender` for `*flexRender`, `*flexRenderCell`, `*flexRenderHeader`, and `*flexRenderFooter`. Definitions may yield primitives, `TemplateRef`, component types, or `flexRenderComponent(...)`; Table does not supply markup or CSS.
+
+## Common Mistakes
+
+### CRITICAL Calling injectTable outside DI
+
+Wrong:
+
+```ts
+export function makeTable() {
+  return injectTable(() => ({ features, columns, data }))
+}
+```
+
+Correct:
+
+```ts
+export class TableComponent {
+  readonly table = injectTable(() => ({ features, columns, data: this.data() }))
+}
+```
+
+`injectTable` asserts an Angular injection context and registers lifecycle cleanup there.
+
+Source: `packages/angular-table/src/injectTable.ts`
+
+### HIGH Reallocating static options reactively
+
+Wrong:
+
+```ts
+injectTable(() => ({
+  features: tableFeatures({}),
+  columns: makeColumns(),
+  data: this.data(),
+}))
+```
+
+Correct:
+
+```ts
+const features = tableFeatures({})
+const columns = makeColumns()
+injectTable(() => ({ features, columns, data: this.data() }))
+```
+
+Every signal change reruns the initializer; rebuilding static inputs invalidates memoized Table work.
+
+Source: `packages/angular-table/src/injectTable.ts`
+
+### HIGH Treating a render function as a component
+
+Wrong:
+
+```ts
+cell: () => flexRenderComponent(() => 'value')
+```
+
+Correct:
+
+```ts
+cell: () => 'value'
+```
+
+`flexRenderComponent` wraps an Angular component type; ordinary functions and primitives are handled directly by FlexRender.
+
+Source: `docs/framework/angular/guide/rendering.md`
+
+## API Discovery
+
+Inspect `node_modules/@tanstack/angular-table/src/index.ts`, `injectTable.ts`, `flexRender.ts`, and `flex-render/`; inspect optional feature APIs in installed `@tanstack/table-core/src/features/`.

package/skills/migrate-v8-to-v9/SKILL.md

@@ -0,0 +1,194 @@
+---
+name: migrate-v8-to-v9
+description: >
+  Complete Angular v8-to-v9 migration reference: injectTable and injection context, explicit features and row-model slots, signal/atom state, FlexRender directives, type generics, prototype methods, sorting, sizing, selection, and logical pinning.
+metadata:
+  type: lifecycle
+  library: '@tanstack/angular-table'
+  framework: angular
+  library_version: '9.0.0-beta.42'
+requires:
+  - '@tanstack/table-core#migrate-v8-to-v9'
+  - getting-started
+  - table-state
+sources:
+  - 'TanStack/table:docs/framework/angular/guide/migrating.md'
+  - 'TanStack/table:packages/angular-table/src/index.ts'
+  - 'TanStack/table:examples/angular/basic-inject-table'
+---
+
+Use this as the complete breaking-change checklist. V9 is the current API; construction, feature registration, state, rendering, and types must migrate together.
+
+Framework prerequisite: Angular 19 or newer (`@angular/core >=19`).
+
+## Recommended Migration Order
+
+1. Replace `createAngularTable` with `injectTable` inside an Angular injection context.
+2. Hoist static/expensive features and columns outside the reactive initializer.
+3. Move features, row models, and function registries into `tableFeatures`.
+4. Update signal/atom state reads and FlexRender usage.
+5. Apply every shared API and type rename below.
+6. Treat `stockFeatures` as a temporary audit bridge; explicit features are the production target.
+
+```ts
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+})
+
+class TableCmp {
+  readonly table = injectTable(() => ({
+    features,
+    columns,
+    data: this.data(),
+  }))
+}
+```
+
+## Construction and Feature Registration
+
+| v8                                  | v9                                                         |
+| ----------------------------------- | ---------------------------------------------------------- |
+| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context          |
+| All features bundled                | Required `features: tableFeatures({...})`                  |
+| `getCoreRowModel()` option          | Remove; core row model is automatic                        |
+| `get*RowModel()` table options      | `create*RowModel()` slots in `tableFeatures`               |
+| `sortingFns` table option           | `sortFns` feature slot                                     |
+| Top-level `onStateChange`           | Per-slice callbacks, external atoms, or store subscription |
+
+The initializer reruns when signals read inside it change and calls `setOptions`; do not rebuild columns or features there.
+
+Feature imports are `columnFilteringFeature`, `globalFilteringFeature`, `rowSortingFeature`, `rowPaginationFeature`, `rowSelectionFeature`, `rowExpandingFeature`, `rowPinningFeature`, `columnPinningFeature`, `columnVisibilityFeature`, `columnOrderingFeature`, `columnSizingFeature`, `columnResizingFeature`, `columnGroupingFeature`, and `columnFacetingFeature`. APIs are feature-gated. Put a feature before its dependent slot in the same `tableFeatures` call.
+
+### Row-model mapping
+
+| v8 option                  | v9 slot and factory                                                 |
+| -------------------------- | ------------------------------------------------------------------- |
+| `getFilteredRowModel()`    | `filteredRowModel: createFilteredRowModel()` after column filtering |
+| `getSortedRowModel()`      | `sortedRowModel: createSortedRowModel()` after row sorting          |
+| `getPaginationRowModel()`  | `paginatedRowModel: createPaginatedRowModel()` after pagination     |
+| `getExpandedRowModel()`    | `expandedRowModel: createExpandedRowModel()` after expanding        |
+| `getGroupedRowModel()`     | `groupedRowModel: createGroupedRowModel()` after grouping           |
+| `getFacetedRowModel()`     | `facetedRowModel: createFacetedRowModel()` after faceting           |
+| `getFacetedMinMaxValues()` | `facetedMinMaxValues: createFacetedMinMaxValues()`                  |
+| `getFacetedUniqueValues()` | `facetedUniqueValues: createFacetedUniqueValues()`                  |
+
+Factories take no arguments. `filterFns`, `sortFns`, and `aggregationFns` are sibling feature slots.
+
+## Angular State Migration
+
+- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads.
+- Use `table.store.get()` only for a full flat snapshot/debug output.
+- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate.
+- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters.
+- Top-level `onStateChange` is removed. Use per-slice callbacks, external atoms, or `table.store.subscribe` for all changes.
+- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice.
+- Treat `table.baseAtoms` as internal; prefer feature APIs or external atoms.
+
+## Angular Rendering and Composition
+
+- Import `FlexRender`/the current `*flexRender` directives from the adapter.
+- Prefer `*flexRenderCell="cell; let value"`, `*flexRenderHeader="header; let value"`, and `*flexRenderFooter="footer; let value"`; they choose the definition and context automatically.
+- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers.
+- Column render functions run in an Angular injection context and may call `inject()` or use signals.
+- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props.
+- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version.
+- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly.
+- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`.
+
+## Complete Shared Breaking-Change Map
+
+### Instance methods
+
+Row, cell, column, header, and related methods now live on shared prototypes and use `this`. Call them on their instances. Do not destructure/pass them bare or expect them in object spread, `Object.keys`, or JSON. Table methods are not affected.
+
+### Logical column pinning
+
+Beta.38 has no physical aliases.
+
+| old                                                            | new                                                           |
+| -------------------------------------------------------------- | ------------------------------------------------------------- |
+| `columnPinning.left` / `.right`                                | `.start` / `.end`                                             |
+| `column.pin('left' \| 'right')`                                | `column.pin('start' \| 'end')`                                |
+| `getIsPinned() === 'left' \| 'right'`                          | `'start' \| 'end'`                                            |
+| `row.getLeftVisibleCells()` / `getRightVisibleCells()`         | `getStartVisibleCells()` / `getEndVisibleCells()`             |
+| `getLeftHeaderGroups()` / `getRightHeaderGroups()`             | `getStartHeaderGroups()` / `getEndHeaderGroups()`             |
+| `getLeftFooterGroups()` / `getRightFooterGroups()`             | `getStartFooterGroups()` / `getEndFooterGroups()`             |
+| `getLeftFlatHeaders()` / `getRightFlatHeaders()`               | `getStartFlatHeaders()` / `getEndFlatHeaders()`               |
+| `getLeftLeafHeaders()` / `getRightLeafHeaders()`               | `getStartLeafHeaders()` / `getEndLeafHeaders()`               |
+| `getLeftLeafColumns()` / `getRightLeafColumns()`               | `getStartLeafColumns()` / `getEndLeafColumns()`               |
+| `getLeftVisibleLeafColumns()` / `getRightVisibleLeafColumns()` | `getStartVisibleLeafColumns()` / `getEndVisibleLeafColumns()` |
+| `getLeftTotalSize()` / `getRightTotalSize()`                   | `getStartTotalSize()` / `getEndTotalSize()`                   |
+| `column.getStart('left')`                                      | `column.getStart('start')`                                    |
+| `column.getAfter('right')`                                     | `column.getAfter('end')`                                      |
+| `column.getIndex('left' \| 'right')`                           | `column.getIndex('start' \| 'end')`                           |
+
+Prefer CSS logical inset properties. Logical names do not set DOM direction. `columnResizeDirection` is unchanged.
+
+### Pinning, sizing, and resizing
+
+- `enablePinning` splits into `enableColumnPinning` and `enableRowPinning`.
+- Interactive resizing requires `columnSizingFeature` and `columnResizingFeature`; fixed sizing needs only sizing.
+- `columnSizingInfo` becomes `columnResizing`.
+- `setColumnSizingInfo()` becomes `setColumnResizing()`.
+- `onColumnSizingInfoChange` becomes `onColumnResizingChange`.
+
+### Sorting, rows, and selection
+
+| v8                             | v9                            |
+| ------------------------------ | ----------------------------- |
+| `sortingFn`                    | `sortFn`                      |
+| `sortingFns`                   | `sortFns`                     |
+| `getSortingFn()`               | `getSortFn()`                 |
+| `getAutoSortingFn()`           | `getAutoSortFn()`             |
+| `SortingFn` / `SortingFns`     | `SortFn` / `SortFns`          |
+| `row._getAllCellsByColumnId()` | `row.getAllCellsByColumnId()` |
+
+Other `_`-prefixed internals are removed, including `_getPinnedRows`, `_getFacetedRowModel`, `_getFacetedMinMaxValues`, and `_getFacetedUniqueValues`.
+
+`getIsSomeRowsSelected()` and `getIsSomePageRowsSelected()` mean at least one, including all. Use `getIsSomeRowsSelected() && !getIsAllRowsSelected()` or `getIsSomePageRowsSelected() && !getIsAllPageRowsSelected()` for indeterminate UI.
+
+## TypeScript Migration
+
+- Most types add `TFeatures` first: `Column<TFeatures, TData, TValue>`, `ColumnDef<TFeatures, TData, TValue>`, `Table<TFeatures, TData>`, `Row<TFeatures, TData>`, and `Cell<TFeatures, TData, TValue>`.
+- Replace `createColumnHelper<Person>()` with `createColumnHelper<typeof features, Person>()`; use `columnHelper.columns([...])` for inference.
+- A `createTableHook` column helper already binds features and needs only `<Person>`.
+- Use `StockFeatures` when using `stockFeatures`.
+- Existing `TableMeta`/`ColumnMeta` declaration merging must add `TFeatures` first. Prefer per-table meta slots using `metaHelper`.
+- Replace global `FilterFns`, `SortFns`, `AggregationFns`, and `FilterMeta` augmentation with registry slots and `filterMeta`; registered keys become typed string references.
+- `RowData` is now `Record<string, any> | Array<any>` rather than `unknown`.
+
+## Common Migration Failures
+
+### CRITICAL: Calling injectTable outside injection context
+
+Create it in a component/directive/service field initializer or another valid Angular injection context so ownership and cleanup bind correctly.
+
+### HIGH: Rebuilding static inputs reactively
+
+Hoist `features` and `columns`; the initializer reruns for tracked signals.
+
+### HIGH: Leaving row models on table options
+
+Move each row model beside its prerequisite feature in `tableFeatures`.
+
+### HIGH: Destructuring instance methods
+
+Use `row.getValue('name')`; prototype methods require the original instance and are absent from shallow clones.
+
+## Final Checklist
+
+- [ ] `createAngularTable` is replaced by `injectTable` in injection context.
+- [ ] Static inputs are stable outside the signal-tracked initializer.
+- [ ] Features, row models, and registries are in `tableFeatures`; core row model is removed.
+- [ ] State reads use atom-backed signals or store intentionally; `onStateChange` is gone.
+- [ ] Controlled state and external atom ownership do not overlap.
+- [ ] FlexRender directives/helpers are migrated and imported.
+- [ ] Prototype methods, pinning, sizing/resizing, sorting, row, and selection changes are audited.
+- [ ] Helpers, types, meta, registries, and `RowData` use v9 shapes.
+- [ ] Temporary `stockFeatures` usage has an explicit removal plan.
+
+## API Discovery
+
+Inspect `node_modules/@tanstack/angular-table/src/index.ts`, `injectTable.ts`, and rendering sources. Verify feature slots and exact beta APIs in `node_modules/@tanstack/table-core/src`; do not reconstruct v9 from v8 memory.