Merge remote-tracking branch 'origin/alpha' into tanstack_v9_angular

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

@@ -8,7 +8,6 @@ import {
   FlexRenderDirective,
   columnOrderingFeature,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
@@ -20,7 +19,7 @@ import type {
   ColumnVisibilityState,
 } from '@tanstack/angular-table'
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -91,6 +90,7 @@ export class AppComponent {
       columnOrderingFeature,
     },
     columns: defaultColumns,
+    data: this.data(),
     state: {
       columnOrder: this.columnOrder(),
       columnVisibility: this.columnVisibility(),

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

@@ -6,11 +6,10 @@ import {
   columnResizingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
-import { NgStyle, NgTemplateOutlet, SlicePipe } from '@angular/common'
+import { NgStyle } from '@angular/common'
 import { makeData } from './makeData'
 import type {
   Column,
@@ -94,16 +93,16 @@ export class AppComponent {
   readonly split = signal(false)
 
   table = injectTable(() => ({
-    data: this.data(),
-    enableExperimentalReactivity: true,
     _features: {
-      columnPinningFeature,
-      columnVisibilityFeature,
-      columnSizingFeature,
       columnOrderingFeature,
+      columnPinningFeature,
       columnResizingFeature,
+      columnSizingFeature,
+      columnVisibilityFeature,
     },
     columns: this.columns(),
+    data: this.data(),
+    enableExperimentalReactivity: true,
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

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

@@ -9,9 +9,8 @@ import {
   columnOrderingFeature,
   columnPinningFeature,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
-  rowPinningFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
 import { NgTemplateOutlet, SlicePipe } from '@angular/common'
@@ -32,7 +31,13 @@ type Person = {
   progress: number
 }
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const _features = tableFeatures({
+  columnPinningFeature,
+  columnOrderingFeature,
+  columnVisibilityFeature,
+})
+
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -102,19 +107,15 @@ export class AppComponent {
   readonly split = signal(false)
 
   table = injectTable(() => ({
-    data: this.data(),
-    _features: {
-      columnPinningFeature,
-      columnOrderingFeature,
-      columnVisibilityFeature,
-    },
+    _features,
     columns: defaultColumns,
-    enableExperimentalReactivity: true,
+    data: this.data(),
     state: {
       columnVisibility: this.columnVisibility(),
       columnOrder: this.columnOrder(),
       columnPinning: this.columnPinning(),
     },
+    enableExperimentalReactivity: true,
     onColumnVisibilityChange: (updaterOrValue) => {
       typeof updaterOrValue === 'function'
         ? this.columnVisibility.update(updaterOrValue)

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

@@ -6,8 +6,10 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnVisibilityFeature,
   createCoreRowModel,
   injectTable,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import type { OnInit } from '@angular/core'
 import type { ColumnDef, ColumnVisibilityState } from '@tanstack/angular-table'
@@ -21,6 +23,10 @@ type Person = {
   progress: number
 }
 
+const _features = tableFeatures({
+  columnVisibilityFeature,
+})
+
 const defaultData: Array<Person> = [
   {
     firstName: 'tanner',
@@ -48,7 +54,7 @@ const defaultData: Array<Person> = [
   },
 ]
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -112,8 +118,9 @@ export class AppComponent implements OnInit {
   readonly columnVisibility = signal<ColumnVisibilityState>({})
 
   table = injectTable(() => ({
-    data: this.data(),
+    _features,
     columns: defaultColumns,
+    data: this.data(),
     state: {
       columnVisibility: this.columnVisibility(),
     },

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

@@ -48,7 +48,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/filters/src/app/app.component.ts

@@ -6,6 +6,8 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnFacetingFeature,
+  columnFilteringFeature,
   createCoreRowModel,
   createFacetedMinMaxValues,
   createFacetedRowModel,
@@ -15,6 +17,9 @@ import {
   createSortedRowModel,
   injectTable,
   isFunction,
+  rowPaginationFeature,
+  rowSortingFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
 import { NgClass } from '@angular/common'
@@ -27,6 +32,13 @@ import type {
 } from '@tanstack/angular-table'
 import type { Person } from './makeData'
 
+export const _features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -38,7 +50,7 @@ export class AppComponent {
   readonly columnFilters = signal<ColumnFiltersState>([])
   readonly data = signal(makeData(5000))
 
-  readonly columns: Array<ColumnDef<any, Person>> = [
+  readonly columns: Array<ColumnDef<typeof _features, Person>> = [
     {
       accessorKey: 'firstName',
       cell: (info) => info.getValue(),
@@ -79,7 +91,8 @@ export class AppComponent {
     },
   ]
 
-  table = injectTable<any, Person>(() => ({
+  table = injectTable<typeof _features, Person>(() => ({
+    _features,
     columns: this.columns,
     data: this.data(),
     state: {

examples/angular/filters/src/app/table-filter.component.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { Component, computed, input } from '@angular/core'
 import { DebouncedInputDirective } from './debounced-input.directive'
+import type { _features } from './app.component'
+import type { Person } from './makeData'
 import type {
   CellData,
   Column,
@@ -90,13 +92,10 @@ declare module '@tanstack/angular-table' {
   standalone: true,
   imports: [CommonModule, DebouncedInputDirective],
 })
-export class FilterComponent<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  column = input.required<Column<any, any>>()
+export class FilterComponent {
+  column = input.required<Column<typeof _features, Person>>()
 
-  table = input.required<Table<TFeatures, TData>>()
+  table = input.required<Table<typeof _features, Person>>()
 
   readonly filterVariant = computed(() => {
     return (this.column().columnDef.meta ?? {}).filterVariant

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

@@ -9,20 +9,27 @@ import {
   FlexRenderDirective,
   columnFilteringFeature,
   columnGroupingFeature,
-  createCoreRowModel,
   createExpandedRowModel,
   createFilteredRowModel,
   createGroupedRowModel,
   createPaginatedRowModel,
   injectTable,
+  isFunction,
   rowExpandingFeature,
   rowPaginationFeature,
-  tableOptions,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { columns } from './columns'
 import { makeData } from './makeData'
 import type { GroupingState, Updater } from '@tanstack/angular-table'
 
+export const _features = tableFeatures({
+  columnGroupingFeature,
+  rowPaginationFeature,
+  columnFilteringFeature,
+  rowExpandingFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -40,32 +47,26 @@ export class AppComponent {
   )
 
   readonly table = injectTable(() => ({
-    data: this.data(),
-    columns: columns,
+    _features,
+    _rowModels: {
+      groupedRowModel: createGroupedRowModel(),
+      expandedRowModel: createExpandedRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+      filteredRowModel: createFilteredRowModel(),
+    },
     enableExperimentalReactivity: true,
+    data: this.data(),
+    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
+      const groupingState = isFunction(updaterOrValue)
+        ? updaterOrValue([...this.grouping()])
+        : updaterOrValue
       this.grouping.set(groupingState)
     },
   }))

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

@@ -1,3 +1,4 @@
+import type { _features } from './app.component'
 import type { ColumnDef } from '@tanstack/angular-table'
 
 export type Person = {
@@ -10,7 +11,7 @@ export type Person = {
   subRows?: Array<Person>
 }
 
-export const columns: Array<ColumnDef<any, Person>> = [
+export const columns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     columns: [

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

@@ -14,6 +14,7 @@ import {
   injectTable,
   rowPaginationFeature,
   rowSelectionFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { FilterComponent } from './filter'
 import { makeData } from './makeData'
@@ -25,6 +26,13 @@ import type { Person } from './makeData'
 import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
 import type { TemplateRef } from '@angular/core'
 
+const _features = tableFeatures({
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -40,7 +48,7 @@ export class AppComponent {
   readonly ageHeaderCell =
     viewChild.required<TemplateRef<unknown>>('ageHeaderCell')
 
-  readonly columns: Array<ColumnDef<any, Person>> = [
+  readonly columns: Array<ColumnDef<typeof _features, Person>> = [
     {
       id: 'select',
       header: () => TableHeadSelectionComponent<Person>,
@@ -99,6 +107,11 @@ export class AppComponent {
   ]
 
   table = injectTable(() => ({
+    _features,
+    _rowModels: {
+      filteredRowModel: createFilteredRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+    },
     data: this.data(),
     enableExperimentalReactivity: true,
     _features: {

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

@@ -14,7 +14,6 @@ import {
   createTableHelper,
   rowPaginationFeature,
   rowSelectionFeature,
-  tableFeatures,
 } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
 import { FilterComponent } from './filter'
@@ -29,9 +28,9 @@ import type { TemplateRef } from '@angular/core'
 
 const tableHelper = createTableHelper({
   _features: {
+    columnFilteringFeature,
     rowPaginationFeature,
     rowSelectionFeature,
-    columnFilteringFeature,
   },
   _rowModels: {
     filteredRowModel: createFilteredRowModel(),