feat(angular): removed tableHelper hook in favor of createTableHook

Author: riccardoperra

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
 import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'
 import type { ColumnDef } from '@tanstack/angular-table'
 
-// This example uses the classic standalone `injectTable` hook to create a table without the new `createTableHelper` util.
+// This example uses the classic standalone `injectTable` hook to create a table without the new `createTableHook` util.
 
 // 1. Define what the shape of your data will be for each row
 type Person = {
@@ -47,7 +47,7 @@ const defaultData: Array<Person> = [
 const _features = tableFeatures({}) // util method to create sharable TFeatures object/type
 
 // 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns.
-// Alternatively, check out the createTableHelper/createColumnHelper util for an even more type-safe way to define columns.
+// Alternatively, check out the createAppTable/createColumnHelper util for an even more type-safe way to define columns.
 const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     accessorKey: 'firstName',

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

@@ -8,8 +8,8 @@ import {
   FlexRenderDirective,
   createExpandedRowModel,
   createPaginatedRowModel,
-  createTableHelper,
   flexRenderComponent,
+  injectTable,
   rowExpandingFeature,
   rowPaginationFeature,
   rowSelectionFeature,
@@ -77,15 +77,12 @@ export class AppComponent {
   readonly data = signal<Array<Person>>(makeData(100, 5, 3))
   readonly expanded = signal<ExpandedState>({})
 
-  readonly tableHelper = createTableHelper({
+  readonly table = injectTable(() => ({
     _features,
     _rowModels: {
       paginatedRowModel: createPaginatedRowModel(),
       expandedRowModel: createExpandedRowModel(),
     },
-  })
-
-  readonly table = this.tableHelper.injectTable(() => ({
     data: this.data(),
     columns: defaultColumns,
     state: {

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

@@ -6,7 +6,7 @@ import {
   signal,
 } from '@angular/core'
 import { FlexRenderDirective, isFunction } from '@tanstack/angular-table'
-import { columns, tableHelper } from './columns'
+import { columns, injectTable } from './columns'
 import { makeData } from './makeData'
 import type { GroupingState, Updater } from '@tanstack/angular-table'
 
@@ -26,7 +26,7 @@ export class AppComponent {
     JSON.stringify(this.grouping(), null, 2),
   )
 
-  readonly table = tableHelper.injectTable(() => ({
+  readonly table = injectTable(() => ({
     data: this.data(),
     columns: columns,
     initialState: {

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

@@ -6,32 +6,29 @@ import {
   createFilteredRowModel,
   createGroupedRowModel,
   createPaginatedRowModel,
-  createTableHelper,
+  createTableHook,
   filterFns,
   rowExpandingFeature,
   rowPaginationFeature,
 } from '@tanstack/angular-table'
 import type { Person } from './makeData'
 
-export const tableHelper = createTableHelper({
-  _features: {
-    columnGroupingFeature,
-    rowPaginationFeature,
-    columnFilteringFeature,
-    rowExpandingFeature,
-  },
-  _rowModels: {
-    groupedRowModel: createGroupedRowModel(aggregationFns),
-    expandedRowModel: createExpandedRowModel(),
-    paginatedRowModel: createPaginatedRowModel(),
-    filteredRowModel: createFilteredRowModel(filterFns),
-  },
-  TData: {} as Person,
-})
-export default tableHelper
-
-const { createColumnHelper } = tableHelper
-const columnHelper = createColumnHelper<Person>()
+export const { createAppColumnHelper, injectAppTable: injectTable } =
+  createTableHook({
+    _features: {
+      columnGroupingFeature,
+      rowPaginationFeature,
+      columnFilteringFeature,
+      rowExpandingFeature,
+    },
+    _rowModels: {
+      groupedRowModel: createGroupedRowModel(aggregationFns),
+      expandedRowModel: createExpandedRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+      filteredRowModel: createFilteredRowModel(filterFns),
+    },
+  })
+const columnHelper = createAppColumnHelper<Person>()
 
 export const columns = columnHelper.columns([
   columnHelper.group({

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

@@ -8,10 +8,10 @@ import {
   FlexRenderDirective,
   columnSizingFeature,
   columnVisibilityFeature,
-  createPaginatedRowModel,
-  createTableHelper,
   flexRenderComponent,
+  injectTable,
   rowPaginationFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { CdkDrag, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop'
 import { JsonPipe } from '@angular/common'
@@ -21,16 +21,13 @@ import type { Person } from './makeData'
 import type { CdkDragDrop } from '@angular/cdk/drag-drop'
 import type { ColumnDef } from '@tanstack/angular-table'
 
-const defaultColumns: Array<
-  ColumnDef<
-    {
-      rowPaginationFeature: typeof rowPaginationFeature
-      columnSizingFeature: typeof columnSizingFeature
-      columnVisibilityFeature: typeof columnVisibilityFeature
-    },
-    Person
-  >
-> = [
+const _tableFeatures = tableFeatures({
+  rowPaginationFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+})
+
+const defaultColumns: Array<ColumnDef<typeof _tableFeatures, Person>> = [
   {
     id: 'drag-handle',
     header: 'Move',
@@ -75,19 +72,9 @@ const defaultColumns: Array<
 export class AppComponent {
   readonly data = signal<Array<Person>>(makeData(20))
 
-  readonly tableHelper = createTableHelper({
-    _features: {
-      rowPaginationFeature,
-      columnSizingFeature,
-      columnVisibilityFeature,
-    },
-    _rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-  })
-
-  readonly table = this.tableHelper.injectTable(() => {
+  readonly table = injectTable(() => {
     return {
+      _features: _tableFeatures,
       data: this.data(),
       columns: defaultColumns,
       getRowId: (row) => row.userId,

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

@@ -10,7 +10,7 @@ import {
   columnFilteringFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
-  createTableHelper,
+  createTableHook,
   filterFns,
   flexRenderComponent,
   rowPaginationFeature,
@@ -25,9 +25,9 @@ import {
 } from './selection-column.component'
 import type { TemplateRef } from '@angular/core'
 import type { Person } from './makeData'
-import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
+import type { RowSelectionState } from '@tanstack/angular-table'
 
-const tableHelper = createTableHelper({
+const { injectAppTable: injectTable, createAppColumnHelper } = createTableHook({
   _features: {
     columnFilteringFeature,
     rowPaginationFeature,
@@ -40,6 +40,8 @@ const tableHelper = createTableHelper({
   debugTable: true,
 })
 
+const columnHelper = createAppColumnHelper<Person>()
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -55,65 +57,61 @@ export class AppComponent {
   readonly ageHeaderCell =
     viewChild.required<TemplateRef<unknown>>('ageHeaderCell')
 
-  readonly columns: Array<ColumnDef<typeof tableHelper.features, Person>> = [
-    {
+  readonly columns = columnHelper.columns([
+    columnHelper.display({
       id: 'select',
       header: () => flexRenderComponent(TableHeadSelectionComponent),
       cell: () => flexRenderComponent(TableRowSelectionComponent),
-    },
-    {
+    }),
+    columnHelper.group({
       header: 'Name',
       footer: (props) => props.column.id,
-      columns: [
-        {
-          accessorKey: 'firstName',
+      columns: columnHelper.columns([
+        columnHelper.accessor('firstName', {
           cell: (info) => info.getValue(),
           footer: (props) => props.column.id,
-          header: (props) => `First name`,
-        },
-        {
-          accessorFn: (row) => row.lastName,
-          id: 'lastName',
+          header: () => 'First name',
+        }),
+        columnHelper.accessor('lastName', {
           cell: (info) => info.getValue(),
           header: () => 'Last Name',
           footer: (props) => props.column.id,
-        },
-      ],
-    },
-    {
+        }),
+      ]),
+    }),
+    columnHelper.group({
       header: 'Info',
       footer: (props) => props.column.id,
-      columns: [
-        {
-          accessorKey: 'age',
+      columns: columnHelper.columns([
+        columnHelper.accessor('age', {
           header: () => this.ageHeaderCell(),
           footer: (props) => props.column.id,
-        },
-        {
+        }),
+        columnHelper.group({
           header: 'More Info',
-          columns: [
-            {
-              accessorKey: 'visits',
+          columns: columnHelper.columns([
+            columnHelper.accessor((row) => row.visits, {
+              id: 'visits',
               header: () => 'Visits',
               footer: (props) => props.column.id,
-            },
-            {
-              accessorKey: 'status',
-              header: 'Status',
+            }),
+            columnHelper.accessor((row) => row.status, {
+              id: 'status',
+              header: () => 'Status',
               footer: (props) => props.column.id,
-            },
-            {
-              accessorKey: 'progress',
+            }),
+            columnHelper.accessor((row) => row.progress, {
+              id: 'progress',
               header: 'Profile Progress',
               footer: (props) => props.column.id,
-            },
-          ],
-        },
-      ],
-    },
-  ]
+            }),
+          ]),
+        }),
+      ]),
+    }),
+  ])
 
-  table = tableHelper.injectTable(() => ({
+  table = injectTable(() => ({
     data: this.data(),
     columns: this.columns,
     state: {

examples/angular/signal-input/src/app/person-table/person-table.component.ts

@@ -2,21 +2,16 @@ import { ChangeDetectionStrategy, Component, input, model } from '@angular/core'
 import {
   FlexRenderDirective,
   columnVisibilityFeature,
-  createPaginatedRowModel,
-  createTableHelper,
+  injectTable,
   rowPaginationFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import type { ColumnDef, PaginationState } from '@tanstack/angular-table'
 import type { Person } from '../makeData'
 
-const tableHelper = createTableHelper({
-  _features: {
-    rowPaginationFeature,
-    columnVisibilityFeature,
-  },
-  _rowModels: {
-    paginatedRowModel: createPaginatedRowModel(),
-  },
+const _features = tableFeatures({
+  rowPaginationFeature,
+  columnVisibilityFeature,
 })
 
 @Component({
@@ -30,7 +25,7 @@ export class PersonTableComponent {
 
   readonly pagination = model.required<PaginationState>()
 
-  readonly columns: Array<ColumnDef<typeof tableHelper.features, Person>> = [
+  readonly columns: Array<ColumnDef<typeof _features, Person>> = [
     {
       accessorKey: 'firstName',
       header: 'First Name',
@@ -44,8 +39,9 @@ export class PersonTableComponent {
     },
   ]
 
-  readonly table = tableHelper.injectTable(() => {
+  readonly table = injectTable(() => {
     return {
+      _features,
       data: this.data(),
       columns: this.columns,
       state: {