feat(angular-table): Support Tanstack v9 alpha and Angular 19, fix examples (#5817)

* angular v19 table adapter

* angular v19 table adapter

* fix types

Author: riccardoperra

examples/angular/basic/src/app/app.component.html

@@ -24,7 +24,7 @@
     <tbody>
       @for (row of table.getRowModel().rows; track row.id) {
         <tr>
-          @for (cell of row.getVisibleCells(); track cell.id) {
+          @for (cell of row.getAllCells(); track cell.id) {
             <td>
               <ng-container
                 *flexRender="

examples/angular/basic/src/app/app.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
-import { RouterOutlet } from '@angular/router'
 import {
   FlexRenderDirective,
-  createCoreRowModel,
   injectTable,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import type { ColumnDef } from '@tanstack/angular-table'
 
@@ -81,18 +80,22 @@ const defaultColumns: Array<ColumnDef<any, Person>> = [
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, FlexRenderDirective],
+  imports: [FlexRenderDirective],
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  data = signal<Array<Person>>(defaultData)
+  readonly data = signal<Array<Person>>(defaultData)
+
+  readonly tableFeatures = tableFeatures({})
 
   table = injectTable(() => ({
+    _features: this.tableFeatures, // new required option in V9. Tell the table which features you are importing and using (better tree-shaking)
+    _rowModels: {}, // `Core` row model is now included by default, but you can still override it here
     data: this.data(),
     columns: defaultColumns,
-    getCoreRowModel: createCoreRowModel(),
     debugTable: true,
+    // other options here
   }))
 
   rerender() {

examples/angular/column-ordering/src/app/app.component.ts

@@ -6,6 +6,8 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnOrderingFeature,
+  columnVisibilityFeature,
   createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
@@ -84,12 +86,15 @@ export class AppComponent {
 
   readonly table = injectTable(() => ({
     data: this.data(),
+    _features: {
+      columnVisibilityFeature,
+      columnOrderingFeature,
+    },
     columns: defaultColumns,
     state: {
       columnOrder: this.columnOrder(),
       columnVisibility: this.columnVisibility(),
     },
-    getCoreRowModel: createCoreRowModel(),
     onColumnVisibilityChange: (updaterOrValue) => {
       typeof updaterOrValue === 'function'
         ? this.columnVisibility.update(updaterOrValue)

examples/angular/column-pinning-sticky/src/app/app.component.ts

@@ -1,6 +1,11 @@
 import { Component, computed, signal } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
   createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
@@ -74,25 +79,34 @@ const defaultColumns: Array<ColumnDef<any, Person>> = [
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [FlexRenderDirective, SlicePipe, NgTemplateOutlet, NgStyle],
+  imports: [FlexRenderDirective, NgStyle],
   templateUrl: './app.component.html',
 })
 export class AppComponent {
   readonly columns = signal([...defaultColumns])
   readonly data = signal<Array<Person>>(makeData(30))
   readonly columnVisibility = signal<ColumnVisibilityState>({})
   readonly columnOrder = signal<ColumnOrderState>([])
-  readonly columnPinning = signal<ColumnPinningState>({})
+  readonly columnPinning = signal<ColumnPinningState>({
+    left: [],
+    right: [],
+  })
   readonly split = signal(false)
 
   table = injectTable(() => ({
     data: this.data(),
+    _features: {
+      columnPinningFeature,
+      columnVisibilityFeature,
+      columnSizingFeature,
+      columnOrderingFeature,
+      columnResizingFeature,
+    },
     columns: this.columns(),
-    getCoreRowModel: createCoreRowModel(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,
-    columnResizeMode: 'onChange',
+    columnResizeMode: 'onChange' as const,
   }))
 
   stringifiedColumnPinning = computed(() => {

examples/angular/column-pinning/src/app/app.component.ts

@@ -6,8 +6,12 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnVisibilityFeature,
   createCoreRowModel,
   injectTable,
+  rowPinningFeature,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
 import { NgTemplateOutlet, SlicePipe } from '@angular/common'
@@ -91,11 +95,19 @@ export class AppComponent {
   readonly data = signal<Array<Person>>(makeData(5000))
   readonly columnVisibility = signal<ColumnVisibilityState>({})
   readonly columnOrder = signal<ColumnOrderState>([])
-  readonly columnPinning = signal<ColumnPinningState>({})
+  readonly columnPinning = signal<ColumnPinningState>({
+    left: [],
+    right: [],
+  })
   readonly split = signal(false)
 
   table = injectTable(() => ({
     data: this.data(),
+    _features: {
+      columnPinningFeature,
+      columnOrderingFeature,
+      columnVisibilityFeature,
+    },
     columns: defaultColumns,
     state: {
       columnVisibility: this.columnVisibility(),
@@ -117,7 +129,6 @@ export class AppComponent {
         ? this.columnPinning.update(updaterOrValue)
         : this.columnPinning.set(updaterOrValue)
     },
-    getCoreRowModel: createCoreRowModel(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

examples/angular/grouping/src/app/app.component.html

@@ -42,7 +42,7 @@
     <tbody>
       @for (row of table.getRowModel().rows; track row.id) {
         <tr>
-          @for (cell of row.getVisibleCells(); track cell.id) {
+          @for (cell of row.getAllCells(); track cell.id) {
             <td
               [style.background]="
                 cell.getIsGrouped()

examples/angular/grouping/src/app/app.component.ts

@@ -7,12 +7,16 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnFilteringFeature,
+  columnGroupingFeature,
   createCoreRowModel,
   createExpandedRowModel,
   createFilteredRowModel,
   createGroupedRowModel,
   createPaginatedRowModel,
   injectTable,
+  rowExpandingFeature,
+  rowPaginationFeature,
   tableOptions,
 } from '@tanstack/angular-table'
 import { columns } from './columns'
@@ -28,35 +32,42 @@ import type { GroupingState, Updater } from '@tanstack/angular-table'
 })
 export class AppComponent {
   title = 'grouping'
-  data = signal(makeData(10000))
-  grouping = signal<GroupingState>([])
+  readonly data = signal(makeData(10000))
+  readonly grouping = signal<GroupingState>([])
 
-  stringifiedGrouping = computed(() => JSON.stringify(this.grouping(), null, 2))
-
-  tableOptions = computed(() =>
-    tableOptions({
-      data: this.data(),
-      columns: columns,
-      state: {
-        grouping: this.grouping(),
-      },
-      onGroupingChange: (updaterOrValue: Updater<GroupingState>) => {
-        const groupingState =
-          typeof updaterOrValue === 'function'
-            ? updaterOrValue([...this.grouping()])
-            : updaterOrValue
-        this.grouping.set(groupingState)
-      },
-      getExpandedRowModel: createExpandedRowModel(),
-      getGroupedRowModel: createGroupedRowModel(),
-      getCoreRowModel: createCoreRowModel(),
-      getPaginatedRowModel: createPaginatedRowModel(),
-      getFilteredRowModel: createFilteredRowModel(),
-      debugTable: true,
-    }),
+  readonly stringifiedGrouping = computed(() =>
+    JSON.stringify(this.grouping(), null, 2),
   )
 
-  table = injectTable(this.tableOptions)
+  readonly table = injectTable(() => ({
+    data: this.data(),
+    columns: columns,
+    initialState: {
+      pagination: { pageSize: 20, pageIndex: 0 },
+    },
+    state: {
+      grouping: this.grouping(),
+    },
+    _features: {
+      columnGroupingFeature,
+      rowPaginationFeature,
+      columnFilteringFeature,
+      rowExpandingFeature,
+    },
+    _rowModels: {
+      groupedRowModel: createGroupedRowModel(),
+      expandedRowModel: createExpandedRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+      filteredRowModel: createFilteredRowModel(),
+    },
+    onGroupingChange: (updaterOrValue: Updater<GroupingState>) => {
+      const groupingState =
+        typeof updaterOrValue === 'function'
+          ? updaterOrValue([...this.grouping()])
+          : updaterOrValue
+      this.grouping.set(groupingState)
+    },
+  }))
 
   onPageInputChange(event: any): void {
     const page = event.target.value ? Number(event.target.value) - 1 : 0

examples/angular/row-selection-signal/src/app/app.component.html

@@ -20,8 +20,9 @@
 
                 @if (header.column.getCanFilter()) {
                   <div>
+                    <!-- TODO fix type -->
                     <app-table-filter
-                      [column]="header.column"
+                      [column]="$any(header.column)"
                       [table]="table"
                     />
                   </div>

examples/angular/row-selection-signal/src/app/app.component.ts

@@ -7,10 +7,13 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
-  createCoreRowModel,
+  columnFilteringFeature,
+  columnVisibilityFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
   injectTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
 } from '@tanstack/angular-table'
 import { FilterComponent } from './filter'
 import { makeData } from './makeData'
@@ -97,6 +100,16 @@ export class AppComponent {
 
   table = injectTable(() => ({
     data: this.data(),
+    _features: {
+      rowSelectionFeature,
+      rowPaginationFeature,
+      columnFilteringFeature,
+      columnVisibilityFeature,
+    },
+    _rowModels: {
+      filteredRowModel: createFilteredRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+    },
     columns: this.columns,
     state: {
       rowSelection: this.rowSelection(),
@@ -110,9 +123,6 @@ export class AppComponent {
           : updaterOrValue,
       )
     },
-    getCoreRowModel: createCoreRowModel(),
-    getFilteredRowModel: createFilteredRowModel(),
-    getPaginatedRowModel: createPaginatedRowModel(),
     debugTable: true,
   }))
 

examples/angular/row-selection-signal/src/app/filter.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { Component, input } from '@angular/core'
 import type { OnInit } from '@angular/core'
-import type { Column, Table } from '@tanstack/angular-table'
+import type { Column, RowData, Table } from '@tanstack/angular-table'
 
 @Component({
   selector: 'app-table-filter',
@@ -39,10 +39,10 @@ import type { Column, Table } from '@tanstack/angular-table'
   standalone: true,
   imports: [CommonModule],
 })
-export class FilterComponent<T> implements OnInit {
+export class FilterComponent<T extends RowData> implements OnInit {
   column = input.required<Column<any, any>>()
 
-  table = input.required<Table<T>>()
+  table = input.required<Table<any, T>>()
 
   columnType!: string