diff --git a/docs/api/features/column-filtering.md b/docs/api/features/column-filtering.md index 22ff1f6c4b..f8201b5653 100644 --- a/docs/api/features/column-filtering.md +++ b/docs/api/features/column-filtering.md @@ -356,7 +356,7 @@ Example: import { getFilteredRowModel } from '@tanstack/[adapter]-table' - getFilteredRowModel: createFilteredRowModel(), + getFilteredRowModel: createFilteredRowModel(filterFns), }) ``` diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md index ef533f11dc..fe8d23b297 100644 --- a/docs/api/features/global-filtering.md +++ b/docs/api/features/global-filtering.md @@ -196,7 +196,7 @@ Example: ```tsx import { getFilteredRowModel } from '@tanstack/[adapter]-table' - getFilteredRowModel: createFilteredRowModel(), + getFilteredRowModel: createFilteredRowModel(filterFns), }) ``` diff --git a/docs/framework/lit/guide/table-state.md b/docs/framework/lit/guide/table-state.md index 21bdb3ef15..ddaf3032a5 100644 --- a/docs/framework/lit/guide/table-state.md +++ b/docs/framework/lit/guide/table-state.md @@ -90,7 +90,7 @@ class MyComponent extends LitElement { this._sorting = updaterOrValue } }, - getSortedRowModel: createSortedRowModel(), + getSortedRowModel: createSortedRowModel(sortFns), getCoreRowModel: createCoreRowModel(), }) @@ -118,7 +118,7 @@ render() { columns, data, getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel() + getSortedRowModel: createSortedRowModel(sortFns) }) const state = { ...table.initialState, ...this._tableState }; table.setOptions(prev => ({ @@ -160,7 +160,7 @@ render() { this._sorting = updaterOrValue } }, - getSortedRowModel: createSortedRowModel(), + getSortedRowModel: createSortedRowModel(sortFns), getCoreRowModel: createCoreRowModel(), }) diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md index c7c3398e3e..9d5190cbda 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -54,7 +54,7 @@ const table = useTable({ data, columns, getCoreRowModel: createCoreRowModel(), - // getFilteredRowModel: createFilteredRowModel(), // not needed for manual server-side filtering + // getFilteredRowModel: createFilteredRowModel(filterFns), // not needed for manual server-side filtering manualFiltering: true, }) ``` @@ -72,7 +72,7 @@ const table = useTable({ data, columns, getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), // needed for client-side filtering + getFilteredRowModel: createFilteredRowModel(filterFns), // needed for client-side filtering }) ``` @@ -216,7 +216,7 @@ const table = useTable({ columns, data, getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), + getFilteredRowModel: createFilteredRowModel(filterFns), filterFns: { // add a custom global filter function myCustomFilterFn: (row, columnId, filterValue) => { // defined inline here return // true or false based on your custom logic @@ -296,7 +296,7 @@ const table = useTable({ columns, data, getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), + getFilteredRowModel: createFilteredRowModel(filterFns), getExpandedRowModel: createExpandedRowModel(), filterFromLeafRows: true, // filter and search through sub-rows }) @@ -313,7 +313,7 @@ const table = useTable({ columns, data, getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), + getFilteredRowModel: createFilteredRowModel(filterFns), getExpandedRowModel: createExpandedRowModel(), maxLeafRowFilterDepth: 0, // only filter root level parent rows out }) diff --git a/docs/guide/row-models.md b/docs/guide/row-models.md index e8cdf7ed25..e73c8a93a3 100644 --- a/docs/guide/row-models.md +++ b/docs/guide/row-models.md @@ -52,10 +52,10 @@ const table = useTable({ getFacetedMinMaxValues: getFacetedMinMaxValues(), getFacetedRowModel: createFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), - getFilteredRowModel: createFilteredRowModel(), + getFilteredRowModel: createFilteredRowModel(filterFns), getGroupedRowModel: createGroupedRowModel(), getPaginatedRowModel: createPaginatedRowModel(), - getSortedRowModel: createSortedRowModel(), + getSortedRowModel: createSortedRowModel(sortFns), }) ``` diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index c86d7ead9f..926b2c1031 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -104,7 +104,7 @@ const table = useTable({ columns, data, getCoreRowModel: createCoreRowModel(), - //getSortedRowModel: createSortedRowModel(), //not needed for manual sorting + //getSortedRowModel: createSortedRowModel(sortFns), //not needed for manual sorting manualSorting: true, //use pre-sorted row model instead of sorted row model state: { sorting, @@ -126,7 +126,7 @@ const table = useTable({ columns, data, getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel(), //provide a sorting row model + getSortedRowModel: createSortedRowModel(sortFns), //provide a sorting row model }) ``` @@ -199,7 +199,7 @@ const table = useTable({ columns, data, getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel(), + getSortedRowModel: createSortedRowModel(sortFns), sortFns: { //add a custom sorting function myCustomSortFn: (rowA, rowB, columnId) => { return rowA.original[columnId] > rowB.original[columnId] ? 1 : rowA.original[columnId] < rowB.original[columnId] ? -1 : 0 diff --git a/examples/angular/column-visibility/src/app/app.component.ts b/examples/angular/column-visibility/src/app/app.component.ts index be6bdab31c..66d416f64e 100644 --- a/examples/angular/column-visibility/src/app/app.component.ts +++ b/examples/angular/column-visibility/src/app/app.component.ts @@ -7,8 +7,8 @@ import { import { FlexRenderDirective, columnVisibilityFeature, - createCoreRowModel, injectTable, + isFunction, tableFeatures, } from '@tanstack/angular-table' import type { OnInit } from '@angular/core' @@ -124,12 +124,10 @@ export class AppComponent implements OnInit { state: { columnVisibility: this.columnVisibility(), }, - getCoreRowModel: createCoreRowModel(), onColumnVisibilityChange: (updaterOrValue) => { - const visibilityState = - typeof updaterOrValue === 'function' - ? updaterOrValue(this.columnVisibility()) - : updaterOrValue + const visibilityState = isFunction(updaterOrValue) + ? updaterOrValue(this.columnVisibility()) + : updaterOrValue this.columnVisibility.set(visibilityState) }, debugTable: true, diff --git a/examples/angular/filters/src/app/app.component.ts b/examples/angular/filters/src/app/app.component.ts index 88d219efb0..b221b64f25 100644 --- a/examples/angular/filters/src/app/app.component.ts +++ b/examples/angular/filters/src/app/app.component.ts @@ -8,17 +8,18 @@ import { FlexRenderDirective, columnFacetingFeature, columnFilteringFeature, - createCoreRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, + filterFns, injectTable, isFunction, rowPaginationFeature, rowSortingFeature, + sortFns, tableFeatures, } from '@tanstack/angular-table' import { FormsModule } from '@angular/forms' @@ -93,6 +94,14 @@ export class AppComponent { table = injectTable(() => ({ _features, + _rowModels: { + facetedMinMaxValues: createFacetedMinMaxValues(), + facetedRowModel: createFacetedRowModel(), + facetedUniqueValues: createFacetedUniqueValues(), + filteredRowModel: createFilteredRowModel(filterFns), + paginatedRowModel: createPaginatedRowModel(), + sortedRowModel: createSortedRowModel(sortFns), + }, columns: this.columns, data: this.data(), state: { @@ -103,13 +112,6 @@ export class AppComponent { ? this.columnFilters.update(updater) : this.columnFilters.set(updater) }, - getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), // client-side filtering - getSortedRowModel: createSortedRowModel(), - getPaginatedRowModel: createPaginatedRowModel(), - getFacetedRowModel: createFacetedRowModel(), // client-side faceting - getFacetedUniqueValues: createFacetedUniqueValues(), // generate unique values for select filter/autocomplete - getFacetedMinMaxValues: createFacetedMinMaxValues(), // generate min/max values for range filter debugTable: true, debugHeaders: true, debugColumns: false, diff --git a/examples/angular/grouping/src/app/app.component.ts b/examples/angular/grouping/src/app/app.component.ts index 9fc842b8fe..86f5c8ca5e 100644 --- a/examples/angular/grouping/src/app/app.component.ts +++ b/examples/angular/grouping/src/app/app.component.ts @@ -7,12 +7,14 @@ import { } from '@angular/core' import { FlexRenderDirective, + aggregationFns, columnFilteringFeature, columnGroupingFeature, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, + filterFns, injectTable, isFunction, rowExpandingFeature, @@ -49,10 +51,10 @@ export class AppComponent { readonly table = injectTable(() => ({ _features, _rowModels: { - groupedRowModel: createGroupedRowModel(), + groupedRowModel: createGroupedRowModel(aggregationFns), expandedRowModel: createExpandedRowModel(), paginatedRowModel: createPaginatedRowModel(), - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), }, enableExperimentalReactivity: true, data: this.data(), 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 274247fb9a..d9477c7ff6 100644 --- a/examples/angular/row-selection-signal/src/app/app.component.ts +++ b/examples/angular/row-selection-signal/src/app/app.component.ts @@ -11,6 +11,7 @@ import { columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, + filterFns, injectTable, rowPaginationFeature, rowSelectionFeature, @@ -109,22 +110,12 @@ export class AppComponent { table = injectTable(() => ({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), }, + columns: this.columns, data: this.data(), enableExperimentalReactivity: true, - _features: { - rowSelectionFeature, - rowPaginationFeature, - columnFilteringFeature, - columnVisibilityFeature, - }, - _rowModels: { - filteredRowModel: createFilteredRowModel(), - paginatedRowModel: createPaginatedRowModel(), - }, - columns: this.columns, state: { rowSelection: this.rowSelection(), }, diff --git a/examples/angular/row-selection/src/app/app.component.ts b/examples/angular/row-selection/src/app/app.component.ts index 7705bebd16..129adea553 100644 --- a/examples/angular/row-selection/src/app/app.component.ts +++ b/examples/angular/row-selection/src/app/app.component.ts @@ -12,6 +12,7 @@ import { createFilteredRowModel, createPaginatedRowModel, createTableHelper, + filterFns, rowPaginationFeature, rowSelectionFeature, } from '@tanstack/angular-table' @@ -33,7 +34,7 @@ const tableHelper = createTableHelper({ rowSelectionFeature, }, _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), }, debugTable: true, @@ -54,68 +55,67 @@ export class AppComponent { readonly ageHeaderCell = viewChild.required>('ageHeaderCell') - readonly columns: Array> = - [ - { - id: 'select', - header: () => { - return new FlexRenderComponent(TableHeadSelectionComponent) - }, - cell: () => { - return new FlexRenderComponent(TableRowSelectionComponent) - }, - }, - { - header: 'Name', - footer: (props) => props.column.id, - columns: [ - { - accessorKey: 'firstName', - cell: (info) => info.getValue(), - footer: (props) => props.column.id, - header: 'First name', - }, - { - accessorFn: (row) => row.lastName, - id: 'lastName', - cell: (info) => info.getValue(), - header: () => 'Last Name', - footer: (props) => props.column.id, - }, - ], + readonly columns: Array> = [ + { + id: 'select', + header: () => { + return new FlexRenderComponent(TableHeadSelectionComponent) }, - { - header: 'Info', - footer: (props) => props.column.id, - columns: [ - { - accessorKey: 'age', - header: () => this.ageHeaderCell(), - footer: (props) => props.column.id, - }, - { - header: 'More Info', - columns: [ - { - accessorKey: 'visits', - header: () => 'Visits', - footer: (props) => props.column.id, - }, - { - accessorKey: 'status', - header: 'Status', - footer: (props) => props.column.id, - }, - { - accessorKey: 'progress', - header: 'Profile Progress', - footer: (props) => props.column.id, - }, - ], - }, - ], + cell: () => { + return new FlexRenderComponent(TableRowSelectionComponent) }, - ] + }, + { + header: 'Name', + footer: (props) => props.column.id, + columns: [ + { + accessorKey: 'firstName', + cell: (info) => info.getValue(), + footer: (props) => props.column.id, + header: 'First name', + }, + { + accessorFn: (row) => row.lastName, + id: 'lastName', + cell: (info) => info.getValue(), + header: () => 'Last Name', + footer: (props) => props.column.id, + }, + ], + }, + { + header: 'Info', + footer: (props) => props.column.id, + columns: [ + { + accessorKey: 'age', + header: () => this.ageHeaderCell(), + footer: (props) => props.column.id, + }, + { + header: 'More Info', + columns: [ + { + accessorKey: 'visits', + header: () => 'Visits', + footer: (props) => props.column.id, + }, + { + accessorKey: 'status', + header: 'Status', + footer: (props) => props.column.id, + }, + { + accessorKey: 'progress', + header: 'Profile Progress', + footer: (props) => props.column.id, + }, + ], + }, + ], + }, + ] table = tableHelper.injectTable(() => ({ data: this.data(), diff --git a/examples/lit/basic/src/main.ts b/examples/lit/basic/src/main.ts index 4f30635e6d..a7aaf0cc02 100644 --- a/examples/lit/basic/src/main.ts +++ b/examples/lit/basic/src/main.ts @@ -5,7 +5,6 @@ import { ColumnDef, TableController, flexRender, - rowSortingFeature, tableFeatures, } from '@tanstack/lit-table' import install from '@twind/with-web-components' @@ -24,9 +23,7 @@ type Person = { } // 3. 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({ - rowSortingFeature: rowSortingFeature, -}) +const _features = tableFeatures({}) // const columnHelper = createColumnHelper() diff --git a/examples/lit/column-sizing/src/main.ts b/examples/lit/column-sizing/src/main.ts index a9d7133470..e64928c8a9 100644 --- a/examples/lit/column-sizing/src/main.ts +++ b/examples/lit/column-sizing/src/main.ts @@ -5,12 +5,19 @@ import { state } from 'lit/decorators/state.js' import { ColumnDef, TableController, - createCoreRowModel, + columnResizingFeature, + columnSizingFeature, flexRender, + tableFeatures, } from '@tanstack/lit-table' import { Person, makeData } from './makeData' -const columns: Array> = [ +const _features = tableFeatures({ + columnSizingFeature, + columnResizingFeature, +}) + +const columns: Array> = [ { accessorKey: 'firstName', cell: (info) => info.getValue(), @@ -40,7 +47,6 @@ const columns: Array> = [ { accessorKey: 'rank', header: 'Rank', - invertSorting: true, // invert the sorting order (golf score-like where smaller is better) }, { accessorKey: 'createdAt', @@ -57,11 +63,12 @@ class LitTableExample extends LitElement { protected render() { const table = this.tableController.table({ + _features, + _rowModels: {}, data, columns, columnResizeMode: 'onChange', columnResizeDirection: 'ltr', - getCoreRowModel: createCoreRowModel(), debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/lit/filters/src/main.ts b/examples/lit/filters/src/main.ts index 5c836f0aac..66978a4d15 100644 --- a/examples/lit/filters/src/main.ts +++ b/examples/lit/filters/src/main.ts @@ -3,11 +3,16 @@ import { LitElement, html } from 'lit' import { repeat } from 'lit/directives/repeat.js' import { TableController, - createCoreRowModel, + columnFilteringFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, + filterFns, flexRender, + rowPaginationFeature, + rowSortingFeature, + sortFns, + tableFeatures, } from '@tanstack/lit-table' import { makeData } from './makeData' import type { @@ -20,7 +25,13 @@ import type { } from '@tanstack/lit-table' import type { Person } from './makeData' -const columns: Array> = [ +const _features = tableFeatures({ + columnFilteringFeature, + rowPaginationFeature, + rowSortingFeature, +}) + +const columns: Array> = [ { accessorKey: 'firstName', cell: (info) => info.getValue(), @@ -149,9 +160,14 @@ class LitTableExample extends LitElement { protected render(): unknown { const table = this.tableController.table({ + _features, + _rowModels: { + filteredRowModel: createFilteredRowModel(filterFns), + paginatedRowModel: createPaginatedRowModel(), + sortedRowModel: createSortedRowModel(sortFns), + }, data, columns, - filterFns: {}, state: { columnFilters: this._columnFilters, }, @@ -162,10 +178,6 @@ class LitTableExample extends LitElement { this._columnFilters = updater } }, - getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), // client side filtering - getSortedRowModel: createSortedRowModel(), - getPaginatedRowModel: createPaginatedRowModel(), debugTable: true, debugHeaders: true, debugColumns: false, diff --git a/examples/lit/row-selection/src/main.ts b/examples/lit/row-selection/src/main.ts index d11a3dcb62..67a81dd998 100644 --- a/examples/lit/row-selection/src/main.ts +++ b/examples/lit/row-selection/src/main.ts @@ -3,16 +3,26 @@ import { LitElement, html } from 'lit' import { repeat } from 'lit/directives/repeat.js' import { TableController, - createCoreRowModel, + columnFilteringFeature, createFilteredRowModel, createPaginatedRowModel, + filterFns, flexRender, + rowPaginationFeature, + rowSelectionFeature, + tableFeatures, } from '@tanstack/lit-table' import { makeData } from './makeData' import type { ColumnDef } from '@tanstack/lit-table' import type { Person } from './makeData' -const columns: Array> = [ +const _features = tableFeatures({ + rowSelectionFeature, + columnFilteringFeature, + rowPaginationFeature, +}) + +const columns: Array> = [ { id: 'select', header: ({ table }) => html` @@ -78,9 +88,13 @@ class LitTableExample extends LitElement { protected render(): unknown { const table = this.tableController.table({ + _features, + _rowModels: { + filteredRowModel: createFilteredRowModel(filterFns), + paginatedRowModel: createPaginatedRowModel(), + }, data, columns, - filterFns: {}, state: { rowSelection: this._rowSelection, }, @@ -92,9 +106,6 @@ class LitTableExample extends LitElement { this._rowSelection = updaterOrValue } }, - getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), - getPaginatedRowModel: createPaginatedRowModel(), debugTable: true, }) diff --git a/examples/lit/sorting/src/main.ts b/examples/lit/sorting/src/main.ts index eb0332ab91..77157ccb6d 100644 --- a/examples/lit/sorting/src/main.ts +++ b/examples/lit/sorting/src/main.ts @@ -4,9 +4,11 @@ import { repeat } from 'lit/directives/repeat.js' import { state } from 'lit/decorators/state.js' import { TableController, - createCoreRowModel, createSortedRowModel, flexRender, + rowSortingFeature, + sortFns, + tableFeatures, } from '@tanstack/lit-table' import { Person, makeData } from './makeData' import type { ColumnDef, SortFn, SortingState } from '@tanstack/lit-table' @@ -18,7 +20,11 @@ const sortStatusFn: SortFn = (rowA, rowB, _columnId) => { return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB) } -const columns: Array> = [ +const _features = tableFeatures({ + rowSortingFeature, +}) + +const columns: Array> = [ { accessorKey: 'firstName', cell: (info) => info.getValue(), @@ -75,6 +81,10 @@ class LitTableExample extends LitElement { protected render() { const table = this.tableController.table({ + _features, + _rowModels: { + sortedRowModel: createSortedRowModel(sortFns), + }, columns, data, state: { @@ -87,8 +97,6 @@ class LitTableExample extends LitElement { this._sorting = updaterOrValue } }, - getSortedRowModel: createSortedRowModel(), - getCoreRowModel: createCoreRowModel(), }) return html` diff --git a/examples/lit/virtualized-rows/src/main.ts b/examples/lit/virtualized-rows/src/main.ts index 081f325f36..9fe9cbdb85 100644 --- a/examples/lit/virtualized-rows/src/main.ts +++ b/examples/lit/virtualized-rows/src/main.ts @@ -3,9 +3,11 @@ import { LitElement, html } from 'lit' import { repeat } from 'lit/directives/repeat.js' import { TableController, - createCoreRowModel, + columnSizingFeature, createSortedRowModel, flexRender, + sortFns, + tableFeatures, } from '@tanstack/lit-table' import { styleMap } from 'lit/directives/style-map.js' import { Ref, createRef, ref } from 'lit/directives/ref.js' @@ -13,7 +15,11 @@ import { VirtualizerController } from '@tanstack/lit-virtual' import { Person, makeData } from './makeData.ts' import type { ColumnDef } from '@tanstack/lit-table' -const columns: Array> = [ +const _features = tableFeatures({ + columnSizingFeature, +}) + +const columns: Array> = [ { accessorKey: 'id', header: 'ID', @@ -77,10 +83,12 @@ class LitTableExample extends LitElement { protected render(): unknown { const table = this.tableController.table({ + _features, + _rowModels: { + sortedRowModel: createSortedRowModel(sortFns), + }, columns, data, - getSortedRowModel: createSortedRowModel(), - getCoreRowModel: createCoreRowModel(), }) const { rows } = table.getRowModel() diff --git a/examples/qwik/basic/src/main.tsx b/examples/qwik/basic/src/main.tsx index 09eebba42a..20091513fe 100644 --- a/examples/qwik/basic/src/main.tsx +++ b/examples/qwik/basic/src/main.tsx @@ -3,8 +3,8 @@ import { component$, render } from '@builder.io/qwik' import './index.css' import { createColumnHelper, - createCoreRowModel, flexRender, + tableFeatures, useTable, } from '@tanstack/qwik-table' @@ -52,9 +52,11 @@ const defaultData: Array = [ }, ] -const columnHelper = createColumnHelper() +const _features = tableFeatures({}) -const columns = [ +const columnHelper = createColumnHelper() + +const columns = columnHelper.columns([ columnHelper.accessor('firstName', { cell: (info) => info.getValue(), footer: (info) => info.column.id, @@ -82,14 +84,14 @@ const columns = [ header: 'Profile Progress', footer: (info) => info.column.id, }), -] +]) const App = component$(() => { const table = useTable({ + _features, + _rowModels: {}, columns, data: defaultData, - getCoreRowModel: createCoreRowModel(), - enableSorting: true, }) return ( @@ -114,7 +116,7 @@ const App = component$(() => { {table.getRowModel().rows.map((row) => ( - {row.getVisibleCells().map((cell) => ( + {row.getAllCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} diff --git a/examples/qwik/filters/src/main.tsx b/examples/qwik/filters/src/main.tsx index c0c7fbaff7..229b1f0435 100644 --- a/examples/qwik/filters/src/main.tsx +++ b/examples/qwik/filters/src/main.tsx @@ -2,16 +2,21 @@ import '@builder.io/qwik/qwikloader.js' import { $, component$, render, useSignal } from '@builder.io/qwik' import './index.css' import { + columnFacetingFeature, + columnFilteringFeature, createColumnHelper, - createCoreRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, + filterFns, flexRender, + rowPaginationFeature, + rowSortingFeature, sortFns, + tableFeatures, useTable, } from '@tanstack/qwik-table' import { compareItems, rankItem } from '@tanstack/match-sorter-utils' @@ -26,19 +31,19 @@ import type { RankingInfo } from '@tanstack/match-sorter-utils' declare module '@tanstack/qwik-table' { interface FilterFns { - fuzzy: FilterFn + fuzzy: FilterFn } interface FilterMeta { itemRank: RankingInfo } } -const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { +const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { // Rank the item const itemRank = rankItem(row.getValue(columnId), value) // Store the itemRank info - addMeta({ + addMeta?.({ itemRank, }) @@ -46,7 +51,7 @@ const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { return itemRank.passed } -const fuzzySort: SortFn = (rowA, rowB, columnId) => { +const fuzzySort: SortFn = (rowA, rowB, columnId) => { let dir = 0 // Only sort by rank if the column has ranking information @@ -105,9 +110,16 @@ const defaultData: Array = [ }, ] -const columnHelper = createColumnHelper() +const _features = tableFeatures({ + columnFacetingFeature, + columnFilteringFeature, + rowPaginationFeature, + rowSortingFeature, +}) + +const columnHelper = createColumnHelper() -const columns = [ +const columns = columnHelper.columns([ columnHelper.group({ header: 'Name', footer: (props) => props.column.id, @@ -159,13 +171,25 @@ const columns = [ }), ], }), -] +]) const App = component$(() => { const columnFilters = useSignal([]) const globalFilter = useSignal('') const table = useTable({ + _features, + _rowModels: { + facetedMinMaxValues: createFacetedMinMaxValues(), + facetedRowModel: createFacetedRowModel(), + facetedUniqueValues: createFacetedUniqueValues(), + filteredRowModel: createFilteredRowModel({ + ...filterFns, + fuzzy: fuzzyFilter, + }), + paginatedRowModel: createPaginatedRowModel(), + sortedRowModel: createSortedRowModel(sortFns), + }, data: defaultData, columns, enableSorting: true, @@ -186,13 +210,6 @@ const App = component$(() => { globalFilter.value = updated }, globalFilterFn: fuzzyFilter, - getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), - getSortedRowModel: createSortedRowModel(), - getPaginatedRowModel: createPaginatedRowModel(), - getFacetedRowModel: createFacetedRowModel(), - getFacetedUniqueValues: createFacetedUniqueValues(), - getFacetedMinMaxValues: createFacetedMinMaxValues(), debugTable: true, debugHeaders: true, debugColumns: false, diff --git a/examples/qwik/row-selection/src/main.tsx b/examples/qwik/row-selection/src/main.tsx index 1304bc5e30..ad1b77163c 100644 --- a/examples/qwik/row-selection/src/main.tsx +++ b/examples/qwik/row-selection/src/main.tsx @@ -2,11 +2,16 @@ import '@builder.io/qwik/qwikloader.js' import { $, component$, render, useSignal } from '@builder.io/qwik' import './index.css' import { + columnFilteringFeature, createColumnHelper, - createCoreRowModel, createFilteredRowModel, createSortedRowModel, + filterFns, flexRender, + rowSelectionFeature, + rowSortingFeature, + sortFns, + tableFeatures, useTable, } from '@tanstack/qwik-table' import type { ColumnDef } from '@tanstack/qwik-table' @@ -55,75 +60,86 @@ const defaultData: Array = [ }, ] -const columnHelper = createColumnHelper() -const columns: Array> = [ - { - id: 'select', - header: ({ table }) => ( - { - console.log('toggleAllRowsSelected') - table.toggleAllRowsSelected() - })} - /> - ), - cell: ({ row, table }) => { - const { id } = row - return ( -
- { - // TODO: getting row instance from table works, but how can we call getToggleSelectedHandler() without getting qwik qrl error? - const row = table.getRow(id) - row.toggleSelected() - })} - /> -
- ) +const _features = tableFeatures({ + columnFilteringFeature, + rowSelectionFeature, + rowSortingFeature, +}) + +const columnHelper = createColumnHelper() + +const columns: Array> = + columnHelper.columns([ + { + id: 'select', + header: ({ table }) => ( + { + console.log('toggleAllRowsSelected') + table.toggleAllRowsSelected() + })} + /> + ), + cell: ({ row, table }) => { + const { id } = row + return ( +
+ { + // TODO: getting row instance from table works, but how can we call getToggleSelectedHandler() without getting qwik qrl error? + const row = table.getRow(id) + row.toggleSelected() + })} + /> +
+ ) + }, }, - }, - columnHelper.accessor('firstName', { - cell: (info) => info.getValue(), - footer: (props) => props.column.id, - }), - columnHelper.accessor((row) => row.lastName, { - id: 'lastName', - cell: (info) => info.getValue(), - header: () => Last Name, - footer: (props) => props.column.id, - }), - columnHelper.accessor('age', { - header: () => 'Age', - footer: (props) => props.column.id, - }), - columnHelper.accessor('visits', { - header: () => Visits, - footer: (props) => props.column.id, - }), - columnHelper.accessor('status', { - header: 'Status', - footer: (props) => props.column.id, - }), - columnHelper.accessor('progress', { - header: 'Profile Progress', - footer: (props) => props.column.id, - }), -] + columnHelper.accessor('firstName', { + cell: (info) => info.getValue(), + footer: (props) => props.column.id, + }), + columnHelper.accessor((row) => row.lastName, { + id: 'lastName', + cell: (info) => info.getValue(), + header: () => Last Name, + footer: (props) => props.column.id, + }), + columnHelper.accessor('age', { + header: () => 'Age', + footer: (props) => props.column.id, + }), + columnHelper.accessor('visits', { + header: () => Visits, + footer: (props) => props.column.id, + }), + columnHelper.accessor('status', { + header: 'Status', + footer: (props) => props.column.id, + }), + columnHelper.accessor('progress', { + header: 'Profile Progress', + footer: (props) => props.column.id, + }), + ]) const App = component$(() => { const rowSelection = useSignal({}) const table = useTable({ + _features, + _rowModels: { + sortedRowModel: createSortedRowModel(sortFns), + filteredRowModel: createFilteredRowModel(filterFns), + }, columns, data: defaultData, - getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel(), enableSorting: true, onRowSelectionChange: (updater) => { rowSelection.value = @@ -132,7 +148,6 @@ const App = component$(() => { state: { rowSelection: rowSelection.value, }, - getFilteredRowModel: createFilteredRowModel(), enableRowSelection: true, }) @@ -171,7 +186,7 @@ const App = component$(() => { {table.getRowModel().rows.map((row) => { return ( - {row.getVisibleCells().map((cell) => ( + {row.getAllCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} diff --git a/examples/qwik/sorting/src/main.tsx b/examples/qwik/sorting/src/main.tsx index f8c0ee4d95..e29a8e329b 100644 --- a/examples/qwik/sorting/src/main.tsx +++ b/examples/qwik/sorting/src/main.tsx @@ -2,9 +2,11 @@ import '@builder.io/qwik/qwikloader.js' import { $, component$, render, useSignal } from '@builder.io/qwik' import './index.css' import { - createCoreRowModel, createSortedRowModel, flexRender, + rowSortingFeature, + sortFns, + tableFeatures, useTable, } from '@tanstack/qwik-table' import { makeData } from './makeData' @@ -19,7 +21,11 @@ type Person = { progress: number } -const columns: Array> = [ +const _features = tableFeatures({ + rowSortingFeature, +}) + +const columns: Array> = [ { accessorKey: 'firstName', cell: (info) => info.getValue(), @@ -57,7 +63,7 @@ const columns: Array> = [ accessorKey: 'createdAt', header: 'Created At', cell: (info) => info.getValue().toLocaleDateString(), - // sortFn: 'datetime' (inferred from the data) + sortFn: 'datetime', }, ] @@ -67,10 +73,12 @@ const App = component$(() => { const sorting = useSignal([]) const table = useTable({ + _features, + _rowModels: { + sortedRowModel: createSortedRowModel(sortFns), + }, columns, data: data.value, - getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel(), enableSorting: true, state: { sorting: sorting.value, @@ -136,7 +144,7 @@ const App = component$(() => { .map((row) => { return ( - {row.getVisibleCells().map((cell) => { + {row.getAllCells().map((cell) => { return ( {flexRender( diff --git a/examples/react/custom-features/src/main.tsx b/examples/react/custom-features/src/main.tsx index aa2e2ec3a6..3e3378a432 100644 --- a/examples/react/custom-features/src/main.tsx +++ b/examples/react/custom-features/src/main.tsx @@ -154,9 +154,9 @@ function App() { const table = useTable({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel({ filterFns }), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel({ sortFns }), + sortedRowModel: createSortedRowModel(sortFns), }, columns, data, diff --git a/examples/react/editable-data/src/main.tsx b/examples/react/editable-data/src/main.tsx index 7fc35570e9..54f6161df8 100644 --- a/examples/react/editable-data/src/main.tsx +++ b/examples/react/editable-data/src/main.tsx @@ -5,6 +5,7 @@ import { createFilteredRowModel, createPaginatedRowModel, createTableHelper, + filterFns, flexRender, rowPaginationFeature, tableFeatures, @@ -28,7 +29,7 @@ const _features = tableFeatures({ const tableHelper = createTableHelper({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), }, }) diff --git a/examples/react/expanding/src/main.tsx b/examples/react/expanding/src/main.tsx index c2e7cf6e82..08ae8479d5 100644 --- a/examples/react/expanding/src/main.tsx +++ b/examples/react/expanding/src/main.tsx @@ -34,9 +34,9 @@ const tableHelper = createTableHelper({ rowSelectionFeature, }, _rowModels: { - filteredRowModel: createFilteredRowModel({ filterFns }), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel({ sortFns }), + sortedRowModel: createSortedRowModel(sortFns), }, }) diff --git a/examples/react/filters-faceted/src/main.tsx b/examples/react/filters-faceted/src/main.tsx index a349702b26..cd0fdfff48 100644 --- a/examples/react/filters-faceted/src/main.tsx +++ b/examples/react/filters-faceted/src/main.tsx @@ -103,9 +103,9 @@ function App() { const table = useTable({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel({ filterFns }), // client-side filtering + filteredRowModel: createFilteredRowModel(filterFns), // client-side filtering paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel({ sortFns }), + sortedRowModel: createSortedRowModel(sortFns), facetedRowModel: createFacetedRowModel(), // client-side faceting facetedMinMaxValues: createFacetedMinMaxValues(), // generate min/max values for range filter facetedUniqueValues: createFacetedUniqueValues(), // generate unique values for select filter/autocomplete diff --git a/examples/react/filters-fuzzy/src/main.tsx b/examples/react/filters-fuzzy/src/main.tsx index 0516437e4d..0ca4cf1162 100644 --- a/examples/react/filters-fuzzy/src/main.tsx +++ b/examples/react/filters-fuzzy/src/main.tsx @@ -71,8 +71,6 @@ const fuzzySort: SortFn = (rowA, rowB, columnId) => { return dir === 0 ? sortFns.alphanumeric(rowA, rowB, columnId) : dir } -filterFns.fuzzyFilter = fuzzyFilter - declare module '@tanstack/react-table' { // add fuzzy filter to the filterFns interface FilterFns { @@ -129,10 +127,11 @@ function App() { _features, _rowModels: { filteredRowModel: createFilteredRowModel({ - filterFns: { ...filterFns, fuzzy: fuzzyFilter }, + ...filterFns, + fuzzy: fuzzyFilter, }), paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel({ sortFns }), + sortedRowModel: createSortedRowModel(sortFns), }, columns, data, diff --git a/examples/react/filters/src/main.tsx b/examples/react/filters/src/main.tsx index 46a68abde5..497a510a6f 100644 --- a/examples/react/filters/src/main.tsx +++ b/examples/react/filters/src/main.tsx @@ -105,8 +105,8 @@ function App() { const table = useTable({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel({ filterFns }), // client side filtering - sortedRowModel: createSortedRowModel({ sortFns }), + filteredRowModel: createFilteredRowModel(filterFns), // client side filtering + sortedRowModel: createSortedRowModel(sortFns), // client side sorting paginatedRowModel: createPaginatedRowModel(), }, columns, diff --git a/examples/react/full-width-resizable-table/src/main.tsx b/examples/react/full-width-resizable-table/src/main.tsx index 885210866e..c4039b787f 100644 --- a/examples/react/full-width-resizable-table/src/main.tsx +++ b/examples/react/full-width-resizable-table/src/main.tsx @@ -1,12 +1,25 @@ import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' -import { flexRender, useTable } from '@tanstack/react-table' +import { + columnResizingFeature, + columnSizingFeature, + flexRender, + rowPaginationFeature, + tableFeatures, + useTable, +} from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef } from '@tanstack/react-table' import type { Person } from './makeData' -const columns: Array> = [ +const _features = tableFeatures({ + columnSizingFeature, + columnResizingFeature, + rowPaginationFeature, +}) + +const columns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -62,6 +75,7 @@ function App() { const data = React.useMemo(() => makeData(20), []) const table = useTable({ + _features, _rowModels: {}, columns, data, diff --git a/examples/react/full-width-table/src/main.tsx b/examples/react/full-width-table/src/main.tsx index 39bebed3e0..02d8779c44 100644 --- a/examples/react/full-width-table/src/main.tsx +++ b/examples/react/full-width-table/src/main.tsx @@ -4,16 +4,22 @@ import './index.css' import { createPaginatedRowModel, flexRender, + rowPaginationFeature, + tableFeatures, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef, PaginationState } from '@tanstack/react-table' import type { Person } from './makeData' +const _features = tableFeatures({ + rowPaginationFeature, +}) + function App() { const rerender = React.useReducer(() => ({}), {})[1] - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { header: 'Name', @@ -72,6 +78,7 @@ function App() { }) const table = useTable({ + _features, _rowModels: { paginatedRowModel: createPaginatedRowModel(), }, diff --git a/examples/react/fully-controlled/src/main.tsx b/examples/react/fully-controlled/src/main.tsx index d71ed639e0..dc9c5159f9 100644 --- a/examples/react/fully-controlled/src/main.tsx +++ b/examples/react/fully-controlled/src/main.tsx @@ -4,6 +4,8 @@ import './index.css' import { createPaginatedRowModel, flexRender, + rowPaginationFeature, + tableFeatures, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' @@ -18,7 +20,11 @@ type Person = { progress: number } -const defaultColumns: Array> = [ +const _features = tableFeatures({ + rowPaginationFeature, +}) + +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -80,6 +86,7 @@ function App() { // Create the table and pass your options const table = useTable({ + _features, _rowModels: { paginatedRowModel: createPaginatedRowModel(), }, diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx index 2c923f85b7..edb350e992 100644 --- a/examples/react/grouping/src/main.tsx +++ b/examples/react/grouping/src/main.tsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import { + aggregationFns, columnFilteringFeature, columnGroupingFeature, createExpandedRowModel, @@ -10,10 +11,12 @@ import { createPaginatedRowModel, createSortedRowModel, createTableHelper, + filterFns, flexRender, rowExpandingFeature, rowPaginationFeature, rowSortingFeature, + sortFns, } from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef, GroupingState } from '@tanstack/react-table' @@ -28,10 +31,10 @@ const tableHelper = createTableHelper({ rowSortingFeature, }, _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel(), - groupedRowModel: createGroupedRowModel(), + sortedRowModel: createSortedRowModel(sortFns), + groupedRowModel: createGroupedRowModel(aggregationFns), expandedRowModel: createExpandedRowModel(), }, TData: {} as Person, @@ -73,7 +76,7 @@ function App() { accessorKey: 'visits', header: () => Visits, aggregationFn: 'sum', - // aggregatedCell: ({ getValue }) => getValue().toLocaleString(), + aggregatedCell: ({ getValue }) => getValue().toLocaleString(), }, { accessorKey: 'status', diff --git a/examples/react/kitchen-sink/src/App.tsx b/examples/react/kitchen-sink/src/App.tsx index 3bcc64ba2f..978f9d0e20 100644 --- a/examples/react/kitchen-sink/src/App.tsx +++ b/examples/react/kitchen-sink/src/App.tsx @@ -86,9 +86,9 @@ export const App = () => { const table = useTable({ _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel(), + sortedRowModel: createSortedRowModel(sortFns), groupedRowModel: createGroupedRowModel(), facetedRowModel: createFacetedRowModel(), facetedMinMaxValues: createFacetedMinMaxValues(), diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx index f36a8498f1..28a0ffa5a6 100644 --- a/examples/react/material-ui-pagination/src/main.tsx +++ b/examples/react/material-ui-pagination/src/main.tsx @@ -110,7 +110,7 @@ function LocalTable({ }) { const table = useTable({ _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), }, columns, diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx index 94e8c9ec16..58413db0b4 100644 --- a/examples/react/pagination-controlled/src/main.tsx +++ b/examples/react/pagination-controlled/src/main.tsx @@ -7,20 +7,26 @@ import { useQuery, } from '@tanstack/react-query' import './index.css' -import { flexRender, useTable } from '@tanstack/react-table' +import { + flexRender, + rowPaginationFeature, + tableFeatures, + useTable, +} from '@tanstack/react-table' import { fetchData } from './fetchData' import type { ColumnDef, PaginationState } from '@tanstack/react-table' - -// - import type { Person } from './fetchData' const queryClient = new QueryClient() +const _features = tableFeatures({ + rowPaginationFeature, +}) + function App() { const rerender = React.useReducer(() => ({}), {})[1] - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { header: 'Name', @@ -89,7 +95,7 @@ function App() { const defaultData = React.useMemo(() => [], []) const table = useTable({ - _features: {}, + _features, _rowModels: {}, columns, data: dataQuery.data?.rows ?? defaultData, @@ -132,7 +138,7 @@ function App() { {table.getRowModel().rows.map((row) => { return ( - {row.getVisibleCells().map((cell) => { + {row.getAllCells().map((cell) => { return ( {flexRender( diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx index fc48336e3c..0f965bbc09 100644 --- a/examples/react/pagination/src/main.tsx +++ b/examples/react/pagination/src/main.tsx @@ -8,7 +8,6 @@ import { createSortedRowModel, filterFns, flexRender, - rowModelFns, rowPaginationFeature, rowSortingFeature, sortFns, @@ -103,8 +102,8 @@ function MyTable({ const table = useTable({ _features, _rowModels: { - sortedRowModel: createSortedRowModel({ sortFns }), - filteredRowModel: createFilteredRowModel({ filterFns }), + sortedRowModel: createSortedRowModel(sortFns), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), }, columns, diff --git a/examples/react/query-router-search-params/src/components/table.tsx b/examples/react/query-router-search-params/src/components/table.tsx index 4fefafd7c4..b8cc2fac86 100644 --- a/examples/react/query-router-search-params/src/components/table.tsx +++ b/examples/react/query-router-search-params/src/components/table.tsx @@ -1,4 +1,12 @@ -import { flexRender, useTable } from '@tanstack/react-table' +import { + columnFilteringFeature, + flexRender, + rowPaginationFeature, + rowSelectionFeature, + rowSortingFeature, + tableFeatures, + useTable, +} from '@tanstack/react-table' import { DebouncedInput } from './debouncedInput' import type { ColumnDef, @@ -9,19 +17,26 @@ import type { } from '@tanstack/react-table' import type { Filters } from '../api/types' +export const _features = tableFeatures({ + columnFilteringFeature, + rowPaginationFeature, + rowSelectionFeature, + rowSortingFeature, +}) + export const DEFAULT_PAGE_INDEX = 0 export const DEFAULT_PAGE_SIZE = 10 -type Props> = { - data: Array - columns: Array> +type Props> = { + data: Array + columns: Array> pagination: PaginationState paginationOptions: Pick< TableOptions_RowPagination, 'onPaginationChange' | 'rowCount' > - filters: Filters - onFilterChange: (dataFilters: Partial) => void + filters: Filters + onFilterChange: (dataFilters: Partial) => void sorting: SortingState onSortingChange: OnChangeFn } @@ -37,7 +52,8 @@ export default function Table>({ sorting, }: Props) { const table = useTable({ - _rowModels: {}, + _features, + _rowModels: {}, // no client-side row models since we're doing server-side sorting, filtering, and pagination columns, data, manualFiltering: true, @@ -108,7 +124,7 @@ export default function Table>({ {table.getRowModel().rows.map((row) => { return ( - {row.getVisibleCells().map((cell) => { + {row.getAllCells().map((cell) => { return ( {flexRender( diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx index 80e1797de4..5bc7282760 100644 --- a/examples/react/row-pinning/src/main.tsx +++ b/examples/react/row-pinning/src/main.tsx @@ -5,6 +5,7 @@ import { createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, + filterFns, flexRender, rowExpandingFeature, rowPaginationFeature, @@ -150,7 +151,7 @@ function App() { const table = useTable({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), expandedRowModel: createExpandedRowModel(), paginatedRowModel: createPaginatedRowModel(), }, diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx index 2208022b27..362211eca5 100644 --- a/examples/react/row-selection/src/main.tsx +++ b/examples/react/row-selection/src/main.tsx @@ -4,6 +4,7 @@ import { columnFilteringFeature, createFilteredRowModel, createPaginatedRowModel, + filterFns, flexRender, rowPaginationFeature, rowSelectionFeature, @@ -109,7 +110,7 @@ function App() { const table = useTable({ _features, _rowModels: { - filteredRowModel: createFilteredRowModel(), + filteredRowModel: createFilteredRowModel(filterFns), paginatedRowModel: createPaginatedRowModel(), }, columns, diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx index 9c2ce266f5..cd34fcd805 100644 --- a/examples/react/sorting/src/main.tsx +++ b/examples/react/sorting/src/main.tsx @@ -90,7 +90,7 @@ function App() { const table = useTable({ _features, _rowModels: { - sortedRowModel: createSortedRowModel({ sortFns }), // client-side sorting + sortedRowModel: createSortedRowModel(sortFns), // client-side sorting }, columns, data, diff --git a/examples/react/sub-components/src/main.tsx b/examples/react/sub-components/src/main.tsx index f84e97f062..f3a5097e9d 100644 --- a/examples/react/sub-components/src/main.tsx +++ b/examples/react/sub-components/src/main.tsx @@ -5,6 +5,7 @@ import { createExpandedRowModel, flexRender, rowExpandingFeature, + tableFeatures, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' @@ -16,7 +17,11 @@ import type { } from '@tanstack/react-table' import type { Person } from './makeData' -const columns: Array> = [ +const _features = tableFeatures({ + rowExpandingFeature, +}) + +const columns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -111,9 +116,9 @@ function Table({ data, getRowCanExpand, renderSubComponent, -}: TableProps): JSX.Element { +}: TableProps): React.JSX.Element { const table = useTable({ - _features: { rowExpandingFeature }, + _features, _rowModels: { expandedRowModel: createExpandedRowModel(), }, @@ -152,7 +157,7 @@ function Table({ {/* first row is a normal row */} - {row.getVisibleCells().map((cell) => { + {row.getAllCells().map((cell) => { return ( {flexRender( @@ -166,7 +171,7 @@ function Table({ {row.getIsExpanded() && ( {/* 2nd row is a custom 1 cell row */} - + {renderSubComponent({ row })} @@ -182,7 +187,11 @@ function Table({ ) } -const renderSubComponent = ({ row }: { row: Row }) => { +const renderSubComponent = ({ + row, +}: { + row: Row +}) => { return ( 
       {JSON.stringify(row.original, null, 2)}
diff --git a/examples/react/virtualized-columns/src/main.tsx b/examples/react/virtualized-columns/src/main.tsx
index fab3ccf33e..52f3e47679 100644
--- a/examples/react/virtualized-columns/src/main.tsx
+++ b/examples/react/virtualized-columns/src/main.tsx
@@ -6,6 +6,7 @@ import {
   createSortedRowModel,
   flexRender,
   rowSortingFeature,
+  sortFns,
   useTable,
 } from '@tanstack/react-table'
 import { useVirtualizer } from '@tanstack/react-virtual'
@@ -23,7 +24,7 @@ function App() {
 
   const table = useTable({
     _features: { columnSizingFeature, rowSortingFeature },
-    _rowModels: { sortedRowModel: createSortedRowModel() },
+    _rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
     columns,
     data,
     debugTable: true,
diff --git a/examples/react/virtualized-infinite-scrolling/src/main.tsx b/examples/react/virtualized-infinite-scrolling/src/main.tsx
index 2937022478..3fa3afcbd5 100644
--- a/examples/react/virtualized-infinite-scrolling/src/main.tsx
+++ b/examples/react/virtualized-infinite-scrolling/src/main.tsx
@@ -8,6 +8,7 @@ import {
   createSortedRowModel,
   flexRender,
   rowSortingFeature,
+  sortFns,
   useTable,
 } from '@tanstack/react-table'
 import {
@@ -126,7 +127,7 @@ function App() {
 
   const table = useTable({
     _features: { columnSizingFeature, rowSortingFeature },
-    _rowModels: { sortedRowModel: createSortedRowModel() },
+    _rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
     data: flatData,
     columns,
     state: {
diff --git a/examples/react/virtualized-rows/src/main.tsx b/examples/react/virtualized-rows/src/main.tsx
index c645c8ac4a..cc48a99877 100644
--- a/examples/react/virtualized-rows/src/main.tsx
+++ b/examples/react/virtualized-rows/src/main.tsx
@@ -6,6 +6,7 @@ import {
   createSortedRowModel,
   flexRender,
   rowSortingFeature,
+  sortFns,
   useTable,
 } from '@tanstack/react-table'
 import { useVirtualizer } from '@tanstack/react-virtual'
@@ -66,7 +67,7 @@ function App() {
 
   const table = useTable({
     _features: { columnSizingFeature, rowSortingFeature },
-    _rowModels: { sortedRowModel: createSortedRowModel() },
+    _rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
     columns,
     data,
     debugTable: true,
diff --git a/examples/solid/filters-faceted/src/App.tsx b/examples/solid/filters-faceted/src/App.tsx
index b6ca0f6ead..be702dbbe5 100644
--- a/examples/solid/filters-faceted/src/App.tsx
+++ b/examples/solid/filters-faceted/src/App.tsx
@@ -6,6 +6,7 @@ import {
   createFacetedUniqueValues,
   createFilteredRowModel,
   createTable,
+  filterFns,
   flexRender,
   globalFilteringFeature,
   tableFeatures,
@@ -17,7 +18,7 @@ import ColumnFilter from './ColumnFilter'
 import type { Person } from './makeData'
 import type { ColumnDef, ColumnFiltersState } from '@tanstack/solid-table'
 
-const _features = tableFeatures({
+export const _features = tableFeatures({
   columnFilteringFeature,
   globalFilteringFeature,
   columnFacetingFeature,
@@ -91,7 +92,7 @@ function App() {
       facetedRowModel: createFacetedRowModel(),
       facetedMinMaxValues: createFacetedMinMaxValues(),
       facetedUniqueValues: createFacetedUniqueValues(),
-      filteredRowModel: createFilteredRowModel(),
+      filteredRowModel: createFilteredRowModel(filterFns),
     },
     get data() {
       return data()
@@ -157,7 +158,7 @@ function App() {
           
             {(row) => (
               
-                
+                
                   {(cell) => (
                     
                       {flexRender(
diff --git a/examples/solid/filters-faceted/src/ColumnFilter.tsx b/examples/solid/filters-faceted/src/ColumnFilter.tsx
index efb3bd7888..6d929903ae 100644
--- a/examples/solid/filters-faceted/src/ColumnFilter.tsx
+++ b/examples/solid/filters-faceted/src/ColumnFilter.tsx
@@ -1,10 +1,12 @@
 import { debounce } from '@solid-primitives/scheduled'
 import { For, Show, createMemo } from 'solid-js'
+import type { Person } from './makeData'
+import type { _features } from './App'
 import type { Column, Table } from '@tanstack/solid-table'
 
 function ColumnFilter(props: {
-  column: Column
-  table: Table
+  column: Column
+  table: Table
 }) {
   const firstValue = props.table
     .getPreFilteredRowModel()
diff --git a/examples/solid/filters/src/App.tsx b/examples/solid/filters/src/App.tsx
index 8e8253c8b9..07ade1044a 100644
--- a/examples/solid/filters/src/App.tsx
+++ b/examples/solid/filters/src/App.tsx
@@ -1,4 +1,5 @@
 import {
+  columnFacetingFeature,
   columnFilteringFeature,
   createFacetedMinMaxValues,
   createFacetedRowModel,
@@ -20,6 +21,7 @@ import type { ColumnDef, ColumnFiltersState } from '@tanstack/solid-table'
 export const _features = tableFeatures({
   columnFilteringFeature,
   globalFilteringFeature,
+  columnFacetingFeature,
 })
 
 const columns: Array> = [
@@ -93,7 +95,7 @@ function App() {
       facetedRowModel: createFacetedRowModel(),
       facetedMinMaxValues: createFacetedMinMaxValues(),
       facetedUniqueValues: createFacetedUniqueValues(),
-      filteredRowModel: createFilteredRowModel({ filterFns }),
+      filteredRowModel: createFilteredRowModel(filterFns),
     },
     get data() {
       return data()
diff --git a/examples/solid/sorting/src/App.tsx b/examples/solid/sorting/src/App.tsx
index a966b69012..dde484a742 100644
--- a/examples/solid/sorting/src/App.tsx
+++ b/examples/solid/sorting/src/App.tsx
@@ -3,6 +3,7 @@ import {
   createTable,
   flexRender,
   rowSortingFeature,
+  sortFns,
   tableFeatures,
 } from '@tanstack/solid-table'
 import { For, Show, createSignal } from 'solid-js'
@@ -72,7 +73,7 @@ function App() {
   const table = createTable({
     _features,
     _rowModels: {
-      sortedRowModel: createSortedRowModel(),
+      sortedRowModel: createSortedRowModel(sortFns),
     },
     get data() {
       return data()
diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte
index 1afe0eb8f8..6452d90cbf 100644
--- a/examples/svelte/column-pinning/src/App.svelte
+++ b/examples/svelte/column-pinning/src/App.svelte
@@ -17,6 +17,7 @@
     createTable,
     createTableState,
     tableFeatures,
+    sortFns,
   } from '@tanstack/svelte-table'
   import './index.css'
   import { makeData, type Person } from './makeData'
@@ -97,7 +98,9 @@
 
   const table = createTable({
     _features,
-    _rowModels: { sortedRowModel: createSortedRowModel() },
+    _rowModels: {
+      sortedRowModel: createSortedRowModel(sortFns),
+    },
     get data() {
       return data
     },
diff --git a/examples/svelte/sorting/src/App.svelte b/examples/svelte/sorting/src/App.svelte
index 58c81c6f74..4cfb768772 100644
--- a/examples/svelte/sorting/src/App.svelte
+++ b/examples/svelte/sorting/src/App.svelte
@@ -85,7 +85,7 @@
   const table = createTable({
     _features,
     _rowModels: {
-      sortedRowModel: createSortedRowModel({ sortFns }),
+      sortedRowModel: createSortedRowModel(sortFns),
     },
     get data() {
       return data
diff --git a/examples/vue/filters/src/App.vue b/examples/vue/filters/src/App.vue
index 5644d0ba16..e82cdb25f7 100644
--- a/examples/vue/filters/src/App.vue
+++ b/examples/vue/filters/src/App.vue
@@ -2,14 +2,17 @@
 import {
   ColumnFiltersState,
   FlexRender,
+  Updater,
+  columnFacetingFeature,
   columnFilteringFeature,
   createColumnHelper,
-  createCoreRowModel,
   createFacetedMinMaxValues,
   createFacetedRowModel,
   createFacetedUniqueValues,
   createFilteredRowModel,
+  filterFns,
   globalFilteringFeature,
+  isFunction,
   tableFeatures,
   useTable,
 } from '@tanstack/vue-table'
@@ -17,7 +20,7 @@ import { ref } from 'vue'
 import DebouncedInput from './DebouncedInput.vue'
 import Filter from './Filter.vue'
 
-type Person = {
+export type Person = {
   firstName: string
   lastName: string
   age: number
@@ -53,12 +56,14 @@ const defaultData: Person[] = [
   },
 ]
 
-const _features = tableFeatures({
+export const _features = tableFeatures({
   columnFilteringFeature,
   globalFilteringFeature,
+  columnFacetingFeature,
 })
 
 const columnHelper = createColumnHelper()
+
 const columns = [
   columnHelper.group({
     header: 'Name',
@@ -110,7 +115,15 @@ const rerender = () => {
 }
 const columnFilters = ref([])
 const globalFilter = ref('')
+
 const table = useTable({
+  _features,
+  _rowModels: {
+    filteredRowModel: createFilteredRowModel(filterFns),
+    facetedRowModel: createFacetedRowModel(),
+    facetedMinMaxValues: createFacetedMinMaxValues(),
+    facetedUniqueValues: createFacetedUniqueValues(),
+  },
   get data() {
     return data.value
   },
@@ -123,23 +136,16 @@ const table = useTable({
       return globalFilter.value
     },
   },
-  onColumnFiltersChange: (updaterOrValue) => {
-    columnFilters.value =
-      typeof updaterOrValue === 'function'
-        ? updaterOrValue(columnFilters.value)
-        : updaterOrValue
+  onColumnFiltersChange: (updaterOrValue: Updater) => {
+    columnFilters.value = isFunction(updaterOrValue)
+      ? updaterOrValue(columnFilters.value)
+      : updaterOrValue
   },
-  onGlobalFilterChange: (updaterOrValue) => {
-    globalFilter.value =
-      typeof updaterOrValue === 'function'
-        ? updaterOrValue(globalFilter.value)
-        : updaterOrValue
+  onGlobalFilterChange: (updaterOrValue: Updater) => {
+    globalFilter.value = isFunction(updaterOrValue)
+      ? updaterOrValue(globalFilter.value)
+      : updaterOrValue
   },
-  getCoreRowModel: createCoreRowModel(),
-  getFilteredRowModel: createFilteredRowModel(),
-  getFacetedRowModel: createFacetedRowModel(),
-  getFacetedUniqueValues: createFacetedUniqueValues(),
-  getFacetedMinMaxValues: createFacetedMinMaxValues(),
 })
 
 
@@ -180,7 +186,7 @@ const table = useTable({
       
       
         
-          
+          
             >,
+    type: Object as PropType>,
     required: true,
   },
   table: {
-    type: Object as PropType>,
+    type: Object as PropType>,
     required: true,
   },
 })
+
 const firstValue = computed(() =>
   props.table.getPreFilteredRowModel().flatRows[0]?.getValue(props.column.id),
 )
+
 const columnFilterValue = computed(() => props.column.getFilterValue())
 const sortedUniqueValues = computed(() =>
   typeof firstValue.value === 'number'
diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue
index fbe1c46db2..3e831e8058 100644
--- a/examples/vue/sorting/src/App.vue
+++ b/examples/vue/sorting/src/App.vue
@@ -1,16 +1,24 @@
 
@@ -133,7 +142,7 @@ const table = useTable({
 
       
         
-          
+          
             ({
-  filterFns,
-}:
-  | {
-      filterFns?: Record>
-    }
-  | undefined = {}): (
+>(
+  filterFns: Record>,
+): (
   table: Table_Internal,
 ) => () => RowModel {
   return (table) => {
diff --git a/packages/table-core/src/features/column-grouping/createGroupedRowModel.ts b/packages/table-core/src/features/column-grouping/createGroupedRowModel.ts
index 2cfbee9a94..4ef2d4ec85 100644
--- a/packages/table-core/src/features/column-grouping/createGroupedRowModel.ts
+++ b/packages/table-core/src/features/column-grouping/createGroupedRowModel.ts
@@ -22,16 +22,9 @@ import type { RowData } from '../../types/type-utils'
 export function createGroupedRowModel<
   TFeatures extends TableFeatures,
   TData extends RowData = any,
->({
-  aggregationFns,
-}:
-  | {
-      aggregationFns?: Record<
-        keyof AggregationFns,
-        AggregationFn
-      >
-    }
-  | undefined = {}): (
+>(
+  aggregationFns: Record>,
+): (
   table: Table_Internal,
 ) => () => RowModel {
   return (table) => {
diff --git a/packages/table-core/src/features/row-sorting/createSortedRowModel.ts b/packages/table-core/src/features/row-sorting/createSortedRowModel.ts
index d16c2258d9..a969306f46 100644
--- a/packages/table-core/src/features/row-sorting/createSortedRowModel.ts
+++ b/packages/table-core/src/features/row-sorting/createSortedRowModel.ts
@@ -12,13 +12,9 @@ import type { RowData } from '../../types/type-utils'
 export function createSortedRowModel<
   TFeatures extends TableFeatures,
   TData extends RowData = any,
->({
-  sortFns,
-}:
-  | {
-      sortFns?: Record>
-    }
-  | undefined = {}): (
+>(
+  sortFns: Record>,
+): (
   table: Table_Internal,
 ) => () => RowModel {
   return (table) => {