TanStack · KevinVandy · Aug 2, 2026 · Aug 2, 2026 · coderabbitai · Aug 2, 2026
diff --git a/examples/alpine/aggregation/src/main.ts b/examples/alpine/aggregation/src/main.ts
@@ -103,6 +103,7 @@ Alpine.data('table', () => {
       return { rowSource: local.rowSource }
     },
     initialState: { pagination: { pageIndex: 0, pageSize: 10 } },
+    // manualAggregation: true, // supply aggregate values yourself instead of calculating them locally
     debugTable: true,
     debugColumns: true,
   })

diff --git a/examples/alpine/basic-create-table/index.html b/examples/alpine/basic-create-table/index.html
@@ -6,7 +6,7 @@
     <title>TanStack Alpine Table - Basic Create Table</title>
   </head>
   <body>
-    <!-- 7. Render your table markup from the table instance APIs -->
+    <!-- 6. Render your table markup from the table instance APIs -->
     <div id="root" class="demo-root" x-data="table">
       <div class="button-row">
         <button @click="refreshData()">Regenerate Data</button>

diff --git a/examples/alpine/basic-create-table/src/main.ts b/examples/alpine/basic-create-table/src/main.ts
@@ -1,55 +1,55 @@
 import Alpine from 'alpinejs'
-import { FlexRender, createTable, tableFeatures } from '@tanstack/alpine-table'
+import {
+  FlexRender,
+  createColumnHelper,
+  createTable,
+  tableFeatures,
+} from '@tanstack/alpine-table'
 import { makeData } from './makeData'
 import './index.css'
-import type { ColumnDef } from '@tanstack/alpine-table'
 import type { Person } from './makeData'
 
 // This example uses the standalone `createTable` function to create a table without the `createTableHook` util.
 
 // 1. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
 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 createTableHook/createAppColumnHelper util for an even more type-safe way to define columns.
-const columns: Array<ColumnDef<typeof features, Person>> = [
-  {
-    accessorKey: 'firstName', // accessorKey method (most common for simple use-cases)
+// 2. Create a column helper with the table features and row type
+const columnHelper = createColumnHelper<typeof features, Person>()
+
+// 3. Define the columns for your table with the column helper
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
     header: 'First Name',
     cell: (info) => info.getValue(),
-  },
-  {
-    accessorFn: (row) => row.lastName, // accessorFn used (alternative) along with a custom id
+  }),
+  columnHelper.accessor((row) => row.lastName, {
     id: 'lastName',
     header: () => 'Last Name',
     cell: (info) => info.getValue(),
-  },
-  {
-    accessorFn: (row) => Number(row.age), // accessorFn used to transform the data
+  }),
+  columnHelper.accessor((row) => Number(row.age), {
     id: 'age',
     header: () => 'Age',
     cell: (info) => info.renderValue(),
-  },
-  {
-    accessorKey: 'visits',
+  }),
+  columnHelper.accessor('visits', {
     header: () => 'Visits',
-  },
-  {
-    accessorKey: 'status',
+  }),
+  columnHelper.accessor('status', {
     header: 'Status',
-  },
-  {
-    accessorKey: 'progress',
+  }),
+  columnHelper.accessor('progress', {
     header: 'Profile Progress',
-  },
-]
+  }),
+])
 
-// 5. Register the Alpine component. Store data in Alpine-reactive state so the
+// 4. Register the Alpine component. Store data in Alpine-reactive state so the
 //    buttons can swap it out and the table re-renders.
 Alpine.data('table', () => {
   const local = Alpine.reactive({ data: makeData(20) })
 
-  // 6. Create the table instance with required features, columns, and data
+  // 5. Create the table instance with required features, columns, and data
   const table = createTable({
     debugTable: true, // optionally, enable console logging debug messages
     features, // new required option in V9. Tell the table which features you are importing and using (better tree-shaking)

diff --git a/examples/alpine/column-sizing/src/main.ts b/examples/alpine/column-sizing/src/main.ts
@@ -64,6 +64,7 @@ Alpine.data('table', () => {
     },
     columnResizeMode: 'onChange',
     columnResizeDirection: 'ltr',
+    // defaultColumn: { size: 150, minSize: 50, maxSize: 500 }, // set sizing defaults for every column
     // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render
     // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom
     // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange

diff --git a/examples/alpine/expanding/src/main.ts b/examples/alpine/expanding/src/main.ts
@@ -98,7 +98,11 @@ Alpine.data('table', () => {
     get data() {
       return local.data
     },
-    getSubRows: (row) => row.subRows,
+    getSubRows: (row) => row.subRows, // tell the table where nested rows live
+    // enableRowSelection: row => row.original.age > 18, // enable selection conditionally; default true
+    // enableMultiRowSelection: false, // allow only one selected row at a time; default true
+    // enableSubRowSelection: false, // disable sub-row selection; default true
+    // enableRowRangeSelection: false, // disable shift-click range selection; default true
     // initialState: { expanded: { '0': true } }, // expand rows on first render
     // atoms: { expanded: expandedAtom }, // preferred: own expanded state with an external atom
     // state: { expanded }, // classic controlled state; pair with onExpandedChange
@@ -110,8 +114,11 @@ Alpine.data('table', () => {
     // paginateExpandedRows: false, // keep expanded children on their parent page; default true
     // autoResetExpanded: false, // keep expanded rows after page-altering changes; default true
     // autoResetAll: false, // turn off every feature's automatic reset, including expansion
+    // enableFilters: false, // disable all column and global filtering; default true
+    // enableColumnFilters: false, // disable per-column filters; default true
     // filterFromLeafRows: true, // with filtering, keep parents whose descendants match
     // maxLeafRowFilterDepth: 0, // with filtering, only filter root rows
+    // manualFiltering: true, // pass data that is already filtered, for example from a server
     debugTable: true,
   })
 

diff --git a/examples/alpine/row-pinning/src/main.ts b/examples/alpine/row-pinning/src/main.ts
@@ -99,6 +99,7 @@ Alpine.data('table', () => {
     },
     initialState: {
       pagination: { pageSize: 20, pageIndex: 0 },
+      // rowPinning: { top: ['0'], bottom: ['1'] }, // pin rows on first render
     },
     getSubRows: (row) => row.subRows,
     keepPinnedRows: true,

diff --git a/examples/alpine/row-selection/src/main.ts b/examples/alpine/row-selection/src/main.ts
@@ -82,6 +82,7 @@ Alpine.data('table', () => {
       return local.data
     },
     enableRowSelection: true,
+    // enableRowSelection: row => row.original.age > 18, // or enable selection conditionally
     // initialState: { rowSelection: { '0': true } }, // select rows on first render
     // atoms: { rowSelection: rowSelectionAtom }, // preferred: own selection state with an external atom
     // state: { rowSelection }, // classic controlled state; pair with onRowSelectionChange

diff --git a/examples/angular/aggregation/src/app/app.ts b/examples/angular/aggregation/src/app/app.ts
@@ -101,6 +101,7 @@ export class App {
     data: this.data(),
     meta: { rowSource: this.rowSource() },
     initialState: { pagination: { pageIndex: 0, pageSize: 10 } },
+    // manualAggregation: true, // supply aggregate values yourself instead of calculating them locally
     debugTable: true,
     debugColumns: true,
   }))

diff --git a/examples/angular/basic-inject-table/src/app/app.ts b/examples/angular/basic-inject-table/src/app/app.ts
@@ -5,9 +5,13 @@ import {
   inject,
   signal,
 } from '@angular/core'
-import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'
+import {
+  FlexRender,
+  createColumnHelper,
+  injectTable,
+  tableFeatures,
+} from '@tanstack/angular-table'
 import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
-import type { ColumnDef } from '@tanstack/angular-table'
 
 // This example uses the Angular standalone `injectTable` helper to create a table without the `createTableHook` util.
 
@@ -61,39 +65,35 @@ const defaultData: Array<Person> = [
 // In this case, this will be a basic table with no additional features
 const features = tableFeatures({})
 
-// 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns.
-// Alternatively, check out the createTableHook/createColumnHelper util for an even more type-safe way to define columns.
-const columns: Array<ColumnDef<typeof features, Person>> = [
-  {
-    accessorKey: 'firstName',
+// 4. Create a column helper with the table features and row type
+const columnHelper = createColumnHelper<typeof features, Person>()
+
+// 5. Define the columns for your table with the column helper
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
     header: 'First Name',
     cell: (info) => info.getValue(),
-  },
-  {
-    accessorFn: (row) => row.lastName,
+  }),
+  columnHelper.accessor((row) => row.lastName, {
     id: 'lastName',
     header: () => 'Last Name',
-    cell: (info) => info.getValue<string>(),
-  },
-  {
-    accessorFn: (row) => Number(row.age),
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor((row) => Number(row.age), {
     id: 'age',
     header: () => 'Age',
     cell: (info) => info.renderValue(),
-  },
-  {
-    accessorKey: 'visits',
+  }),
+  columnHelper.accessor('visits', {
     header: () => 'Visits',
-  },
-  {
-    accessorKey: 'status',
+  }),
+  columnHelper.accessor('status', {
     header: 'Status',
-  },
-  {
-    accessorKey: 'progress',
+  }),
+  columnHelper.accessor('progress', {
     header: 'Profile Progress',
-  },
-]
+  }),
+])
 
 @Component({
   selector: 'app-root',
@@ -104,10 +104,10 @@ const columns: Array<ColumnDef<typeof features, Person>> = [
 export class App {
   private readonly injector = inject(Injector)
 
-  // 5. Store data with a stable reference
+  // 6. Store data with a stable reference
   readonly data = signal<Array<Person>>([...defaultData])
 
-  // 6. Create the table instance with required features, columns, and data
+  // 7. Create the table instance with required features, columns, and data
   readonly table = injectTable(() => ({
     key: 'basic-inject-table', // needed for devtools
     debugTable: true,

diff --git a/examples/angular/column-sizing/src/app/app.ts b/examples/angular/column-sizing/src/app/app.ts
@@ -65,6 +65,7 @@ export class App {
     features,
     columns,
     data: this.data(),
+    // defaultColumn: { size: 150, minSize: 50, maxSize: 500 }, // set sizing defaults for every column
     // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render
     // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom
     // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange

diff --git a/examples/angular/expanding/src/app/app.html b/examples/angular/expanding/src/app/app.html
@@ -22,6 +22,32 @@
                   >
                     <div [innerHTML]="header"></div>
                   </ng-container>
+
+                  @if (header.column.getCanFilter()) {
+                    <div>
+                      @if (isNumberColumn(header.column)) {
+                        <input
+                          type="number"
+                          placeholder="Min"
+                          [value]="getNumberFilterValue(header.column, 0)"
+                          (input)="setNumberFilter(header.column, $event, 0)"
+                        />
+                        <input
+                          type="number"
+                          placeholder="Max"
+                          [value]="getNumberFilterValue(header.column, 1)"
+                          (input)="setNumberFilter(header.column, $event, 1)"
+                        />
+                      } @else {
+                        <input
+                          type="text"
+                          placeholder="Search..."
+                          [value]="header.column.getFilterValue() ?? ''"
+                          (input)="setTextFilter(header.column, $event)"
+                        />
+                      }
+                    </div>
+                  }
                 }
               </th>
             }

diff --git a/examples/angular/expanding/src/app/app.ts b/examples/angular/expanding/src/app/app.ts
@@ -1,8 +1,12 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
 import {
   FlexRender,
+  columnFilteringFeature,
   createExpandedRowModel,
+  createFilteredRowModel,
   createPaginatedRowModel,
+  filterFn_inNumberRange,
+  filterFn_includesString,
   flexRenderComponent,
   injectTable,
   rowExpandingFeature,
@@ -17,14 +21,20 @@ import {
   ExpandableHeaderCell,
 } from './expandable-cell/expandable-cell'
 import type { Person } from './makeData'
-import type { ColumnDef, ExpandedState } from '@tanstack/angular-table'
+import type { Column, ColumnDef, ExpandedState } from '@tanstack/angular-table'
 
 export const features = tableFeatures({
+  columnFilteringFeature,
   rowExpandingFeature: rowExpandingFeature,
   rowPaginationFeature: rowPaginationFeature,
   rowSelectionFeature: rowSelectionFeature,
+  filteredRowModel: createFilteredRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
   expandedRowModel: createExpandedRowModel(),
+  filterFns: {
+    includesString: filterFn_includesString,
+    inNumberRange: filterFn_inNumberRange,
+  },
 })
 
 const defaultColumns: Array<ColumnDef<typeof features, Person>> = [
@@ -93,7 +103,11 @@ export class App {
       typeof updater === 'function'
         ? this.expanded.update(updater)
         : this.expanded.set(updater),
-    getSubRows: (row) => row.subRows,
+    getSubRows: (row) => row.subRows, // tell the table where nested rows live
+    // enableRowSelection: row => row.original.age > 18, // enable selection conditionally; default true
+    // enableMultiRowSelection: false, // allow only one selected row at a time; default true
+    // enableSubRowSelection: false, // disable sub-row selection; default true
+    // enableRowRangeSelection: false, // disable shift-click range selection; default true
     // initialState: { expanded: { '0': true } }, // expand rows on first render
     // atoms: { expanded: expandedAtom }, // preferred: own expanded state with an external atom
     // enableExpanding: false, // disable expanding for every row; default true
@@ -103,8 +117,11 @@ export class App {
     // paginateExpandedRows: false, // keep expanded children on their parent page; default true
     // autoResetExpanded: false, // keep expanded rows after page-altering changes; default true
     // autoResetAll: false, // turn off every feature's automatic reset, including expansion
+    // enableFilters: false, // disable all column and global filtering; default true
+    // enableColumnFilters: false, // disable per-column filters; default true
     // filterFromLeafRows: true, // with filtering, keep parents whose descendants match
     // maxLeafRowFilterDepth: 0, // with filtering, only filter root rows
+    // manualFiltering: true, // pass data that is already filtered, for example from a server
     debugTable: true,
   }))
 
@@ -122,6 +139,38 @@ export class App {
     this.table.setPageSize(Number(event.target.value))
   }
 
+  isNumberColumn(column: Column<typeof features, Person>): boolean {
+    const firstValue = this.table
+      .getPreFilteredRowModel()
+      .flatRows[0]?.getValue(column.id)
+    return typeof firstValue === 'number'
+  }
+
+  setTextFilter(column: Column<typeof features, Person>, event: Event): void {
+    column.setFilterValue((event.target as HTMLInputElement).value)
+  }
+
+  getNumberFilterValue(
+    column: Column<typeof features, Person>,
+    index: 0 | 1,
+  ): number | '' {
+    const value = column.getFilterValue() as [number?, number?] | undefined
+    return value?.[index] ?? ''
+  }
+
+  setNumberFilter(
+    column: Column<typeof features, Person>,
+    event: Event,
+    index: 0 | 1,
+  ): void {
+    const value = (event.target as HTMLInputElement).value
+    column.setFilterValue((old: [number?, number?] | undefined) => {
+      const next: [number?, number?] = [...(old ?? [])]
+      next[index] = value === '' ? undefined : Number(value)
+      return next
+    })
+  }
+
   refreshData = () => this.data.set(makeData(100, 5, 3))
   stressTest = () => this.data.set(makeData(10_000, 5, 3))
 }
diff --git a/examples/angular/row-pinning/src/app/app.ts b/examples/angular/row-pinning/src/app/app.ts
@@ -73,7 +73,10 @@ export class App {
     features,
     columns,
     data: this.data(),
-    initialState: { pagination: { pageSize: 20, pageIndex: 0 } },
+    initialState: {
+      pagination: { pageSize: 20, pageIndex: 0 },
+      // rowPinning: { top: ['0'], bottom: ['1'] }, // pin rows on first render
+    },
     state: { expanded: this.expanded(), rowPinning: this.rowPinning() },
     onExpandedChange: (updater: Updater<ExpandedState>) =>
       isFunction(updater)