@@ -15,11 +15,15 @@ import {
1515 createFilteredRowModel ,
1616 createPaginatedRowModel ,
1717 createSortedRowModel ,
18+ filterFns ,
1819 flexRender ,
20+ sortingFns ,
1921 tableFeatures ,
22+ tableFns ,
2023 useTable ,
2124} from '@tanstack/react-table'
2225import { makeData } from './makeData'
26+ import type { Fns } from '../../../../packages/table-core/dist/esm/types/Fns'
2327import type {
2428 CellData ,
2529 Column ,
@@ -38,8 +42,13 @@ const _features = tableFeatures({
3842 RowSorting,
3943} )
4044
45+ const _fns = tableFns ( _features , {
46+ filterFns,
47+ sortingFns,
48+ } )
49+
4150declare module '@tanstack/react-table' {
42- //allows us to define custom properties for our columns
51+ // allows us to define custom properties for our columns
4352 interface ColumnMeta <
4453 TFeatures extends TableFeatures ,
4554 TFns extends Fns < TFeatures , TFns , TData > ,
@@ -55,7 +64,9 @@ function App() {
5564 [ ] ,
5665 )
5766
58- const columns = React . useMemo < Array < ColumnDef < typeof _features , { } , Person > > > (
67+ const columns = React . useMemo <
68+ Array < ColumnDef < typeof _features , typeof _fns , Person > >
69+ > (
5970 ( ) => [
6071 {
6172 accessorKey : 'firstName' ,
@@ -100,19 +111,19 @@ function App() {
100111 )
101112
102113 const [ data , setData ] = React . useState < Array < Person > > ( ( ) => makeData ( 5_000 ) )
103- const refreshData = ( ) => setData ( ( _old ) => makeData ( 100_000 ) ) //stress test
114+ const refreshData = ( ) => setData ( ( _old ) => makeData ( 100_000 ) ) // stress test
104115 const rerender = React . useReducer ( ( ) => ( { } ) , { } ) [ 1 ]
105116
106117 const table = useTable ( {
107118 _features,
119+ _fns,
108120 _rowModels : {
109- Core : createCoreRowModel ( ) ,
110- Filtered : createFilteredRowModel ( ) , //client-side filtering
121+ Filtered : createFilteredRowModel ( ) , // client-side filtering
111122 Paginated : createPaginatedRowModel ( ) ,
112123 Sorted : createSortedRowModel ( ) ,
113- Faceted : createFacetedRowModel ( ) , //client-side faceting
114- FacetedMinMax : createFacetedMinMaxValues ( ) , //generate min/max values for range filter
115- FacetedUnique : createFacetedUniqueValues ( ) , //generate unique values for select filter/autocomplete
124+ Faceted : createFacetedRowModel ( ) , // client-side faceting
125+ FacetedMinMax : createFacetedMinMaxValues ( ) , // generate min/max values for range filter
126+ FacetedUnique : createFacetedUniqueValues ( ) , // generate unique values for select filter/autocomplete
116127 } ,
117128 columns,
118129 data,
@@ -319,7 +330,7 @@ function Filter({ column }: { column: Column<any, Person, unknown> }) {
319330 >
320331 < option value = "" > All</ option >
321332 { sortedUniqueValues . map ( ( value ) => (
322- //dynamically generated select options from faceted values feature
333+ // dynamically generated select options from faceted values feature
323334 < option value = { value } key = { value } >
324335 { value }
325336 </ option >
0 commit comments