chore: correct tfeatures usage in examples

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

@@ -102,7 +102,7 @@ export class App {
   }
 
   readonly getCommonPinningStyles = (
-    column: Column<any, Person>,
+    column: Column<typeof features, Person>,
   ): Record<string, any> => {
     const isPinned = column.getIsPinned()
     const isLastLeftPinnedColumn =

examples/angular/filters-fuzzy/src/app/app.ts

@@ -17,7 +17,7 @@ import {
 } from '@tanstack/angular-table'
 import { DebouncedInput } from './debounced-input/debounced-input'
 import { makeData } from './makeData'
-import type { FilterFn, SortFn } from '@tanstack/angular-table'
+import type { FilterFn, RowData, SortFn } from '@tanstack/angular-table'
 import type { RankingInfo } from '@tanstack/match-sorter-utils'
 import type { Person } from './makeData'
 
@@ -31,14 +31,14 @@ const columnHelper = createColumnHelper<typeof features, Person>()
 
 declare module '@tanstack/angular-table' {
   interface FilterFns {
-    fuzzy: FilterFn<typeof features, Person>
+    fuzzy: FilterFn<typeof features, RowData>
   }
   interface FilterMeta {
     itemRank?: RankingInfo
   }
 }
 
-const fuzzyFilter: FilterFn<typeof features, Person> = (
+const fuzzyFilter: FilterFn<typeof features, RowData> = (
   row,
   columnId,
   value,

examples/angular/kitchen-sink/src/app/app.ts

@@ -55,14 +55,14 @@ declare module '@tanstack/angular-table' {
     filterVariant?: 'text' | 'range' | 'select'
   }
   interface FilterFns {
-    fuzzy: FilterFn<typeof stockFeatures, Person>
+    fuzzy: FilterFn<typeof stockFeatures, RowData>
   }
   interface FilterMeta {
     itemRank?: RankingInfo
   }
 }
 
-const fuzzyFilter: FilterFn<typeof stockFeatures, Person> = (
+const fuzzyFilter: FilterFn<typeof stockFeatures, RowData> = (
   row,
   columnId,
   value,

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

@@ -28,7 +28,7 @@ import type { Person } from './makeData'
 import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
 import type { TemplateRef } from '@angular/core'
 
-const features = tableFeatures({
+export const features = tableFeatures({
   columnFilteringFeature,
   columnVisibilityFeature,
   rowPaginationFeature,

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

@@ -1,6 +1,7 @@
 import { Component, input } from '@angular/core'
 import type { OnInit } from '@angular/core'
 import type { Column, RowData, Table } from '@tanstack/angular-table'
+import type { features } from './app.component'
 
 @Component({
   selector: 'app-table-filter',
@@ -37,9 +38,9 @@ import type { Column, RowData, Table } from '@tanstack/angular-table'
   }`,
 })
 export class FilterComponent<T extends RowData> implements OnInit {
-  column = input.required<Column<any, any>>()
+  column = input.required<Column<typeof features, T>>()
 
-  table = input.required<Table<any, T>>()
+  table = input.required<Table<typeof features, T>>()
 
   columnType!: string
 
@@ -50,14 +51,19 @@ export class FilterComponent<T extends RowData> implements OnInit {
   }
 
   getMinValue() {
-    const minValue = this.column().getFilterValue()
+    const minValue = this.column().getFilterValue() as
+      | [string | undefined, string | undefined]
+      | undefined
 
-    return (minValue?.[0] ?? '') as string
+    return minValue?.[0] ?? ''
   }
 
   getMaxValue() {
-    const maxValue = this.column().getFilterValue()
-    return (maxValue?.[1] ?? '') as string
+    const maxValue = this.column().getFilterValue() as
+      | [string | undefined, string | undefined]
+      | undefined
+
+    return maxValue?.[1] ?? ''
   }
 
   updateMinFilterValue(newValue: string): void {

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

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import type { Row, RowData, Table } from '@tanstack/angular-table'
+import type { features } from './app.component'
 
 @Component({
   template: `
@@ -25,7 +26,7 @@ export class TableHeadSelectionComponent<T extends RowData> {
 
   // column = input.required<Column<T, unknown>>()
   // header = input.required<Header<T, unknown>>()
-  table = input.required<Table<any, T>>()
+  table = input.required<Table<typeof features, T>>()
 }
 
 @Component({
@@ -43,5 +44,5 @@ export class TableHeadSelectionComponent<T extends RowData> {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableRowSelectionComponent<T extends RowData> {
-  row = input.required<Row<any, T>>()
+  row = input.required<Row<typeof features, T>>()
 }

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

@@ -1,6 +1,8 @@
 import { Component, computed, input } from '@angular/core'
 import { injectTableContext } from '../table'
 import type { Column } from '@tanstack/angular-table'
+import type { features } from '../table'
+import type { Person } from '../makeData'
 
 @Component({
   selector: 'app-table-filter',
@@ -40,7 +42,7 @@ import type { Column } from '@tanstack/angular-table'
   standalone: true,
 })
 export class TableFilter {
-  readonly column = input.required<Column<any, any, any>>()
+  readonly column = input.required<Column<typeof features, Person, unknown>>()
   readonly table = injectTableContext()
 
   readonly columnType = computed(() => {
@@ -50,14 +52,19 @@ export class TableFilter {
   })
 
   getMinValue() {
-    const minValue = this.column().getFilterValue()
+    const minValue = this.column().getFilterValue() as
+      | [string | undefined, string | undefined]
+      | undefined
 
-    return (minValue?.[0] ?? '') as string
+    return minValue?.[0] ?? ''
   }
 
   getMaxValue() {
-    const maxValue = this.column().getFilterValue()
-    return (maxValue?.[1] ?? '') as string
+    const maxValue = this.column().getFilterValue() as
+      | [string | undefined, string | undefined]
+      | undefined
+
+    return maxValue?.[1] ?? ''
   }
 
   updateMinFilterValue(newValue: string): void {

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

@@ -10,7 +10,7 @@ import {
   tableFeatures,
 } from '@tanstack/angular-table'
 
-const features = tableFeatures({
+export const features = tableFeatures({
   columnFilteringFeature,
   globalFilteringFeature,
   rowPaginationFeature,

examples/angular/sub-components/src/app/app.ts

@@ -16,7 +16,7 @@ import { SubComponent } from './sub-component/sub-component'
 import type { Person } from './makeData'
 import type { ColumnDef, ExpandedState } from '@tanstack/angular-table'
 
-const features = tableFeatures({
+export const features = tableFeatures({
   rowExpandingFeature,
   columnVisibilityFeature,
 })

examples/angular/sub-components/src/app/sub-component/sub-component.ts

@@ -1,6 +1,8 @@
 import { Component, input } from '@angular/core'
 import { JsonPipe } from '@angular/common'
 import type { Row } from '@tanstack/angular-table'
+import type { features } from '../app'
+import type { Person } from '../makeData'
 
 @Component({
   selector: 'app-sub',
@@ -14,5 +16,5 @@ import type { Row } from '@tanstack/angular-table'
   imports: [JsonPipe],
 })
 export class SubComponent {
-  readonly row = input.required<Row<any, any>>()
+  readonly row = input.required<Row<typeof features, Person>>()
 }

examples/lit/composable-tables/src/components/cell-components.ts

@@ -1,19 +1,20 @@
 import { html } from 'lit'
-import type { Cell } from '@tanstack/lit-table'
+import type { Cell, RowData } from '@tanstack/lit-table'
+import type { features } from '../hooks/table'
 
 // Cell components are plain functions that receive the cell instance as their
 // first argument (bound automatically by AppCell in createTableHook).
 // In column definitions, call them as: cell: ({ cell }) => cell.TextCell()
 
-export function TextCell(cell: Cell<any, any, string>) {
+export function TextCell(cell: Cell<typeof features, RowData, string>) {
   return html`<span>${String(cell.getValue() ?? '')}</span>`
 }
 
-export function NumberCell(cell: Cell<any, any, number>) {
+export function NumberCell(cell: Cell<typeof features, RowData, number>) {
   return html`<span>${Number(cell.getValue() ?? 0).toLocaleString()}</span>`
 }
 
-export function StatusCell(cell: Cell<any, any, string>) {
+export function StatusCell(cell: Cell<typeof features, RowData, string>) {
   const status = String(cell.getValue() ?? '')
   const statusClass =
     status === 'single'
@@ -24,7 +25,7 @@ export function StatusCell(cell: Cell<any, any, string>) {
   return html`<span class="status-badge ${statusClass}">${status}</span>`
 }
 
-export function ProgressCell(cell: Cell<any, any, number>) {
+export function ProgressCell(cell: Cell<typeof features, RowData, number>) {
   const value = Number(cell.getValue() ?? 0)
   return html`
     <div class="progress-bar">
@@ -33,7 +34,7 @@ export function ProgressCell(cell: Cell<any, any, number>) {
   `
 }
 
-export function RowActionsCell(cell: Cell<any, any, any>) {
+export function RowActionsCell(cell: Cell<typeof features, RowData, unknown>) {
   const row = cell.row.original as {
     firstName?: string
     name?: string
@@ -48,7 +49,7 @@ export function RowActionsCell(cell: Cell<any, any, any>) {
   `
 }
 
-export function PriceCell(cell: Cell<any, any, number>) {
+export function PriceCell(cell: Cell<typeof features, RowData, number>) {
   const value = Number(cell.getValue() ?? 0)
   return html`<span class="price"
     >$${value.toLocaleString(undefined, {
@@ -58,7 +59,7 @@ export function PriceCell(cell: Cell<any, any, number>) {
   >`
 }
 
-export function CategoryCell(cell: Cell<any, any, string>) {
+export function CategoryCell(cell: Cell<typeof features, RowData, string>) {
   const category = String(cell.getValue() ?? '')
   return html`<span class="category-badge ${category}">${category}</span>`
 }

examples/lit/composable-tables/src/components/header-components.ts

@@ -1,19 +1,24 @@
 import { html, nothing } from 'lit'
-import type { Header } from '@tanstack/lit-table'
+import type { Header, RowData } from '@tanstack/lit-table'
+import type { features } from '../hooks/table'
 
 // Header components are plain functions that receive the header instance as
 // their first argument (bound automatically by AppHeader/AppFooter in createTableHook).
 // In column definitions, call them as: header.SortIndicator()
 
-export function SortIndicator(header: Header<any, any, any>) {
+export function SortIndicator(
+  header: Header<typeof features, RowData, unknown>,
+) {
   const sorted = header.column.getIsSorted()
   if (!sorted) return nothing
   return html`<span class="sort-indicator"
     >${sorted === 'asc' ? '🔼' : '🔽'}</span
   >`
 }
 
-export function ColumnFilter(header: Header<any, any, any>) {
+export function ColumnFilter(
+  header: Header<typeof features, RowData, unknown>,
+) {
   if (!header.column.getCanFilter()) return nothing
   const value = (header.column.getFilterValue() ?? '') as string
   return html`
@@ -29,11 +34,13 @@ export function ColumnFilter(header: Header<any, any, any>) {
   `
 }
 
-export function FooterColumnId(header: Header<any, any, any>) {
+export function FooterColumnId(
+  header: Header<typeof features, RowData, unknown>,
+) {
   return html`<span>${header.column.id}</span>`
 }
 
-export function FooterSum(header: Header<any, any, any>) {
+export function FooterSum(header: Header<typeof features, RowData, unknown>) {
   const table = header.getContext().table
   const rows = table.getFilteredRowModel().rows
   const sum = rows.reduce((acc, row) => {

examples/lit/composable-tables/src/hooks/table.ts

@@ -30,13 +30,15 @@ import {
 // are LitElement custom elements that use useTableContext(this) directly,
 // so they don't need to be registered here as tableComponents.
 
+export const features = tableFeatures({
+  columnFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
 export const { createAppColumnHelper, useAppTable, useTableContext } =
   createTableHook({
-    features: tableFeatures({
-      columnFilteringFeature,
-      rowPaginationFeature,
-      rowSortingFeature,
-    }),
+    features,
     rowModels: {
       sortedRowModel: createSortedRowModel(sortFns),
       filteredRowModel: createFilteredRowModel(filterFns),

examples/lit/filters-fuzzy/src/main.ts

@@ -18,7 +18,7 @@ import {
 } from '@tanstack/lit-table'
 import { compareItems, rankItem } from '@tanstack/match-sorter-utils'
 import { makeData } from './makeData'
-import type { Column, FilterFn, SortFn } from '@tanstack/lit-table'
+import type { Column, FilterFn, RowData, SortFn } from '@tanstack/lit-table'
 import type { RankingInfo } from '@tanstack/match-sorter-utils'
 import type { Person } from './makeData'
 
@@ -31,7 +31,7 @@ const features = tableFeatures({
 
 const columnHelper = createColumnHelper<typeof features, Person>()
 
-const fuzzyFilter: FilterFn<typeof features, Person> = (
+const fuzzyFilter: FilterFn<typeof features, RowData> = (
   row,
   columnId,
   value,
@@ -55,7 +55,7 @@ const fuzzySort: SortFn<typeof features, Person> = (rowA, rowB, columnId) => {
 
 declare module '@tanstack/lit-table' {
   interface FilterFns {
-    fuzzy: FilterFn<typeof features, Person>
+    fuzzy: FilterFn<typeof features, RowData>
   }
   interface FilterMeta {
     itemRank?: RankingInfo

examples/lit/kitchen-sink/src/main.ts

@@ -47,14 +47,14 @@ declare module '@tanstack/lit-table' {
     filterVariant?: 'text' | 'range' | 'select'
   }
   interface FilterFns {
-    fuzzy: FilterFn<typeof stockFeatures, Person>
+    fuzzy: FilterFn<typeof stockFeatures, RowData>
   }
   interface FilterMeta {
     itemRank?: RankingInfo
   }
 }
 
-const fuzzyFilter: FilterFn<typeof stockFeatures, Person> = (
+const fuzzyFilter: FilterFn<typeof stockFeatures, RowData> = (
   row,
   columnId,
   value,

examples/lit/sorting/src/main.ts

@@ -16,7 +16,11 @@ const features = tableFeatures({
   rowSortingFeature,
 })
 
-const sortStatusFn: SortFn<any, any> = (rowA, rowB, _columnId) => {
+const sortStatusFn: SortFn<typeof features, Person> = (
+  rowA,
+  rowB,
+  _columnId,
+) => {
   const statusA = rowA.original.status
   const statusB = rowB.original.status
   const statusOrder = ['single', 'complicated', 'relationship']