diff --git a/examples/angular/column-pinning-sticky/src/app/app.ts b/examples/angular/column-pinning-sticky/src/app/app.ts index 8af14e6301..d26f0271c4 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.ts +++ b/examples/angular/column-pinning-sticky/src/app/app.ts @@ -102,7 +102,7 @@ export class App { } readonly getCommonPinningStyles = ( - column: Column, + column: Column, ): Record => { const isPinned = column.getIsPinned() const isLastLeftPinnedColumn = diff --git a/examples/angular/filters-fuzzy/src/app/app.ts b/examples/angular/filters-fuzzy/src/app/app.ts index ba249fed29..dfe7644314 100644 --- a/examples/angular/filters-fuzzy/src/app/app.ts +++ b/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() declare module '@tanstack/angular-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo } } -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, diff --git a/examples/angular/kitchen-sink/src/app/app.ts b/examples/angular/kitchen-sink/src/app/app.ts index 2f388084b9..a097a1ca45 100644 --- a/examples/angular/kitchen-sink/src/app/app.ts +++ b/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 + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo } } -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, diff --git a/examples/angular/row-selection-signal/src/app/app.component.ts b/examples/angular/row-selection-signal/src/app/app.component.ts index cbd9340378..98b6a18bba 100644 --- a/examples/angular/row-selection-signal/src/app/app.component.ts +++ b/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, diff --git a/examples/angular/row-selection-signal/src/app/filter.ts b/examples/angular/row-selection-signal/src/app/filter.ts index 3a46e301bf..a7146e0fc5 100644 --- a/examples/angular/row-selection-signal/src/app/filter.ts +++ b/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 implements OnInit { - column = input.required>() + column = input.required>() - table = input.required>() + table = input.required>() columnType!: string @@ -50,14 +51,19 @@ export class FilterComponent 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 { diff --git a/examples/angular/row-selection-signal/src/app/selection-column.component.ts b/examples/angular/row-selection-signal/src/app/selection-column.component.ts index 40d16fb880..11ff47b3c7 100644 --- a/examples/angular/row-selection-signal/src/app/selection-column.component.ts +++ b/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 { // column = input.required>() // header = input.required>() - table = input.required>() + table = input.required>() } @Component({ @@ -43,5 +44,5 @@ export class TableHeadSelectionComponent { changeDetection: ChangeDetectionStrategy.OnPush, }) export class TableRowSelectionComponent { - row = input.required>() + row = input.required>() } diff --git a/examples/angular/row-selection/src/app/table-filter/table-filter.ts b/examples/angular/row-selection/src/app/table-filter/table-filter.ts index adf8505a76..7d6ef89c43 100644 --- a/examples/angular/row-selection/src/app/table-filter/table-filter.ts +++ b/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>() + readonly column = input.required>() 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 { diff --git a/examples/angular/row-selection/src/app/table.ts b/examples/angular/row-selection/src/app/table.ts index 658ec3fadf..8111dc4b24 100644 --- a/examples/angular/row-selection/src/app/table.ts +++ b/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, diff --git a/examples/angular/sub-components/src/app/app.ts b/examples/angular/sub-components/src/app/app.ts index 105bf4e99a..a290b69b24 100644 --- a/examples/angular/sub-components/src/app/app.ts +++ b/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, }) diff --git a/examples/angular/sub-components/src/app/sub-component/sub-component.ts b/examples/angular/sub-components/src/app/sub-component/sub-component.ts index cedbd34ada..045ae956ad 100644 --- a/examples/angular/sub-components/src/app/sub-component/sub-component.ts +++ b/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>() + readonly row = input.required>() } diff --git a/examples/lit/composable-tables/src/components/cell-components.ts b/examples/lit/composable-tables/src/components/cell-components.ts index 414bc5e7b1..64d0e07bdb 100644 --- a/examples/lit/composable-tables/src/components/cell-components.ts +++ b/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) { +export function TextCell(cell: Cell) { return html`${String(cell.getValue() ?? '')}` } -export function NumberCell(cell: Cell) { +export function NumberCell(cell: Cell) { return html`${Number(cell.getValue() ?? 0).toLocaleString()}` } -export function StatusCell(cell: Cell) { +export function StatusCell(cell: Cell) { const status = String(cell.getValue() ?? '') const statusClass = status === 'single' @@ -24,7 +25,7 @@ export function StatusCell(cell: Cell) { return html`${status}` } -export function ProgressCell(cell: Cell) { +export function ProgressCell(cell: Cell) { const value = Number(cell.getValue() ?? 0) return html`
@@ -33,7 +34,7 @@ export function ProgressCell(cell: Cell) { ` } -export function RowActionsCell(cell: Cell) { +export function RowActionsCell(cell: Cell) { const row = cell.row.original as { firstName?: string name?: string @@ -48,7 +49,7 @@ export function RowActionsCell(cell: Cell) { ` } -export function PriceCell(cell: Cell) { +export function PriceCell(cell: Cell) { const value = Number(cell.getValue() ?? 0) return html`$${value.toLocaleString(undefined, { @@ -58,7 +59,7 @@ export function PriceCell(cell: Cell) { >` } -export function CategoryCell(cell: Cell) { +export function CategoryCell(cell: Cell) { const category = String(cell.getValue() ?? '') return html`${category}` } diff --git a/examples/lit/composable-tables/src/components/header-components.ts b/examples/lit/composable-tables/src/components/header-components.ts index f68508b614..46f6bfce66 100644 --- a/examples/lit/composable-tables/src/components/header-components.ts +++ b/examples/lit/composable-tables/src/components/header-components.ts @@ -1,11 +1,14 @@ 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) { +export function SortIndicator( + header: Header, +) { const sorted = header.column.getIsSorted() if (!sorted) return nothing return html`) { >` } -export function ColumnFilter(header: Header) { +export function ColumnFilter( + header: Header, +) { if (!header.column.getCanFilter()) return nothing const value = (header.column.getFilterValue() ?? '') as string return html` @@ -29,11 +34,13 @@ export function ColumnFilter(header: Header) { ` } -export function FooterColumnId(header: Header) { +export function FooterColumnId( + header: Header, +) { return html`${header.column.id}` } -export function FooterSum(header: Header) { +export function FooterSum(header: Header) { const table = header.getContext().table const rows = table.getFilteredRowModel().rows const sum = rows.reduce((acc, row) => { diff --git a/examples/lit/composable-tables/src/hooks/table.ts b/examples/lit/composable-tables/src/hooks/table.ts index 175a2ebcd2..1021b8a596 100644 --- a/examples/lit/composable-tables/src/hooks/table.ts +++ b/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), diff --git a/examples/lit/filters-fuzzy/src/main.ts b/examples/lit/filters-fuzzy/src/main.ts index 75b746f011..00950f7065 100644 --- a/examples/lit/filters-fuzzy/src/main.ts +++ b/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() -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, @@ -55,7 +55,7 @@ const fuzzySort: SortFn = (rowA, rowB, columnId) => { declare module '@tanstack/lit-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo diff --git a/examples/lit/kitchen-sink/src/main.ts b/examples/lit/kitchen-sink/src/main.ts index 16d649cc69..195b5e247c 100644 --- a/examples/lit/kitchen-sink/src/main.ts +++ b/examples/lit/kitchen-sink/src/main.ts @@ -47,14 +47,14 @@ declare module '@tanstack/lit-table' { filterVariant?: 'text' | 'range' | 'select' } interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo } } -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, diff --git a/examples/lit/sorting/src/main.ts b/examples/lit/sorting/src/main.ts index 000d74447e..4726387b10 100644 --- a/examples/lit/sorting/src/main.ts +++ b/examples/lit/sorting/src/main.ts @@ -16,7 +16,11 @@ const features = tableFeatures({ rowSortingFeature, }) -const sortStatusFn: SortFn = (rowA, rowB, _columnId) => { +const sortStatusFn: SortFn = ( + rowA, + rowB, + _columnId, +) => { const statusA = rowA.original.status const statusB = rowB.original.status const statusOrder = ['single', 'complicated', 'relationship'] diff --git a/examples/preact/filters-fuzzy/src/main.tsx b/examples/preact/filters-fuzzy/src/main.tsx index 5676f488ab..6b18822da3 100644 --- a/examples/preact/filters-fuzzy/src/main.tsx +++ b/examples/preact/filters-fuzzy/src/main.tsx @@ -20,7 +20,7 @@ import { compareItems, rankItem } from '@tanstack/match-sorter-utils' import { makeData } from './makeData' import type { JSX } from 'preact' import type { Person } from './makeData' -import type { Column, FilterFn, SortFn } from '@tanstack/preact-table' +import type { Column, FilterFn, RowData, SortFn } from '@tanstack/preact-table' // A TanStack fork of Kent C. Dodds' match-sorter library that provides ranking information import type { RankingInfo } from '@tanstack/match-sorter-utils' @@ -35,7 +35,7 @@ const features = tableFeatures({ const columnHelper = createColumnHelper() // Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils) -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, @@ -73,7 +73,7 @@ const fuzzySort: SortFn = (rowA, rowB, columnId) => { declare module '@tanstack/preact-table' { // add fuzzy filter to the filterFns interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo diff --git a/examples/preact/kitchen-sink/src/main.tsx b/examples/preact/kitchen-sink/src/main.tsx index 30e07f0ff4..7836989c7f 100644 --- a/examples/preact/kitchen-sink/src/main.tsx +++ b/examples/preact/kitchen-sink/src/main.tsx @@ -50,14 +50,14 @@ declare module '@tanstack/preact-table' { filterVariant?: 'text' | 'range' | 'select' } interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo } } -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, diff --git a/examples/preact/sorting/src/main.tsx b/examples/preact/sorting/src/main.tsx index 2fcce6667b..d9ded9b4ce 100644 --- a/examples/preact/sorting/src/main.tsx +++ b/examples/preact/sorting/src/main.tsx @@ -18,7 +18,11 @@ const features = tableFeatures({ const columnHelper = createColumnHelper() // custom sorting logic for one of our enum columns -const sortStatusFn: SortFn = (rowA, rowB, _columnId) => { +const sortStatusFn: SortFn = ( + rowA, + rowB, + _columnId, +) => { const statusA = rowA.original.status const statusB = rowB.original.status const statusOrder = ['single', 'complicated', 'relationship'] diff --git a/examples/react/filters-fuzzy/src/main.tsx b/examples/react/filters-fuzzy/src/main.tsx index 773643cd1a..873a54ed54 100644 --- a/examples/react/filters-fuzzy/src/main.tsx +++ b/examples/react/filters-fuzzy/src/main.tsx @@ -19,7 +19,7 @@ import { useDebouncedCallback } from '@tanstack/react-pacer/debouncer' import { compareItems, rankItem } from '@tanstack/match-sorter-utils' import { makeData } from './makeData' import type { Person } from './makeData' -import type { Column, FilterFn, SortFn } from '@tanstack/react-table' +import type { Column, FilterFn, RowData, SortFn } from '@tanstack/react-table' // A TanStack fork of Kent C. Dodds' match-sorter library that provides ranking information import type { RankingInfo } from '@tanstack/match-sorter-utils' @@ -34,7 +34,7 @@ const features = tableFeatures({ const columnHelper = createColumnHelper() // Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils) -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, @@ -72,7 +72,7 @@ const fuzzySort: SortFn = (rowA, rowB, columnId) => { declare module '@tanstack/react-table' { // add fuzzy filter to the filterFns interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo diff --git a/examples/react/kitchen-sink-hero-ui/src/lib/data-table.ts b/examples/react/kitchen-sink-hero-ui/src/lib/data-table.ts index 5ef00ce418..0cd01d2948 100644 --- a/examples/react/kitchen-sink-hero-ui/src/lib/data-table.ts +++ b/examples/react/kitchen-sink-hero-ui/src/lib/data-table.ts @@ -13,48 +13,27 @@ import type { ExtendedColumnFilter, FilterOperator, JoinOperator, - TableFilterFeatures, } from '@/types' import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { - FilterFn, - Row, - RowData, - TableFeatures, -} from '@tanstack/react-table' - -/** - * Fuzzy filter using @tanstack/match-sorter-utils. Used as the global filter - * (`globalFilterFn: 'fuzzy'`) in the kitchen-sink example so the toolbar - * search ranks rows by best match across all columns. - * - * Mirrors the canonical pattern from `examples/react/filters-fuzzy`. Written - * as a plain function (not a typed const) so it stays generic over TFeatures - * and TData and can be slotted into any `createFilteredRowModel({...})` - * registration without narrowing inference. - */ -export function fuzzyFilter< - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, - columnId: string, - value: string, - addMeta?: (meta: { itemRank: RankingInfo }) => void, -): boolean { - // Rank the item +import type { FilterFn, RowData } from '@tanstack/react-table' +import type { features } from '../main' + +export const fuzzyFilter: FilterFn = ( + row, + columnId, + value, + addMeta, +) => { const itemRank = rankItem(row.getValue(columnId), value) - // Store the itemRank info so a fuzzy sort function (if any) could reuse it addMeta?.({ itemRank }) - // Return whether the item should be filtered in/out return itemRank.passed } declare module '@tanstack/react-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -91,11 +70,8 @@ function isSameDay(date1: Date, date2: Date): boolean { return date1Str === date2Str } -const filterFn_enhancedEquals: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedEquals: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -119,11 +95,8 @@ const filterFn_enhancedEquals: FilterFn = < filterFn_enhancedEquals.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -143,11 +116,8 @@ const filterFn_enhancedGreaterThan: FilterFn = < filterFn_enhancedGreaterThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -168,11 +138,8 @@ const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < filterFn_enhancedGreaterThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -192,11 +159,8 @@ const filterFn_enhancedLessThan: FilterFn = < filterFn_enhancedLessThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -217,11 +181,8 @@ const filterFn_enhancedLessThanOrEqualTo: FilterFn = < filterFn_enhancedLessThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_startsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_startsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -231,11 +192,8 @@ const filterFn_startsWith: FilterFn = < filterFn_startsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_endsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_endsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -245,11 +203,8 @@ const filterFn_endsWith: FilterFn = < filterFn_endsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_isEmpty: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isEmpty: FilterFn = ( + row, columnId: string, ) => { const value = row.getValue(columnId) @@ -263,11 +218,8 @@ const filterFn_isEmpty: FilterFn = < filterFn_isEmpty.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_inBetween: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_inBetween: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -308,11 +260,8 @@ const filterFn_inBetween: FilterFn = < filterFn_inBetween.autoRemove = (val: any) => isFalsy(val) -const filterFn_isRelativeToToday: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isRelativeToToday: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -354,11 +303,8 @@ const filterFn_isRelativeToToday: FilterFn = < filterFn_isRelativeToToday.autoRemove = (val: any) => isFalsy(val) -export const dynamicFilterFn: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, TData>, +export const dynamicFilterFn: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { diff --git a/examples/react/kitchen-sink-hero-ui/src/main.tsx b/examples/react/kitchen-sink-hero-ui/src/main.tsx index a82d004ab5..e2633f2df5 100644 --- a/examples/react/kitchen-sink-hero-ui/src/main.tsx +++ b/examples/react/kitchen-sink-hero-ui/src/main.tsx @@ -109,7 +109,7 @@ declare module '@tanstack/react-table' { } } -const features = tableFeatures({ +export const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, rowSelectionFeature, diff --git a/examples/react/kitchen-sink-mantine/src/lib/data-table.ts b/examples/react/kitchen-sink-mantine/src/lib/data-table.ts index 5ef00ce418..0cd01d2948 100644 --- a/examples/react/kitchen-sink-mantine/src/lib/data-table.ts +++ b/examples/react/kitchen-sink-mantine/src/lib/data-table.ts @@ -13,48 +13,27 @@ import type { ExtendedColumnFilter, FilterOperator, JoinOperator, - TableFilterFeatures, } from '@/types' import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { - FilterFn, - Row, - RowData, - TableFeatures, -} from '@tanstack/react-table' - -/** - * Fuzzy filter using @tanstack/match-sorter-utils. Used as the global filter - * (`globalFilterFn: 'fuzzy'`) in the kitchen-sink example so the toolbar - * search ranks rows by best match across all columns. - * - * Mirrors the canonical pattern from `examples/react/filters-fuzzy`. Written - * as a plain function (not a typed const) so it stays generic over TFeatures - * and TData and can be slotted into any `createFilteredRowModel({...})` - * registration without narrowing inference. - */ -export function fuzzyFilter< - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, - columnId: string, - value: string, - addMeta?: (meta: { itemRank: RankingInfo }) => void, -): boolean { - // Rank the item +import type { FilterFn, RowData } from '@tanstack/react-table' +import type { features } from '../main' + +export const fuzzyFilter: FilterFn = ( + row, + columnId, + value, + addMeta, +) => { const itemRank = rankItem(row.getValue(columnId), value) - // Store the itemRank info so a fuzzy sort function (if any) could reuse it addMeta?.({ itemRank }) - // Return whether the item should be filtered in/out return itemRank.passed } declare module '@tanstack/react-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -91,11 +70,8 @@ function isSameDay(date1: Date, date2: Date): boolean { return date1Str === date2Str } -const filterFn_enhancedEquals: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedEquals: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -119,11 +95,8 @@ const filterFn_enhancedEquals: FilterFn = < filterFn_enhancedEquals.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -143,11 +116,8 @@ const filterFn_enhancedGreaterThan: FilterFn = < filterFn_enhancedGreaterThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -168,11 +138,8 @@ const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < filterFn_enhancedGreaterThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -192,11 +159,8 @@ const filterFn_enhancedLessThan: FilterFn = < filterFn_enhancedLessThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -217,11 +181,8 @@ const filterFn_enhancedLessThanOrEqualTo: FilterFn = < filterFn_enhancedLessThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_startsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_startsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -231,11 +192,8 @@ const filterFn_startsWith: FilterFn = < filterFn_startsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_endsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_endsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -245,11 +203,8 @@ const filterFn_endsWith: FilterFn = < filterFn_endsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_isEmpty: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isEmpty: FilterFn = ( + row, columnId: string, ) => { const value = row.getValue(columnId) @@ -263,11 +218,8 @@ const filterFn_isEmpty: FilterFn = < filterFn_isEmpty.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_inBetween: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_inBetween: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -308,11 +260,8 @@ const filterFn_inBetween: FilterFn = < filterFn_inBetween.autoRemove = (val: any) => isFalsy(val) -const filterFn_isRelativeToToday: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isRelativeToToday: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -354,11 +303,8 @@ const filterFn_isRelativeToToday: FilterFn = < filterFn_isRelativeToToday.autoRemove = (val: any) => isFalsy(val) -export const dynamicFilterFn: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, TData>, +export const dynamicFilterFn: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { diff --git a/examples/react/kitchen-sink-mantine/src/main.tsx b/examples/react/kitchen-sink-mantine/src/main.tsx index 15b13b1915..98e87c4084 100644 --- a/examples/react/kitchen-sink-mantine/src/main.tsx +++ b/examples/react/kitchen-sink-mantine/src/main.tsx @@ -142,7 +142,7 @@ declare module '@tanstack/react-table' { } } -const features = tableFeatures({ +export const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, rowSelectionFeature, diff --git a/examples/react/kitchen-sink-material-ui/src/lib/data-table.ts b/examples/react/kitchen-sink-material-ui/src/lib/data-table.ts index 5ef00ce418..0cd01d2948 100644 --- a/examples/react/kitchen-sink-material-ui/src/lib/data-table.ts +++ b/examples/react/kitchen-sink-material-ui/src/lib/data-table.ts @@ -13,48 +13,27 @@ import type { ExtendedColumnFilter, FilterOperator, JoinOperator, - TableFilterFeatures, } from '@/types' import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { - FilterFn, - Row, - RowData, - TableFeatures, -} from '@tanstack/react-table' - -/** - * Fuzzy filter using @tanstack/match-sorter-utils. Used as the global filter - * (`globalFilterFn: 'fuzzy'`) in the kitchen-sink example so the toolbar - * search ranks rows by best match across all columns. - * - * Mirrors the canonical pattern from `examples/react/filters-fuzzy`. Written - * as a plain function (not a typed const) so it stays generic over TFeatures - * and TData and can be slotted into any `createFilteredRowModel({...})` - * registration without narrowing inference. - */ -export function fuzzyFilter< - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, - columnId: string, - value: string, - addMeta?: (meta: { itemRank: RankingInfo }) => void, -): boolean { - // Rank the item +import type { FilterFn, RowData } from '@tanstack/react-table' +import type { features } from '../main' + +export const fuzzyFilter: FilterFn = ( + row, + columnId, + value, + addMeta, +) => { const itemRank = rankItem(row.getValue(columnId), value) - // Store the itemRank info so a fuzzy sort function (if any) could reuse it addMeta?.({ itemRank }) - // Return whether the item should be filtered in/out return itemRank.passed } declare module '@tanstack/react-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -91,11 +70,8 @@ function isSameDay(date1: Date, date2: Date): boolean { return date1Str === date2Str } -const filterFn_enhancedEquals: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedEquals: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -119,11 +95,8 @@ const filterFn_enhancedEquals: FilterFn = < filterFn_enhancedEquals.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -143,11 +116,8 @@ const filterFn_enhancedGreaterThan: FilterFn = < filterFn_enhancedGreaterThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -168,11 +138,8 @@ const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < filterFn_enhancedGreaterThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -192,11 +159,8 @@ const filterFn_enhancedLessThan: FilterFn = < filterFn_enhancedLessThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -217,11 +181,8 @@ const filterFn_enhancedLessThanOrEqualTo: FilterFn = < filterFn_enhancedLessThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_startsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_startsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -231,11 +192,8 @@ const filterFn_startsWith: FilterFn = < filterFn_startsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_endsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_endsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -245,11 +203,8 @@ const filterFn_endsWith: FilterFn = < filterFn_endsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_isEmpty: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isEmpty: FilterFn = ( + row, columnId: string, ) => { const value = row.getValue(columnId) @@ -263,11 +218,8 @@ const filterFn_isEmpty: FilterFn = < filterFn_isEmpty.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_inBetween: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_inBetween: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -308,11 +260,8 @@ const filterFn_inBetween: FilterFn = < filterFn_inBetween.autoRemove = (val: any) => isFalsy(val) -const filterFn_isRelativeToToday: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isRelativeToToday: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -354,11 +303,8 @@ const filterFn_isRelativeToToday: FilterFn = < filterFn_isRelativeToToday.autoRemove = (val: any) => isFalsy(val) -export const dynamicFilterFn: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, TData>, +export const dynamicFilterFn: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { diff --git a/examples/react/kitchen-sink-material-ui/src/main.tsx b/examples/react/kitchen-sink-material-ui/src/main.tsx index eef5cb2e2b..492728fd12 100644 --- a/examples/react/kitchen-sink-material-ui/src/main.tsx +++ b/examples/react/kitchen-sink-material-ui/src/main.tsx @@ -147,7 +147,7 @@ declare module '@tanstack/react-table' { } } -const features = tableFeatures({ +export const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, rowSelectionFeature, diff --git a/examples/react/kitchen-sink-react-aria/src/lib/data-table.ts b/examples/react/kitchen-sink-react-aria/src/lib/data-table.ts index 5ef00ce418..0cd01d2948 100644 --- a/examples/react/kitchen-sink-react-aria/src/lib/data-table.ts +++ b/examples/react/kitchen-sink-react-aria/src/lib/data-table.ts @@ -13,48 +13,27 @@ import type { ExtendedColumnFilter, FilterOperator, JoinOperator, - TableFilterFeatures, } from '@/types' import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { - FilterFn, - Row, - RowData, - TableFeatures, -} from '@tanstack/react-table' - -/** - * Fuzzy filter using @tanstack/match-sorter-utils. Used as the global filter - * (`globalFilterFn: 'fuzzy'`) in the kitchen-sink example so the toolbar - * search ranks rows by best match across all columns. - * - * Mirrors the canonical pattern from `examples/react/filters-fuzzy`. Written - * as a plain function (not a typed const) so it stays generic over TFeatures - * and TData and can be slotted into any `createFilteredRowModel({...})` - * registration without narrowing inference. - */ -export function fuzzyFilter< - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, - columnId: string, - value: string, - addMeta?: (meta: { itemRank: RankingInfo }) => void, -): boolean { - // Rank the item +import type { FilterFn, RowData } from '@tanstack/react-table' +import type { features } from '../main' + +export const fuzzyFilter: FilterFn = ( + row, + columnId, + value, + addMeta, +) => { const itemRank = rankItem(row.getValue(columnId), value) - // Store the itemRank info so a fuzzy sort function (if any) could reuse it addMeta?.({ itemRank }) - // Return whether the item should be filtered in/out return itemRank.passed } declare module '@tanstack/react-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -91,11 +70,8 @@ function isSameDay(date1: Date, date2: Date): boolean { return date1Str === date2Str } -const filterFn_enhancedEquals: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedEquals: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -119,11 +95,8 @@ const filterFn_enhancedEquals: FilterFn = < filterFn_enhancedEquals.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -143,11 +116,8 @@ const filterFn_enhancedGreaterThan: FilterFn = < filterFn_enhancedGreaterThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -168,11 +138,8 @@ const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < filterFn_enhancedGreaterThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -192,11 +159,8 @@ const filterFn_enhancedLessThan: FilterFn = < filterFn_enhancedLessThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -217,11 +181,8 @@ const filterFn_enhancedLessThanOrEqualTo: FilterFn = < filterFn_enhancedLessThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_startsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_startsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -231,11 +192,8 @@ const filterFn_startsWith: FilterFn = < filterFn_startsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_endsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_endsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -245,11 +203,8 @@ const filterFn_endsWith: FilterFn = < filterFn_endsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_isEmpty: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isEmpty: FilterFn = ( + row, columnId: string, ) => { const value = row.getValue(columnId) @@ -263,11 +218,8 @@ const filterFn_isEmpty: FilterFn = < filterFn_isEmpty.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_inBetween: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_inBetween: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -308,11 +260,8 @@ const filterFn_inBetween: FilterFn = < filterFn_inBetween.autoRemove = (val: any) => isFalsy(val) -const filterFn_isRelativeToToday: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isRelativeToToday: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -354,11 +303,8 @@ const filterFn_isRelativeToToday: FilterFn = < filterFn_isRelativeToToday.autoRemove = (val: any) => isFalsy(val) -export const dynamicFilterFn: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, TData>, +export const dynamicFilterFn: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { diff --git a/examples/react/kitchen-sink-react-aria/src/main.tsx b/examples/react/kitchen-sink-react-aria/src/main.tsx index e48c1aed3e..1b1f6f7f36 100644 --- a/examples/react/kitchen-sink-react-aria/src/main.tsx +++ b/examples/react/kitchen-sink-react-aria/src/main.tsx @@ -116,7 +116,7 @@ declare module '@tanstack/react-table' { } } -const features = tableFeatures({ +export const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, rowSelectionFeature, diff --git a/examples/react/kitchen-sink-shadcn-base/src/lib/data-table.ts b/examples/react/kitchen-sink-shadcn-base/src/lib/data-table.ts index 5ef00ce418..0cd01d2948 100644 --- a/examples/react/kitchen-sink-shadcn-base/src/lib/data-table.ts +++ b/examples/react/kitchen-sink-shadcn-base/src/lib/data-table.ts @@ -13,48 +13,27 @@ import type { ExtendedColumnFilter, FilterOperator, JoinOperator, - TableFilterFeatures, } from '@/types' import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { - FilterFn, - Row, - RowData, - TableFeatures, -} from '@tanstack/react-table' - -/** - * Fuzzy filter using @tanstack/match-sorter-utils. Used as the global filter - * (`globalFilterFn: 'fuzzy'`) in the kitchen-sink example so the toolbar - * search ranks rows by best match across all columns. - * - * Mirrors the canonical pattern from `examples/react/filters-fuzzy`. Written - * as a plain function (not a typed const) so it stays generic over TFeatures - * and TData and can be slotted into any `createFilteredRowModel({...})` - * registration without narrowing inference. - */ -export function fuzzyFilter< - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, - columnId: string, - value: string, - addMeta?: (meta: { itemRank: RankingInfo }) => void, -): boolean { - // Rank the item +import type { FilterFn, RowData } from '@tanstack/react-table' +import type { features } from '../main' + +export const fuzzyFilter: FilterFn = ( + row, + columnId, + value, + addMeta, +) => { const itemRank = rankItem(row.getValue(columnId), value) - // Store the itemRank info so a fuzzy sort function (if any) could reuse it addMeta?.({ itemRank }) - // Return whether the item should be filtered in/out return itemRank.passed } declare module '@tanstack/react-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -91,11 +70,8 @@ function isSameDay(date1: Date, date2: Date): boolean { return date1Str === date2Str } -const filterFn_enhancedEquals: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedEquals: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -119,11 +95,8 @@ const filterFn_enhancedEquals: FilterFn = < filterFn_enhancedEquals.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -143,11 +116,8 @@ const filterFn_enhancedGreaterThan: FilterFn = < filterFn_enhancedGreaterThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -168,11 +138,8 @@ const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < filterFn_enhancedGreaterThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -192,11 +159,8 @@ const filterFn_enhancedLessThan: FilterFn = < filterFn_enhancedLessThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -217,11 +181,8 @@ const filterFn_enhancedLessThanOrEqualTo: FilterFn = < filterFn_enhancedLessThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_startsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_startsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -231,11 +192,8 @@ const filterFn_startsWith: FilterFn = < filterFn_startsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_endsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_endsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -245,11 +203,8 @@ const filterFn_endsWith: FilterFn = < filterFn_endsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_isEmpty: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isEmpty: FilterFn = ( + row, columnId: string, ) => { const value = row.getValue(columnId) @@ -263,11 +218,8 @@ const filterFn_isEmpty: FilterFn = < filterFn_isEmpty.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_inBetween: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_inBetween: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -308,11 +260,8 @@ const filterFn_inBetween: FilterFn = < filterFn_inBetween.autoRemove = (val: any) => isFalsy(val) -const filterFn_isRelativeToToday: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isRelativeToToday: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -354,11 +303,8 @@ const filterFn_isRelativeToToday: FilterFn = < filterFn_isRelativeToToday.autoRemove = (val: any) => isFalsy(val) -export const dynamicFilterFn: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, TData>, +export const dynamicFilterFn: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { diff --git a/examples/react/kitchen-sink-shadcn-base/src/main.tsx b/examples/react/kitchen-sink-shadcn-base/src/main.tsx index 4b40d61e2c..5345ab1c6d 100644 --- a/examples/react/kitchen-sink-shadcn-base/src/main.tsx +++ b/examples/react/kitchen-sink-shadcn-base/src/main.tsx @@ -111,7 +111,7 @@ declare module '@tanstack/react-table' { } } -const features = tableFeatures({ +export const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, rowSelectionFeature, diff --git a/examples/react/kitchen-sink-shadcn-radix/src/lib/data-table.ts b/examples/react/kitchen-sink-shadcn-radix/src/lib/data-table.ts index 5ef00ce418..0cd01d2948 100644 --- a/examples/react/kitchen-sink-shadcn-radix/src/lib/data-table.ts +++ b/examples/react/kitchen-sink-shadcn-radix/src/lib/data-table.ts @@ -13,48 +13,27 @@ import type { ExtendedColumnFilter, FilterOperator, JoinOperator, - TableFilterFeatures, } from '@/types' import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { - FilterFn, - Row, - RowData, - TableFeatures, -} from '@tanstack/react-table' - -/** - * Fuzzy filter using @tanstack/match-sorter-utils. Used as the global filter - * (`globalFilterFn: 'fuzzy'`) in the kitchen-sink example so the toolbar - * search ranks rows by best match across all columns. - * - * Mirrors the canonical pattern from `examples/react/filters-fuzzy`. Written - * as a plain function (not a typed const) so it stays generic over TFeatures - * and TData and can be slotted into any `createFilteredRowModel({...})` - * registration without narrowing inference. - */ -export function fuzzyFilter< - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, - columnId: string, - value: string, - addMeta?: (meta: { itemRank: RankingInfo }) => void, -): boolean { - // Rank the item +import type { FilterFn, RowData } from '@tanstack/react-table' +import type { features } from '../main' + +export const fuzzyFilter: FilterFn = ( + row, + columnId, + value, + addMeta, +) => { const itemRank = rankItem(row.getValue(columnId), value) - // Store the itemRank info so a fuzzy sort function (if any) could reuse it addMeta?.({ itemRank }) - // Return whether the item should be filtered in/out return itemRank.passed } declare module '@tanstack/react-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -91,11 +70,8 @@ function isSameDay(date1: Date, date2: Date): boolean { return date1Str === date2Str } -const filterFn_enhancedEquals: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedEquals: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -119,11 +95,8 @@ const filterFn_enhancedEquals: FilterFn = < filterFn_enhancedEquals.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -143,11 +116,8 @@ const filterFn_enhancedGreaterThan: FilterFn = < filterFn_enhancedGreaterThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -168,11 +138,8 @@ const filterFn_enhancedGreaterThanOrEqualTo: FilterFn = < filterFn_enhancedGreaterThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThan: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThan: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -192,11 +159,8 @@ const filterFn_enhancedLessThan: FilterFn = < filterFn_enhancedLessThan.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_enhancedLessThanOrEqualTo: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_enhancedLessThanOrEqualTo: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -217,11 +181,8 @@ const filterFn_enhancedLessThanOrEqualTo: FilterFn = < filterFn_enhancedLessThanOrEqualTo.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_startsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_startsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -231,11 +192,8 @@ const filterFn_startsWith: FilterFn = < filterFn_startsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_endsWith: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_endsWith: FilterFn = ( + row, columnId: string, filterValue: string, ) => { @@ -245,11 +203,8 @@ const filterFn_endsWith: FilterFn = < filterFn_endsWith.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_isEmpty: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isEmpty: FilterFn = ( + row, columnId: string, ) => { const value = row.getValue(columnId) @@ -263,11 +218,8 @@ const filterFn_isEmpty: FilterFn = < filterFn_isEmpty.resolveFilterValue = (val: any) => isFalsy(val) -const filterFn_inBetween: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_inBetween: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -308,11 +260,8 @@ const filterFn_inBetween: FilterFn = < filterFn_inBetween.autoRemove = (val: any) => isFalsy(val) -const filterFn_isRelativeToToday: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, +const filterFn_isRelativeToToday: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { @@ -354,11 +303,8 @@ const filterFn_isRelativeToToday: FilterFn = < filterFn_isRelativeToToday.autoRemove = (val: any) => isFalsy(val) -export const dynamicFilterFn: FilterFn = < - TFeatures extends TableFeatures, - TData extends RowData, ->( - row: Row, TData>, +export const dynamicFilterFn: FilterFn = ( + row, columnId: string, filterValue: unknown, ) => { diff --git a/examples/react/kitchen-sink-shadcn-radix/src/main.tsx b/examples/react/kitchen-sink-shadcn-radix/src/main.tsx index d12bd81d2e..25a1dac110 100644 --- a/examples/react/kitchen-sink-shadcn-radix/src/main.tsx +++ b/examples/react/kitchen-sink-shadcn-radix/src/main.tsx @@ -111,7 +111,7 @@ declare module '@tanstack/react-table' { } } -const features = tableFeatures({ +export const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, rowSelectionFeature, diff --git a/examples/react/kitchen-sink/src/main.tsx b/examples/react/kitchen-sink/src/main.tsx index 8640445444..9fbb4eae1c 100644 --- a/examples/react/kitchen-sink/src/main.tsx +++ b/examples/react/kitchen-sink/src/main.tsx @@ -74,7 +74,7 @@ declare module '@tanstack/react-table' { filterVariant?: 'text' | 'range' | 'select' } interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo @@ -85,7 +85,7 @@ declare module '@tanstack/react-table' { // Custom fuzzy filter / sort (from filters-fuzzy example) // ===================================================================== -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx index b76c821fdd..edebb694af 100644 --- a/examples/react/sorting/src/main.tsx +++ b/examples/react/sorting/src/main.tsx @@ -20,7 +20,11 @@ const features = tableFeatures({ const columnHelper = createColumnHelper() // custom sorting logic for one of our enum columns -const sortStatusFn: SortFn = (rowA, rowB, _columnId) => { +const sortStatusFn: SortFn = ( + rowA, + rowB, + _columnId, +) => { const statusA = rowA.original.status const statusB = rowB.original.status const statusOrder = ['single', 'complicated', 'relationship'] diff --git a/examples/react/virtualized-columns/src/main.tsx b/examples/react/virtualized-columns/src/main.tsx index 598e5d6c74..cd9480ad6b 100644 --- a/examples/react/virtualized-columns/src/main.tsx +++ b/examples/react/virtualized-columns/src/main.tsx @@ -206,7 +206,7 @@ function TableHead({ interface TableHeadRowProps { columnVirtualizer: Virtualizer - headerGroup: HeaderGroup + headerGroup: HeaderGroup virtualPaddingLeft: number | undefined virtualPaddingRight: number | undefined table: ReactTable @@ -331,7 +331,7 @@ function TableBody({ interface TableBodyRowProps { columnVirtualizer: Virtualizer - row: Row + row: Row rowVirtualizer: Virtualizer virtualPaddingLeft: number | undefined virtualPaddingRight: number | undefined @@ -379,7 +379,7 @@ function TableBodyRow({ } interface TableBodyCellProps { - cell: Cell + cell: Cell table: ReactTable } diff --git a/examples/react/with-tanstack-router/src/utils/userColumns.tsx b/examples/react/with-tanstack-router/src/utils/userColumns.tsx index 897ca8c519..c6ce1ab13c 100644 --- a/examples/react/with-tanstack-router/src/utils/userColumns.tsx +++ b/examples/react/with-tanstack-router/src/utils/userColumns.tsx @@ -1,6 +1,7 @@ import { createColumnHelper } from '@tanstack/react-table' import type { CellData, RowData, TableFeatures } from '@tanstack/react-table' import type { User } from '../api/user' +import type { features } from '../components/table' declare module '@tanstack/react-table' { interface ColumnMeta< @@ -13,7 +14,7 @@ declare module '@tanstack/react-table' { } } -const columnHelper = createColumnHelper() +const columnHelper = createColumnHelper() export const USER_COLUMNS = columnHelper.columns([ columnHelper.accessor('id', { diff --git a/examples/solid/filters-fuzzy/src/App.tsx b/examples/solid/filters-fuzzy/src/App.tsx index edac551f7a..4355cb0466 100644 --- a/examples/solid/filters-fuzzy/src/App.tsx +++ b/examples/solid/filters-fuzzy/src/App.tsx @@ -16,7 +16,7 @@ import { createDebouncer } from '@tanstack/solid-pacer/debouncer' import { compareItems, rankItem } from '@tanstack/match-sorter-utils' import { For, createEffect, createSignal } from 'solid-js' import { makeData } from './makeData' -import type { Column, FilterFn, SortFn } from '@tanstack/solid-table' +import type { Column, FilterFn, RowData, SortFn } from '@tanstack/solid-table' import type { RankingInfo } from '@tanstack/match-sorter-utils' import type { Person } from './makeData' @@ -29,7 +29,7 @@ const features = tableFeatures({ const columnHelper = createColumnHelper() -const fuzzyFilter: FilterFn = ( +const fuzzyFilter: FilterFn = ( row, columnId, value, @@ -54,7 +54,7 @@ const fuzzySort: SortFn = (rowA, rowB, columnId) => { declare module '@tanstack/solid-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo diff --git a/examples/solid/kitchen-sink/src/App.tsx b/examples/solid/kitchen-sink/src/App.tsx index fbddc373a3..a9bd717413 100644 --- a/examples/solid/kitchen-sink/src/App.tsx +++ b/examples/solid/kitchen-sink/src/App.tsx @@ -48,7 +48,7 @@ declare module '@tanstack/solid-table' { filterVariant?: 'text' | 'range' | 'select' } interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank?: RankingInfo diff --git a/examples/solid/with-tanstack-router/src/utils/userColumns.tsx b/examples/solid/with-tanstack-router/src/utils/userColumns.tsx index e2b7614be0..c5a37b4544 100644 --- a/examples/solid/with-tanstack-router/src/utils/userColumns.tsx +++ b/examples/solid/with-tanstack-router/src/utils/userColumns.tsx @@ -5,6 +5,7 @@ import type { TableFeatures, } from '@tanstack/solid-table' import type { User } from '../api/user' +import type { features } from '../components/table' declare module '@tanstack/solid-table' { interface ColumnMeta< @@ -17,7 +18,7 @@ declare module '@tanstack/solid-table' { } } -export const USER_COLUMNS: Array> = [ +export const USER_COLUMNS: Array> = [ { accessorKey: 'id', header: () => ID, diff --git a/examples/svelte/filtering/src/App.svelte b/examples/svelte/filtering/src/App.svelte index ec34f90012..773ebd6d31 100644 --- a/examples/svelte/filtering/src/App.svelte +++ b/examples/svelte/filtering/src/App.svelte @@ -2,8 +2,6 @@ import type { ColumnDef } from '@tanstack/svelte-table' import { FlexRender, - columnFacetingFeature, - columnFilteringFeature, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, @@ -11,22 +9,13 @@ createPaginatedRowModel, createTable, filterFns, - globalFilteringFeature, - rowPaginationFeature, - tableFeatures, } from '@tanstack/svelte-table' import DebouncedInput from './DebouncedInput.svelte' import ColumnFilter from './ColumnFilter.svelte' import './index.css' + import { features } from './features' import { makeData, type Person } from './makeData' - const features = tableFeatures({ - columnFilteringFeature, - globalFilteringFeature, - columnFacetingFeature, - rowPaginationFeature, - }) - const columns: Array> = [ { header: 'Name', diff --git a/examples/svelte/filtering/src/ColumnFilter.svelte b/examples/svelte/filtering/src/ColumnFilter.svelte index a9633243ae..4d26cd4ff0 100644 --- a/examples/svelte/filtering/src/ColumnFilter.svelte +++ b/examples/svelte/filtering/src/ColumnFilter.svelte @@ -1,5 +1,6 @@