From a6983e4ca30c2cd84525f69aa7faacbbff579c7f Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sun, 13 Oct 2024 08:56:54 -0500 Subject: [PATCH] large simplification of processingFns and get rid of TFns generic --- docs/api/core/cell.md | 12 +- docs/api/core/column-def.md | 24 +-- docs/api/core/column.md | 10 +- docs/api/core/header-group.md | 2 +- docs/api/core/header.md | 46 +++--- docs/api/core/row.md | 10 +- docs/api/core/table.md | 46 +++--- docs/api/features/column-faceting.md | 4 +- docs/api/features/column-filtering.md | 27 ++-- docs/api/features/column-pinning.md | 36 ++--- docs/api/features/column-visibility.md | 12 +- docs/api/features/expanding.md | 10 +- docs/api/features/global-faceting.md | 2 +- docs/api/features/global-filtering.md | 17 +- docs/api/features/grouping.md | 26 +-- docs/api/features/pagination.md | 6 +- docs/api/features/row-pinning.md | 8 +- docs/api/features/row-selection.md | 14 +- docs/api/features/sorting.md | 14 +- docs/framework/angular/angular-table.md | 8 +- docs/guide/column-filtering.md | 2 +- docs/guide/column-ordering.md | 6 +- docs/guide/custom-features.md | 52 +++--- docs/guide/sorting.md | 4 +- examples/angular/basic/src/app/app.config.ts | 1 - .../filters/src/app/table-filter.component.ts | 6 +- .../row-selection-signal/src/app/filter.ts | 2 +- .../angular/row-selection/src/app/filter.ts | 2 +- examples/lit/column-sizing/src/main.ts | 1 - examples/lit/filters/src/main.ts | 3 +- examples/qwik/basic/src/main.tsx | 2 - examples/qwik/filters/src/main.tsx | 3 - examples/qwik/row-selection/src/main.tsx | 2 - examples/qwik/sorting/src/main.tsx | 1 - examples/react/basic/src/main.tsx | 2 +- examples/react/column-dnd/src/main.tsx | 1 - examples/react/column-groups/src/main.tsx | 8 +- examples/react/column-ordering/src/main.tsx | 2 +- examples/react/column-pinning/src/main.tsx | 4 +- .../column-resizing-performant/src/main.tsx | 2 +- examples/react/column-sizing/src/main.tsx | 2 +- examples/react/column-visibility/src/main.tsx | 2 +- examples/react/custom-features/src/main.tsx | 50 +++--- examples/react/editable-data/src/main.tsx | 6 +- examples/react/expanding/src/main.tsx | 2 +- examples/react/filters-faceted/src/main.tsx | 16 +- examples/react/filters-fuzzy/src/main.tsx | 55 ++++--- examples/react/filters/src/main.tsx | 22 +-- .../full-width-resizable-table/src/main.tsx | 1 - examples/react/full-width-table/src/main.tsx | 1 - examples/react/fully-controlled/src/main.tsx | 2 - examples/react/grouping/src/main.tsx | 2 - examples/react/kitchen-sink/src/App.tsx | 1 - examples/react/kitchen-sink/src/main.tsx | 1 - .../material-ui-pagination/src/actions.tsx | 1 - .../react/material-ui-pagination/src/main.tsx | 5 +- .../react/pagination-controlled/src/main.tsx | 3 - examples/react/pagination/src/main.tsx | 37 +++-- .../query-router-search-params/src/main.tsx | 1 - .../src/utils/userColumns.tsx | 1 - examples/react/row-dnd/src/main.tsx | 2 - examples/react/row-pinning/src/main.tsx | 2 +- examples/react/row-selection/src/main.tsx | 2 +- examples/react/sorting/src/main.tsx | 17 +- examples/react/sub-components/src/main.tsx | 8 +- .../react/virtualized-columns/src/main.tsx | 4 - .../src/main.tsx | 2 - examples/react/virtualized-rows/src/main.tsx | 4 - examples/solid/basic/src/App.tsx | 2 +- examples/solid/basic/src/index.tsx | 1 - examples/solid/column-groups/src/App.tsx | 2 +- examples/solid/column-groups/src/index.tsx | 1 - examples/solid/column-ordering/src/App.tsx | 2 +- examples/solid/column-ordering/src/index.tsx | 1 - examples/solid/column-visibility/src/App.tsx | 2 +- .../solid/column-visibility/src/index.tsx | 1 - examples/solid/filters/src/App.tsx | 2 +- examples/solid/filters/src/ColumnFilter.tsx | 4 +- examples/solid/filters/src/index.tsx | 1 - examples/solid/sorting/src/App.tsx | 2 +- examples/solid/sorting/src/index.tsx | 1 - examples/svelte/filtering/src/main.ts | 2 - examples/vue/column-ordering/src/App.vue | 3 +- examples/vue/column-pinning/src/App.vue | 3 +- .../vue/pagination-controlled/src/App.vue | 2 - examples/vue/row-selection/src/App.vue | 1 - packages/angular-table/src/injectTable.ts | 43 +++-- packages/angular-table/src/proxy.ts | 26 +-- .../tests/createAngularTable.test.ts | 4 +- packages/angular-table/tests/test-setup.ts | 1 - packages/lit-table/src/index.ts | 7 +- packages/qwik-table/src/index.tsx | 7 +- .../react-table-devtools/src/Explorer.tsx | 1 - packages/react-table-devtools/src/index.tsx | 4 +- packages/react-table-devtools/src/utils.ts | 1 - packages/react-table/eslint.config.js | 1 - packages/react-table/src/tableHelper.ts | 14 +- packages/react-table/src/useTable.ts | 21 +-- packages/solid-table/src/createTable.ts | 7 +- packages/solid-table/src/tableHelper.ts | 12 +- packages/svelte-table/src/FlexRender.svelte | 14 +- .../svelte-table/src/createTable.svelte.ts | 9 +- packages/table-core/src/core/cells/Cells.ts | 6 +- .../table-core/src/core/cells/Cells.types.ts | 24 ++- .../table-core/src/core/cells/Cells.utils.ts | 20 +-- .../src/core/cells/constructCell.test.ts | 6 +- .../src/core/cells/constructCell.ts | 19 +-- .../table-core/src/core/columns/Columns.ts | 14 +- .../src/core/columns/Columns.types.ts | 38 ++--- .../src/core/columns/Columns.utils.ts | 56 +++---- .../src/core/columns/constructColumn.test.ts | 8 +- .../src/core/columns/constructColumn.ts | 20 ++- .../table-core/src/core/headers/Headers.ts | 14 +- .../src/core/headers/Headers.types.ts | 34 ++-- .../src/core/headers/Headers.utils.ts | 28 ++-- .../src/core/headers/buildHeaderGroups.ts | 23 ++- .../src/core/headers/constructHeader.test.ts | 8 +- .../src/core/headers/constructHeader.ts | 14 +- packages/table-core/src/core/rows/Rows.ts | 19 +-- .../table-core/src/core/rows/Rows.types.ts | 37 ++--- .../table-core/src/core/rows/Rows.utils.ts | 49 +++--- .../src/core/rows/constructRow.test.ts | 3 +- .../table-core/src/core/rows/constructRow.ts | 14 +- packages/table-core/src/core/table/Tables.ts | 9 +- .../table-core/src/core/table/Tables.types.ts | 38 ++--- .../table-core/src/core/table/Tables.utils.ts | 35 ++-- .../src/core/table/constructTable.test.ts | 1 + .../src/core/table/constructTable.ts | 16 +- .../src/core/table/createCoreRowModel.ts | 25 ++- .../column-faceting/ColumnFaceting.ts | 9 +- .../column-faceting/ColumnFaceting.types.ts | 4 +- .../column-faceting/ColumnFaceting.utils.ts | 18 +-- .../createFacetedMinMaxValues.ts | 9 +- .../column-faceting/createFacetedRowModel.ts | 13 +- .../createFacetedUniqueValues.ts | 4 +- .../column-filtering/ColumnFiltering.ts | 41 ++--- .../column-filtering/ColumnFiltering.types.ts | 49 ++---- .../column-filtering/ColumnFiltering.utils.ts | 82 ++++------ .../createFilteredRowModel.ts | 24 +-- .../column-filtering/filterRowsUtils.ts | 61 +++---- .../column-grouping/ColumnGrouping.ts | 47 ++---- .../column-grouping/ColumnGrouping.types.ts | 38 ++--- .../column-grouping/ColumnGrouping.utils.ts | 98 +++++------- .../column-grouping/createGroupedRowModel.ts | 39 ++--- .../column-ordering/ColumnOrdering.ts | 26 ++- .../column-ordering/ColumnOrdering.types.ts | 2 - .../column-ordering/ColumnOrdering.utils.ts | 37 ++--- .../features/column-pinning/ColumnPinning.ts | 37 ++--- .../column-pinning/ColumnPinning.types.ts | 51 +++--- .../column-pinning/ColumnPinning.utils.ts | 108 ++++--------- .../column-resizing/ColumnResizing.ts | 24 +-- .../column-resizing/ColumnResizing.utils.ts | 22 +-- .../features/column-sizing/ColumnSizing.ts | 24 +-- .../column-sizing/ColumnSizing.utils.ts | 51 +++--- .../column-visibility/ColumnVisibility.ts | 38 ++--- .../ColumnVisibility.types.ts | 11 +- .../ColumnVisibility.utils.ts | 61 +++---- .../global-faceting/GlobalFaceting.ts | 11 +- .../global-faceting/GlobalFaceting.types.ts | 4 +- .../global-faceting/GlobalFaceting.utils.ts | 14 +- .../global-filtering/GlobalFiltering.ts | 30 ++-- .../global-filtering/GlobalFiltering.types.ts | 18 +-- .../global-filtering/GlobalFiltering.utils.ts | 24 +-- .../features/row-expanding/RowExpanding.ts | 30 ++-- .../row-expanding/RowExpanding.types.ts | 16 +- .../row-expanding/RowExpanding.utils.ts | 70 ++------ .../row-expanding/createExpandedRowModel.ts | 66 ++++---- .../features/row-pagination/RowPagination.ts | 16 +- .../row-pagination/RowPagination.types.ts | 6 +- .../row-pagination/RowPagination.utils.ts | 62 +++----- .../row-pagination/createPaginatedRowModel.ts | 115 +++++++------- .../src/features/row-pinning/RowPinning.ts | 28 ++-- .../features/row-pinning/RowPinning.types.ts | 14 +- .../features/row-pinning/RowPinning.utils.ts | 56 ++----- .../features/row-selection/RowSelection.ts | 30 ++-- .../row-selection/RowSelection.types.ts | 40 ++--- .../row-selection/RowSelection.utils.ts | 121 ++++---------- .../src/features/row-sorting/RowSorting.ts | 20 +-- .../features/row-sorting/RowSorting.types.ts | 35 ++-- .../features/row-sorting/RowSorting.utils.ts | 94 ++++------- .../row-sorting/createSortedRowModel.ts | 45 +++--- packages/table-core/src/fns/aggregationFns.ts | 72 ++++----- packages/table-core/src/fns/filterFns.ts | 90 +++++------ packages/table-core/src/fns/sortingFns.ts | 43 +++-- .../table-core/src/helpers/columnHelper.ts | 21 ++- packages/table-core/src/helpers/tableFns.ts | 19 --- .../table-core/src/helpers/tableHelper.ts | 30 ++-- .../table-core/src/helpers/tableOptions.ts | 44 ++--- packages/table-core/src/index.ts | 3 +- packages/table-core/src/types/Cell.ts | 4 +- packages/table-core/src/types/Column.ts | 17 +- packages/table-core/src/types/ColumnDef.ts | 150 +++++------------- packages/table-core/src/types/Fns.ts | 36 ----- packages/table-core/src/types/Header.ts | 4 +- packages/table-core/src/types/HeaderGroup.ts | 7 +- .../table-core/src/types/ProcessingFns.ts | 36 +++++ packages/table-core/src/types/Row.ts | 14 +- packages/table-core/src/types/RowModel.ts | 56 +++---- packages/table-core/src/types/Table.ts | 45 +++--- .../table-core/src/types/TableFeatures.ts | 42 ++--- packages/table-core/src/types/TableOptions.ts | 34 ++-- packages/table-core/src/utils.ts | 7 +- packages/vue-table/src/index.ts | 21 +-- 203 files changed, 1610 insertions(+), 2653 deletions(-) delete mode 100644 packages/table-core/src/helpers/tableFns.ts delete mode 100644 packages/table-core/src/types/Fns.ts create mode 100644 packages/table-core/src/types/ProcessingFns.ts diff --git a/docs/api/core/cell.md b/docs/api/core/cell.md index d93acf4e77..aa2041f5bf 100644 --- a/docs/api/core/cell.md +++ b/docs/api/core/cell.md @@ -35,7 +35,7 @@ Renders the value for a cell the same as `getValue`, but will return the `render ### `row` ```tsx -row: Row +row: Row ``` The associated Row object for the cell. @@ -43,7 +43,7 @@ The associated Row object for the cell. ### `column` ```tsx -column: Column +column: Column ``` The associated Column object for the cell. @@ -52,10 +52,10 @@ The associated Column object for the cell. ```tsx getContext: () => { - table: Table - column: Column - row: Row - cell: Cell + table: Table + column: Column + row: Row + cell: Cell getValue: () => TTValue renderValue: () => TTValue | null } diff --git a/docs/api/core/column-def.md b/docs/api/core/column-def.md index ea52110de4..b53405b1f5 100644 --- a/docs/api/core/column-def.md +++ b/docs/api/core/column-def.md @@ -38,7 +38,7 @@ The accessor function to use when extracting the value for the column from each ### `columns` ```tsx -columns?: ColumnDef[] +columns?: ColumnDef[] ``` The child column defs to include in a group column. @@ -49,9 +49,9 @@ The child column defs to include in a group column. header?: | string | ((props: { - table: Table - header: Header - column: Column + table: Table + header: Header + column: Column }) => unknown) ``` @@ -63,9 +63,9 @@ The header to display for the column. If a string is passed, it can be used as a footer?: | string | ((props: { - table: Table - header: Header - column: Column + table: Table + header: Header + column: Column }) => unknown) ``` @@ -77,10 +77,10 @@ The footer to display for the column. If a function is passed, it will be passed cell?: | string | ((props: { - table: Table - row: Row - column: Column - cell: Cell + table: Table + row: Row + column: Column + cell: Cell getValue: () => any renderValue: () => any }) => unknown) @@ -100,7 +100,7 @@ The meta data to be associated with the column. We can access it anywhere when t import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc. declare module '@tanstack/react-table' { - interface ColumnMeta, TData extends RowData, TValue> { + interface ColumnMeta { foo: string } } diff --git a/docs/api/core/column.md b/docs/api/core/column.md index c826848ced..d4ad77bc07 100644 --- a/docs/api/core/column.md +++ b/docs/api/core/column.md @@ -39,7 +39,7 @@ The resolved accessor function to use when extracting the value for the column f ### `columnDef` ```tsx -columnDef: ColumnDef +columnDef: ColumnDef ``` The original column def used to create the column. @@ -47,7 +47,7 @@ The original column def used to create the column. ### `columns` ```tsx -type columns = ColumnDef[] +type columns = ColumnDef[] ``` The child column (if the column is a group column). Will be an empty array if the column is not a group column. @@ -55,7 +55,7 @@ The child column (if the column is a group column). Will be an empty array if th ### `parent` ```tsx -parent?: Column +parent?: Column ``` The parent column for this column. Will be undefined if this is a root column. @@ -63,7 +63,7 @@ The parent column for this column. Will be undefined if this is a root column. ### `getFlatColumns` ```tsx -type getFlatColumns = () => Column[] +type getFlatColumns = () => Column[] ``` Returns the flattened array of this column and all child/grand-child columns for this column. @@ -71,7 +71,7 @@ Returns the flattened array of this column and all child/grand-child columns for ### `getLeafColumns` ```tsx -type getLeafColumns = () => Column[] +type getLeafColumns = () => Column[] ``` Returns an array of all leaf-node columns for this column. If a column has no children, it is considered the only leaf-node column. diff --git a/docs/api/core/header-group.md b/docs/api/core/header-group.md index 58aeb459c6..221b65cdf7 100644 --- a/docs/api/core/header-group.md +++ b/docs/api/core/header-group.md @@ -27,7 +27,7 @@ The depth of the header group, zero-indexed based. ### `headers` ```tsx -type headers = Header[] +type headers = Header[] ``` An array of [Header](../header) objects that belong to this header group diff --git a/docs/api/core/header.md b/docs/api/core/header.md index ee47172057..ac1ca7c8b2 100644 --- a/docs/api/core/header.md +++ b/docs/api/core/header.md @@ -35,7 +35,7 @@ The depth of the header, zero-indexed based. ### `column` ```tsx -column: Column +column: Column ``` The header's associated [Column](../column) object @@ -43,7 +43,7 @@ The header's associated [Column](../column) object ### `headerGroup` ```tsx -headerGroup: HeaderGroup +headerGroup: HeaderGroup ``` The header's associated [HeaderGroup](../header-group) object @@ -51,7 +51,7 @@ The header's associated [HeaderGroup](../header-group) object ### `subHeaders` ```tsx -type subHeaders = Header[] +type subHeaders = Header[] ``` The header's hierarchical sub/child headers. Will be empty if the header's associated column is a leaf-column. @@ -75,7 +75,7 @@ The row-span for the header. ### `getLeafHeaders` ```tsx -type getLeafHeaders = () => Header[] +type getLeafHeaders = () => Header[] ``` Returns the leaf headers hierarchically nested under this header. @@ -100,9 +100,9 @@ If the header is a placeholder header, this will be a unique header ID that does ```tsx getContext: () => { - table: Table - header: Header - column: Column + table: Table + header: Header + column: Column } ``` @@ -117,7 +117,7 @@ flexRender(header.column.columnDef.header, header.getContext()) ### `getHeaderGroups` ```tsx -type getHeaderGroups = () => HeaderGroup[] +type getHeaderGroups = () => HeaderGroup[] ``` Returns all header groups for the table. @@ -125,7 +125,7 @@ Returns all header groups for the table. ### `getLeftHeaderGroups` ```tsx -type getLeftHeaderGroups = () => HeaderGroup[] +type getLeftHeaderGroups = () => HeaderGroup[] ``` If pinning, returns the header groups for the left pinned columns. @@ -133,7 +133,7 @@ If pinning, returns the header groups for the left pinned columns. ### `getCenterHeaderGroups` ```tsx -type getCenterHeaderGroups = () => HeaderGroup[] +type getCenterHeaderGroups = () => HeaderGroup[] ``` If pinning, returns the header groups for columns that are not pinned. @@ -141,7 +141,7 @@ If pinning, returns the header groups for columns that are not pinned. ### `getRightHeaderGroups` ```tsx -type getRightHeaderGroups = () => HeaderGroup[] +type getRightHeaderGroups = () => HeaderGroup[] ``` If pinning, returns the header groups for the right pinned columns. @@ -149,7 +149,7 @@ If pinning, returns the header groups for the right pinned columns. ### `getFooterGroups` ```tsx -type getFooterGroups = () => HeaderGroup[] +type getFooterGroups = () => HeaderGroup[] ``` Returns all footer groups for the table. @@ -157,7 +157,7 @@ Returns all footer groups for the table. ### `getLeftFooterGroups` ```tsx -type getLeftFooterGroups = () => HeaderGroup[] +type getLeftFooterGroups = () => HeaderGroup[] ``` If pinning, returns the footer groups for the left pinned columns. @@ -165,7 +165,7 @@ If pinning, returns the footer groups for the left pinned columns. ### `getCenterFooterGroups` ```tsx -type getCenterFooterGroups = () => HeaderGroup[] +type getCenterFooterGroups = () => HeaderGroup[] ``` If pinning, returns the footer groups for columns that are not pinned. @@ -173,7 +173,7 @@ If pinning, returns the footer groups for columns that are not pinned. ### `getRightFooterGroups` ```tsx -type getRightFooterGroups = () => HeaderGroup[] +type getRightFooterGroups = () => HeaderGroup[] ``` If pinning, returns the footer groups for the right pinned columns. @@ -181,7 +181,7 @@ If pinning, returns the footer groups for the right pinned columns. ### `getFlatHeaders` ```tsx -type getFlatHeaders = () => Header[] +type getFlatHeaders = () => Header[] ``` Returns headers for all columns in the table, including parent headers. @@ -189,7 +189,7 @@ Returns headers for all columns in the table, including parent headers. ### `getLeftFlatHeaders` ```tsx -type getLeftFlatHeaders = () => Header[] +type getLeftFlatHeaders = () => Header[] ``` If pinning, returns headers for all left pinned columns in the table, including parent headers. @@ -197,7 +197,7 @@ If pinning, returns headers for all left pinned columns in the table, including ### `getCenterFlatHeaders` ```tsx -type getCenterFlatHeaders = () => Header[] +type getCenterFlatHeaders = () => Header[] ``` If pinning, returns headers for all columns that are not pinned, including parent headers. @@ -205,7 +205,7 @@ If pinning, returns headers for all columns that are not pinned, including paren ### `getRightFlatHeaders` ```tsx -type getRightFlatHeaders = () => Header[] +type getRightFlatHeaders = () => Header[] ``` If pinning, returns headers for all right pinned columns in the table, including parent headers. @@ -213,7 +213,7 @@ If pinning, returns headers for all right pinned columns in the table, including ### `getLeafHeaders` ```tsx -type getLeafHeaders = () => Header[] +type getLeafHeaders = () => Header[] ``` Returns headers for all leaf columns in the table, (not including parent headers). @@ -221,7 +221,7 @@ Returns headers for all leaf columns in the table, (not including parent headers ### `getLeftLeafHeaders` ```tsx -type getLeftLeafHeaders = () => Header[] +type getLeftLeafHeaders = () => Header[] ``` If pinning, returns headers for all left pinned leaf columns in the table, (not including parent headers). @@ -229,7 +229,7 @@ If pinning, returns headers for all left pinned leaf columns in the table, (not ### `getCenterLeafHeaders` ```tsx -type getCenterLeafHeaders = () => Header[] +type getCenterLeafHeaders = () => Header[] ``` If pinning, returns headers for all columns that are not pinned, (not including parent headers). @@ -237,7 +237,7 @@ If pinning, returns headers for all columns that are not pinned, (not including ### `getRightLeafHeaders` ```tsx -type getRightLeafHeaders = () => Header[] +type getRightLeafHeaders = () => Header[] ``` If pinning, returns headers for all right pinned leaf columns in the table, (not including parent headers). diff --git a/docs/api/core/row.md b/docs/api/core/row.md index cd4544c11e..72c01d3422 100644 --- a/docs/api/core/row.md +++ b/docs/api/core/row.md @@ -77,7 +77,7 @@ Returns a unique array of values from the row for a given columnId. ### `subRows` ```tsx -type subRows = Row[] +type subRows = Row[] ``` An array of subRows for the row as returned and created by the `options.getSubRows` option. @@ -85,7 +85,7 @@ An array of subRows for the row as returned and created by the `options.getSubRo ### `getParentRow` ```tsx -type getParentRow = () => Row | undefined +type getParentRow = () => Row | undefined ``` Returns the parent row for the row, if it exists. @@ -93,7 +93,7 @@ Returns the parent row for the row, if it exists. ### `getParentRows` ```tsx -type getParentRows = () => Row[] +type getParentRows = () => Row[] ``` Returns the parent rows for the row, all the way up to a root row. @@ -101,7 +101,7 @@ Returns the parent rows for the row, all the way up to a root row. ### `getLeafRows` ```tsx -type getLeafRows = () => Row[] +type getLeafRows = () => Row[] ``` Returns the leaf rows for the row, not including any parent rows. @@ -117,7 +117,7 @@ An array of the original subRows as returned by the `options.getSubRows` option. ### `getAllCells` ```tsx -type getAllCells = () => Cell[] +type getAllCells = () => Cell[] ``` Returns all of the [Cells](../cell) for the row. diff --git a/docs/api/core/table.md b/docs/api/core/table.md index fc0c34d0ba..dc00a0182f 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -6,8 +6,8 @@ title: Table APIs ```tsx type useTable = ( - options: TableOptions -) => Table + options: TableOptions +) => Table ``` These functions are used to create a table. Which one you use depends on which framework adapter you are using. @@ -31,7 +31,7 @@ When the `data` option changes reference (compared via `Object.is`), the table w ### `columns` ```tsx -type columns = ColumnDef[] +type columns = ColumnDef[] ``` The array of column defs to use for the table. See the [Column Defs Guide](../../docs/guide/column-defs) for more information on creating column definitions. @@ -39,7 +39,7 @@ The array of column defs to use for the table. See the [Column Defs Guide](../.. ### `defaultColumn` ```tsx -defaultColumn?: Partial> +defaultColumn?: Partial> ``` Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc. All column definitions passed to `options.columns` are merged with this default column definition to produce the final column definitions. @@ -83,7 +83,7 @@ You can pass any object to `options.meta` and access it anywhere the `table` is ```tsx declare module '@tanstack/table-core' { - interface TableMeta, TData extends RowData> { + interface TableMeta { foo: string } } @@ -199,7 +199,7 @@ This option is used to optionally implement the merging of table options. Some f ### `getCoreRowModel` ```tsx -getCoreRowModel: (table: Table) => () => RowModel +getCoreRowModel: (table: Table) => () => RowModel ``` This required option is a factory for a function that computes and returns the core row model for the table. It is called **once** per table and should return a **new function** which will calculate and return the row model for the table. @@ -223,7 +223,7 @@ This optional function is used to access the sub rows for any given row. If you getRowId?: ( originalRow: TData, index: number, - parent?: Row + parent?: Row ) => string ``` @@ -281,7 +281,7 @@ Call this function to update the table state. It's recommended you pass an updat ### `options` ```tsx -options: TableOptions +options: TableOptions ``` A read-only reference to the table's current options. @@ -291,7 +291,7 @@ A read-only reference to the table's current options. ### `setOptions` ```tsx -setOptions: (newOptions: Updater>) => void +setOptions: (newOptions: Updater>) => void ``` > ⚠️ This function is generally used by adapters to update the table options. It can be used to update the table options directly, but it is generally not recommended to bypass your adapters strategy for updating table options. @@ -300,9 +300,9 @@ setOptions: (newOptions: Updater>) => void ```tsx getCoreRowModel: () => { - rows: Row[], - flatRows: Row[], - rowsById: Record>, + rows: Row[], + flatRows: Row[], + rowsById: Record>, } ``` @@ -312,9 +312,9 @@ Returns the core row model before any processing has been applied. ```tsx getRowModel: () => { - rows: Row[], - flatRows: Row[], - rowsById: Record>, + rows: Row[], + flatRows: Row[], + rowsById: Record>, } ``` @@ -323,7 +323,7 @@ Returns the final model after all processing from other used features has been a ### `getAllColumns` ```tsx -type getAllColumns = () => Column[] +type getAllColumns = () => Column[] ``` Returns all columns in the table in their normalized and nested hierarchy, mirrored from the column defs passed to the table. @@ -331,7 +331,7 @@ Returns all columns in the table in their normalized and nested hierarchy, mirro ### `getAllFlatColumns` ```tsx -type getAllFlatColumns = () => Column[] +type getAllFlatColumns = () => Column[] ``` Returns all columns in the table flattened to a single level. This includes parent column objects throughout the hierarchy. @@ -339,7 +339,7 @@ Returns all columns in the table flattened to a single level. This includes pare ### `getAllLeafColumns` ```tsx -type getAllLeafColumns = () => Column[] +type getAllLeafColumns = () => Column[] ``` Returns all leaf-node columns in the table flattened to a single level. This does not include parent columns. @@ -347,7 +347,7 @@ Returns all leaf-node columns in the table flattened to a single level. This doe ### `getColumn` ```tsx -type getColumn = (id: string) => Column | undefined +type getColumn = (id: string) => Column | undefined ``` Returns a single column by its ID. @@ -355,7 +355,7 @@ Returns a single column by its ID. ### `getHeaderGroups` ```tsx -type getHeaderGroups = () => HeaderGroup[] +type getHeaderGroups = () => HeaderGroup[] ``` Returns the header groups for the table. @@ -363,7 +363,7 @@ Returns the header groups for the table. ### `getFooterGroups` ```tsx -type getFooterGroups = () => HeaderGroup[] +type getFooterGroups = () => HeaderGroup[] ``` Returns the footer groups for the table. @@ -371,7 +371,7 @@ Returns the footer groups for the table. ### `getFlatHeaders` ```tsx -type getFlatHeaders = () => Header[] +type getFlatHeaders = () => Header[] ``` Returns a flattened array of Header objects for the table, including parent headers. @@ -379,7 +379,7 @@ Returns a flattened array of Header objects for the table, including parent head ### `getLeafHeaders` ```tsx -type getLeafHeaders = () => Header[] +type getLeafHeaders = () => Header[] ``` Returns a flattened array of leaf-node Header objects for the table. diff --git a/docs/api/features/column-faceting.md b/docs/api/features/column-faceting.md index 1853a94bb8..b80629037f 100644 --- a/docs/api/features/column-faceting.md +++ b/docs/api/features/column-faceting.md @@ -8,7 +8,7 @@ id: column-faceting ### `getFacetedRowModel` ```tsx -type getFacetedRowModel = () => RowModel +type getFacetedRowModel = () => RowModel ``` > ⚠️ Requires that you pass a valid `getFacetedRowModel` function to `options.facetedRowModel`. A default implementation is provided via the exported `getFacetedRowModel` function. @@ -40,7 +40,7 @@ A function that **computes and returns** a min/max tuple derived from `column.ge ### `getColumnFacetedRowModel` ```tsx -getColumnFacetedRowModel: (columnId: string) => RowModel +getColumnFacetedRowModel: (columnId: string) => RowModel ``` Returns the faceted row model for a given columnId. diff --git a/docs/api/features/column-filtering.md b/docs/api/features/column-filtering.md index 89efff9b4b..e12bd4dbf1 100644 --- a/docs/api/features/column-filtering.md +++ b/docs/api/features/column-filtering.md @@ -67,29 +67,29 @@ This is the type signature for every filter function: ```tsx export type FilterFn = { ( - row: Row, + row: Row, columnId: string, filterValue: any, addMeta: (meta: any) => void ): boolean - resolveFilterValue?: TransformFilterValueFn - autoRemove?: ColumnFilterAutoRemoveTestFn + resolveFilterValue?: TransformFilterValueFn + autoRemove?: ColumnFilterAutoRemoveTestFn addMeta?: (meta?: any) => void } export type TransformFilterValueFn = ( value: any, - column?: Column + column?: Column ) => unknown export type ColumnFilterAutoRemoveTestFn = ( value: any, - column?: Column + column?: Column ) => boolean export type CustomFilterFns = Record< string, - FilterFn + FilterFn > ``` @@ -114,7 +114,7 @@ The final list of filter functions available for the `columnDef.filterFn` option export type FilterFnOption = | 'auto' | BuiltInFilterFn - | FilterFn + | FilterFn ``` #### Filter Meta @@ -127,7 +127,6 @@ Below is an example using our own `match-sorter-utils` package (a utility fork o ```tsx import { sortingFns } from '@tanstack/react-table' - import { rankItem, compareItems } from '@tanstack/match-sorter-utils' const fuzzyFilter = (row, columnId, value, addMeta) => { @@ -225,7 +224,7 @@ A function that sets the current filter value for the column. You can pass it a ### `getAutoFilterFn` ```tsx -getAutoFilterFn: (columnId: string) => FilterFn | undefined +getAutoFilterFn: (columnId: string) => FilterFn | undefined ``` Returns an automatically calculated filter function for the column based off of the columns first known value. @@ -233,7 +232,7 @@ Returns an automatically calculated filter function for the column based off of ### `getFilterFn` ```tsx -getFilterFn: (columnId: string) => FilterFn | undefined +getFilterFn: (columnId: string) => FilterFn | undefined ``` Returns the filter function (either user-defined or automatic, depending on configuration) for the columnId specified. @@ -342,8 +341,8 @@ Enables/disables **all** column filters for the table. ```tsx getFilteredRowModel?: ( - table: Table -) => () => RowModel + table: Table +) => () => RowModel ``` If provided, this function is called **once** per table and should return a **new function** which will calculate and return the row model for the table when it's filtered. @@ -382,7 +381,7 @@ Resets the **columnFilters** state to `initialState.columnFilters`, or `true` ca ### `getPreFilteredRowModel` ```tsx -getPreFilteredRowModel: () => RowModel +getPreFilteredRowModel: () => RowModel ``` Returns the row model for the table before any **column** filtering has been applied. @@ -390,7 +389,7 @@ Returns the row model for the table before any **column** filtering has been app ### `getFilteredRowModel` ```tsx -getFilteredRowModel: () => RowModel +getFilteredRowModel: () => RowModel ``` Returns the row model for the table after **column** filtering has been applied. diff --git a/docs/api/features/column-pinning.md b/docs/api/features/column-pinning.md index 72da25489b..6adc0b1afe 100644 --- a/docs/api/features/column-pinning.md +++ b/docs/api/features/column-pinning.md @@ -88,7 +88,7 @@ _Note: Does not account for column visibility_ ### `getLeftHeaderGroups` ```tsx -getLeftHeaderGroups: () => HeaderGroup[] +getLeftHeaderGroups: () => HeaderGroup[] ``` Returns the left pinned header groups for the table. @@ -96,7 +96,7 @@ Returns the left pinned header groups for the table. ### `getCenterHeaderGroups` ```tsx -getCenterHeaderGroups: () => HeaderGroup[] +getCenterHeaderGroups: () => HeaderGroup[] ``` Returns the unpinned/center header groups for the table. @@ -104,7 +104,7 @@ Returns the unpinned/center header groups for the table. ### `getRightHeaderGroups` ```tsx -getRightHeaderGroups: () => HeaderGroup[] +getRightHeaderGroups: () => HeaderGroup[] ``` Returns the right pinned header groups for the table. @@ -112,7 +112,7 @@ Returns the right pinned header groups for the table. ### `getLeftFooterGroups` ```tsx -getLeftFooterGroups: () => HeaderGroup[] +getLeftFooterGroups: () => HeaderGroup[] ``` Returns the left pinned footer groups for the table. @@ -120,7 +120,7 @@ Returns the left pinned footer groups for the table. ### `getCenterFooterGroups` ```tsx -getCenterFooterGroups: () => HeaderGroup[] +getCenterFooterGroups: () => HeaderGroup[] ``` Returns the unpinned/center footer groups for the table. @@ -128,7 +128,7 @@ Returns the unpinned/center footer groups for the table. ### `getRightFooterGroups` ```tsx -getRightFooterGroups: () => HeaderGroup[] +getRightFooterGroups: () => HeaderGroup[] ``` Returns the right pinned footer groups for the table. @@ -136,7 +136,7 @@ Returns the right pinned footer groups for the table. ### `getLeftFlatHeaders` ```tsx -getLeftFlatHeaders: () => Header[] +getLeftFlatHeaders: () => Header[] ``` Returns a flat array of left pinned headers for the table, including parent headers. @@ -144,7 +144,7 @@ Returns a flat array of left pinned headers for the table, including parent head ### `getCenterFlatHeaders` ```tsx -getCenterFlatHeaders: () => Header[] +getCenterFlatHeaders: () => Header[] ``` Returns a flat array of unpinned/center headers for the table, including parent headers. @@ -152,7 +152,7 @@ Returns a flat array of unpinned/center headers for the table, including parent ### `getRightFlatHeaders` ```tsx -getRightFlatHeaders: () => Header[] +getRightFlatHeaders: () => Header[] ``` Returns a flat array of right pinned headers for the table, including parent headers. @@ -160,7 +160,7 @@ Returns a flat array of right pinned headers for the table, including parent hea ### `getLeftLeafHeaders` ```tsx -getLeftLeafHeaders: () => Header[] +getLeftLeafHeaders: () => Header[] ``` Returns a flat array of leaf-node left pinned headers for the table. @@ -168,7 +168,7 @@ Returns a flat array of leaf-node left pinned headers for the table. ### `getCenterLeafHeaders` ```tsx -getCenterLeafHeaders: () => Header[] +getCenterLeafHeaders: () => Header[] ``` Returns a flat array of leaf-node unpinned/center headers for the table. @@ -176,7 +176,7 @@ Returns a flat array of leaf-node unpinned/center headers for the table. ### `getRightLeafHeaders` ```tsx -getRightLeafHeaders: () => Header[] +getRightLeafHeaders: () => Header[] ``` Returns a flat array of leaf-node right pinned headers for the table. @@ -184,7 +184,7 @@ Returns a flat array of leaf-node right pinned headers for the table. ### `getLeftLeafColumns` ```tsx -getLeftLeafColumns: () => Column[] +getLeftLeafColumns: () => Column[] ``` Returns all left pinned leaf columns. @@ -192,7 +192,7 @@ Returns all left pinned leaf columns. ### `getRightLeafColumns` ```tsx -getRightLeafColumns: () => Column[] +getRightLeafColumns: () => Column[] ``` Returns all right pinned leaf columns. @@ -200,7 +200,7 @@ Returns all right pinned leaf columns. ### `getCenterLeafColumns` ```tsx -getCenterLeafColumns: () => Column[] +getCenterLeafColumns: () => Column[] ``` Returns all center pinned (unpinned) leaf columns. @@ -244,7 +244,7 @@ Pins a column to the `'left'` or `'right'`, or unpins the column to the center i ### `getLeftVisibleCells` ```tsx -getLeftVisibleCells: () => Cell[] +getLeftVisibleCells: () => Cell[] ``` Returns all left pinned leaf cells in the row. @@ -252,7 +252,7 @@ Returns all left pinned leaf cells in the row. ### `getRightVisibleCells` ```tsx -getRightVisibleCells: () => Cell[] +getRightVisibleCells: () => Cell[] ``` Returns all right pinned leaf cells in the row. @@ -260,7 +260,7 @@ Returns all right pinned leaf cells in the row. ### `getCenterVisibleCells` ```tsx -getCenterVisibleCells: () => Cell[] +getCenterVisibleCells: () => Cell[] ``` Returns all center pinned (unpinned) leaf cells in the row. diff --git a/docs/api/features/column-visibility.md b/docs/api/features/column-visibility.md index 22f0ef497f..b0c8686a7a 100644 --- a/docs/api/features/column-visibility.md +++ b/docs/api/features/column-visibility.md @@ -82,7 +82,7 @@ Enables/disables hiding of columns. ### `getVisibleFlatColumns` ```tsx -getVisibleFlatColumns: () => Column[] +getVisibleFlatColumns: () => Column[] ``` Returns a flat array of columns that are visible, including parent columns. @@ -90,7 +90,7 @@ Returns a flat array of columns that are visible, including parent columns. ### `getVisibleLeafColumns` ```tsx -getVisibleLeafColumns: () => Column[] +getVisibleLeafColumns: () => Column[] ``` Returns a flat array of leaf-node columns that are visible. @@ -98,7 +98,7 @@ Returns a flat array of leaf-node columns that are visible. ### `getLeftVisibleLeafColumns` ```tsx -getLeftVisibleLeafColumns: () => Column[] +getLeftVisibleLeafColumns: () => Column[] ``` If column pinning, returns a flat array of leaf-node columns that are visible in the left portion of the table. @@ -106,7 +106,7 @@ If column pinning, returns a flat array of leaf-node columns that are visible in ### `getRightVisibleLeafColumns` ```tsx -getRightVisibleLeafColumns: () => Column[] +getRightVisibleLeafColumns: () => Column[] ``` If column pinning, returns a flat array of leaf-node columns that are visible in the right portion of the table. @@ -114,7 +114,7 @@ If column pinning, returns a flat array of leaf-node columns that are visible in ### `getCenterVisibleLeafColumns` ```tsx -getCenterVisibleLeafColumns: () => Column[] +getCenterVisibleLeafColumns: () => Column[] ``` If column pinning, returns a flat array of leaf-node columns that are visible in the unpinned/center portion of the table. @@ -172,7 +172,7 @@ Returns a handler for toggling the visibility of all columns, meant to be bound ### `getVisibleCells` ```tsx -getVisibleCells: () => Cell[] +getVisibleCells: () => Cell[] ``` Returns an array of cells that account for column visibility for the row. \ No newline at end of file diff --git a/docs/api/features/expanding.md b/docs/api/features/expanding.md index 368f8b99fe..d838513064 100644 --- a/docs/api/features/expanding.md +++ b/docs/api/features/expanding.md @@ -94,7 +94,7 @@ Enable/disable expanding for all rows. ### `getExpandedRowModel` ```tsx -getExpandedRowModel?: (table: Table) => () => RowModel +getExpandedRowModel?: (table: Table) => () => RowModel ``` This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported `getExpandedRowModel` function to get the expanded row model or implement your own. @@ -102,7 +102,7 @@ This function is responsible for returning the expanded row model. If this funct ### `getIsRowExpanded` ```tsx -getIsRowExpanded?: (row: Row) => boolean +getIsRowExpanded?: (row: Row) => boolean ``` If provided, allows you to override the default behavior of determining whether a row is currently expanded. @@ -110,7 +110,7 @@ If provided, allows you to override the default behavior of determining whether ### `getRowCanExpand` ```tsx -getRowCanExpand?: (row: Row) => boolean +getRowCanExpand?: (row: Row) => boolean ``` If provided, allows you to override the default behavior of determining whether a row can be expanded. @@ -194,7 +194,7 @@ Returns the maximum depth of the expanded rows. ### `getExpandedRowModel` ```tsx -getExpandedRowModel: () => RowModel +getExpandedRowModel: () => RowModel ``` Returns the row model after expansion has been applied. @@ -202,7 +202,7 @@ Returns the row model after expansion has been applied. ### `getPreExpandedRowModel` ```tsx -getPreExpandedRowModel: () => RowModel +getPreExpandedRowModel: () => RowModel ``` Returns the row model before expansion has been applied. diff --git a/docs/api/features/global-faceting.md b/docs/api/features/global-faceting.md index bd46f00bc6..489571e1c4 100644 --- a/docs/api/features/global-faceting.md +++ b/docs/api/features/global-faceting.md @@ -8,7 +8,7 @@ id: global-faceting ### `getGlobalFacetedRowModel` ```tsx -getGlobalFacetedRowModel: () => RowModel +getGlobalFacetedRowModel: () => RowModel ``` Returns the faceted row model for the global filter. diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md index 21d65c7146..dc272e4b41 100644 --- a/docs/api/features/global-filtering.md +++ b/docs/api/features/global-filtering.md @@ -40,7 +40,7 @@ The final list of filter functions available for the `tableOptions.globalFilterF export type FilterFnOption = | 'auto' | BuiltInFilterFn - | FilterFn + | FilterFn ``` #### Filter Meta @@ -53,7 +53,6 @@ Below is an example using our own `match-sorter-utils` package (a utility fork o ```tsx import { sortingFns } from '@tanstack/[adapter]-table' - import { rankItem, compareItems } from '@tanstack/match-sorter-utils' const fuzzyFilter = (row, columnId, value, addMeta) => { @@ -183,8 +182,8 @@ Disables the `getFilteredRowModel` from being used to filter data. This may be u ```tsx getFilteredRowModel?: ( - table: Table -) => () => RowModel + table: Table +) => () => RowModel ``` If provided, this function is called **once** per table and should return a **new function** which will calculate and return the row model for the table when it's filtered. @@ -234,7 +233,7 @@ Enables/disables the global filter for the table. ### `getColumnCanGlobalFilter` ```tsx -getColumnCanGlobalFilter?: (column: Column) => boolean +getColumnCanGlobalFilter?: (column: Column) => boolean ``` If provided, this function will be called with the column and should return `true` or `false` to indicate whether this column should be used for global filtering. @@ -245,7 +244,7 @@ This is useful if the column can contain data that is not `string` or `number` ( ### `getPreFilteredRowModel` ```tsx -getPreFilteredRowModel: () => RowModel +getPreFilteredRowModel: () => RowModel ``` Returns the row model for the table before any **column** filtering has been applied. @@ -253,7 +252,7 @@ Returns the row model for the table before any **column** filtering has been app ### `getFilteredRowModel` ```tsx -getFilteredRowModel: () => RowModel +getFilteredRowModel: () => RowModel ``` Returns the row model for the table after **column** filtering has been applied. @@ -277,7 +276,7 @@ Resets the **globalFilter** state to `initialState.globalFilter`, or `true` can ### `getGlobalAutoFilterFn` ```tsx -getGlobalAutoFilterFn: (columnId: string) => FilterFn | undefined +getGlobalAutoFilterFn: (columnId: string) => FilterFn | undefined ``` Currently, this function returns the built-in `includesString` filter function. In future releases, it may return more dynamic filter functions based on the nature of the data provided. @@ -285,7 +284,7 @@ Currently, this function returns the built-in `includesString` filter function. ### `getGlobalFilterFn` ```tsx -getGlobalFilterFn: (columnId: string) => FilterFn | undefined +getGlobalFilterFn: (columnId: string) => FilterFn | undefined ``` Returns the global filter function (either user-defined or automatic, depending on configuration) for the table. diff --git a/docs/api/features/grouping.md b/docs/api/features/grouping.md index 227e032164..f2c9776c60 100644 --- a/docs/api/features/grouping.md +++ b/docs/api/features/grouping.md @@ -49,8 +49,8 @@ This is the type signature for every aggregation function: ```tsx export type AggregationFn = ( - getLeafRows: () => Row[], - getChildRows: () => Row[] + getLeafRows: () => Row[], + getChildRows: () => Row[] ) => any ``` @@ -69,7 +69,7 @@ export type AggregationFnOption = | 'auto' | keyof AggregationFns | BuiltInAggregationFn - | AggregationFn + | AggregationFn ``` ## Column Def Options @@ -92,10 +92,10 @@ Options: ```tsx aggregatedCell?: Renderable< { - table: Table - row: Row - column: Column - cell: Cell + table: Table + row: Row + column: Column + cell: Cell getValue: () => any renderValue: () => any } @@ -125,7 +125,7 @@ Specify a value to be used for grouping rows on this column. If this option is n ### `aggregationFn` ```tsx -aggregationFn?: AggregationFnOption +aggregationFn?: AggregationFnOption ``` The resolved aggregation function for the column. @@ -173,7 +173,7 @@ Returns a function that toggles the grouping state of the column. This is useful ### `getAutoAggregationFn` ```tsx -getAutoAggregationFn: () => AggregationFn | undefined +getAutoAggregationFn: () => AggregationFn | undefined ``` Returns the automatically inferred aggregation function for the column. @@ -181,7 +181,7 @@ Returns the automatically inferred aggregation function for the column. ### `getAggregationFn` ```tsx -getAggregationFn: () => AggregationFn | undefined +getAggregationFn: () => AggregationFn | undefined ``` Returns the aggregation function for the column. @@ -279,7 +279,7 @@ Enables/disables grouping for all columns. ### `getGroupedRowModel` ```tsx -getGroupedRowModel?: (table: Table) => () => RowModel +getGroupedRowModel?: (table: Table) => () => RowModel ``` Returns the row model after grouping has taken place, but no further. @@ -313,7 +313,7 @@ Resets the **grouping** state to `initialState.grouping`, or `true` can be passe ### `getPreGroupedRowModel` ```tsx -getPreGroupedRowModel: () => RowModel +getPreGroupedRowModel: () => RowModel ``` Returns the row model for the table before any grouping has been applied. @@ -321,7 +321,7 @@ Returns the row model for the table before any grouping has been applied. ### `getGroupedRowModel` ```tsx -getGroupedRowModel: () => RowModel +getGroupedRowModel: () => RowModel ``` Returns the row model for the table after grouping has been applied. diff --git a/docs/api/features/pagination.md b/docs/api/features/pagination.md index 87fbfbb6a1..40e9861e9a 100644 --- a/docs/api/features/pagination.md +++ b/docs/api/features/pagination.md @@ -69,7 +69,7 @@ If this function is provided, it will be called when the pagination state change ### `getPaginatedRowModel` ```tsx -getPaginatedRowModel?: (table: Table) => () => RowModel +getPaginatedRowModel?: (table: Table) => () => RowModel ``` Returns the row model after pagination has taken place, but no further. @@ -193,7 +193,7 @@ Returns the page count. If manually paginating or controlling the pagination sta ### `getPrePaginationRowModel` ```tsx -getPrePaginationRowModel: () => RowModel +getPrePaginationRowModel: () => RowModel ``` Returns the row model for the table before any pagination has been applied. @@ -201,7 +201,7 @@ Returns the row model for the table before any pagination has been applied. ### `getPaginatedRowModel` ```tsx -getPaginatedRowModel: () => RowModel +getPaginatedRowModel: () => RowModel ``` Returns the row model for the table after pagination has been applied. diff --git a/docs/api/features/row-pinning.md b/docs/api/features/row-pinning.md index 4d8b8ce17c..8f06c07db1 100644 --- a/docs/api/features/row-pinning.md +++ b/docs/api/features/row-pinning.md @@ -32,7 +32,7 @@ export type RowPinningRowState = { ### `enableRowPinning` ```tsx -enableRowPinning?: boolean | ((row: Row) => boolean) +enableRowPinning?: boolean | ((row: Row) => boolean) ``` Enables/disables row pinning for all rows in the table. @@ -82,7 +82,7 @@ Returns whether or not any rows are pinned. Optionally specify to only check for ### `getTopRows` ```tsx -getTopRows: () => Row[] +getTopRows: () => Row[] ``` Returns all top pinned rows. @@ -90,7 +90,7 @@ Returns all top pinned rows. ### `getBottomRows` ```tsx -getBottomRows: () => Row[] +getBottomRows: () => Row[] ``` Returns all bottom pinned rows. @@ -98,7 +98,7 @@ Returns all bottom pinned rows. ### `getCenterRows` ```tsx -getCenterRows: () => Row[] +getCenterRows: () => Row[] ``` Returns all rows that are not pinned to the top or bottom. diff --git a/docs/api/features/row-selection.md b/docs/api/features/row-selection.md index a3ce7f7084..5b488dccce 100644 --- a/docs/api/features/row-selection.md +++ b/docs/api/features/row-selection.md @@ -22,7 +22,7 @@ By default, the row selection state uses the index of each row as the row identi ### `enableRowSelection` ```tsx -enableRowSelection?: boolean | ((row: Row) => boolean) +enableRowSelection?: boolean | ((row: Row) => boolean) ``` - Enables/disables row selection for all rows in the table OR @@ -31,7 +31,7 @@ enableRowSelection?: boolean | ((row: Row) => boolean) ### `enableMultiRowSelection` ```tsx -enableMultiRowSelection?: boolean | ((row: Row) => boolean) +enableMultiRowSelection?: boolean | ((row: Row) => boolean) ``` - Enables/disables multiple row selection for all rows in the table OR @@ -40,7 +40,7 @@ enableMultiRowSelection?: boolean | ((row: Row) => boole ### `enableSubRowSelection` ```tsx -enableSubRowSelection?: boolean | ((row: Row) => boolean) +enableSubRowSelection?: boolean | ((row: Row) => boolean) ``` Enables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row. @@ -142,25 +142,25 @@ Selects/deselects all rows on the current page. ### `getPreSelectedRowModel` ```tsx -getPreSelectedRowModel: () => RowModel +getPreSelectedRowModel: () => RowModel ``` ### `getSelectedRowModel` ```tsx -getSelectedRowModel: () => RowModel +getSelectedRowModel: () => RowModel ``` ### `getFilteredSelectedRowModel` ```tsx -getFilteredSelectedRowModel: () => RowModel +getFilteredSelectedRowModel: () => RowModel ``` ### `getGroupedSelectedRowModel` ```tsx -getGroupedSelectedRowModel: () => RowModel +getGroupedSelectedRowModel: () => RowModel ``` ## Row API diff --git a/docs/api/features/sorting.md b/docs/api/features/sorting.md index b748639f3a..11e04717e8 100644 --- a/docs/api/features/sorting.md +++ b/docs/api/features/sorting.md @@ -51,7 +51,7 @@ This is the type signature for every sorting function: ```tsx export type SortingFn = { - (rowA: Row, rowB: Row, columnId: string): number + (rowA: Row, rowB: Row, columnId: string): number } ``` @@ -70,7 +70,7 @@ export type SortingFnOption = | 'auto' | SortingFns | BuiltInSortingFns - | SortingFn + | SortingFn ``` ## Column Def Options @@ -144,7 +144,7 @@ sortUndefined?: 'first' | 'last' | false | -1 | 1 // defaults to 1 ### `getAutoSortingFn` ```tsx -getAutoSortingFn: () => SortingFn +getAutoSortingFn: () => SortingFn ``` Returns a sorting function automatically inferred based on the columns values. @@ -160,7 +160,7 @@ Returns a sort direction automatically inferred based on the columns values. ### `getSortingFn` ```tsx -getSortingFn: () => SortingFn +getSortingFn: () => SortingFn ``` Returns the resolved sorting function to be used for this column @@ -329,7 +329,7 @@ If `true`, all sorts will default to descending as their first toggle state. ### `getSortedRowModel` ```tsx -getSortedRowModel?: (table: Table) => () => RowModel +getSortedRowModel?: (table: Table) => () => RowModel ``` This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported `getSortedRowModel()` from your adapter to your table or implement your own. @@ -371,7 +371,7 @@ Resets the **sorting** state to `initialState.sorting`, or `true` can be passed ### `getPreSortedRowModel` ```tsx -getPreSortedRowModel: () => RowModel +getPreSortedRowModel: () => RowModel ``` Returns the row model for the table before any sorting has been applied. @@ -379,7 +379,7 @@ Returns the row model for the table before any sorting has been applied. ### `getSortedRowModel` ```tsx -getSortedRowModel: () => RowModel +getSortedRowModel: () => RowModel ``` Returns the row model for the table after sorting has been applied. diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md index ab4173e4e0..5a82ed5c33 100644 --- a/docs/framework/angular/angular-table.md +++ b/docs/framework/angular/angular-table.md @@ -154,11 +154,11 @@ import {Component, TemplateRef, viewChild} from '@angular/core' }) class AppComponent { customHeader = - viewChild.required }>>( + viewChild.required }>>( 'customHeader' ) customCell = - viewChild.required }>>( + viewChild.required }>>( 'customCell' ) @@ -208,9 +208,9 @@ value based on the props you pass to the `FlexRenderDirective`. }) class CustomCellComponent { // context of a cell component - readonly context = injectFlexRenderContext>(); + readonly context = injectFlexRenderContext>(); // context of a header/footer component - readonly context = injectFlexRenderContext>(); + readonly context = injectFlexRenderContext>(); } ``` diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md index a35db4eafa..c7c3398e3e 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -236,7 +236,7 @@ You can attach a few other properties to filter functions to customize their beh ```tsx const startsWithFilterFn = ( - row: Row, + row: Row, columnId: string, filterValue: number | string, //resolveFilterValue will transform this to a string ) => diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index b87397bbe5..9c3e9df583 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -77,9 +77,9 @@ const [movingColumnId, setMovingColumnId] = useState(null); const [targetColumnId, setTargetColumnId] = useState(null); //util function to splice and reorder the columnOrder array -const reorderColumn = , TData extends RowData>( - movingColumnId: Column, - targetColumnId: Column, +const reorderColumn = ( + movingColumnId: Column, + targetColumnId: Column, ): string[] => { const newColumnOrder = [...columnOrder]; newColumnOrder.splice( diff --git a/docs/guide/custom-features.md b/docs/guide/custom-features.md index ba80690ab6..4281228506 100644 --- a/docs/guide/custom-features.md +++ b/docs/guide/custom-features.md @@ -31,21 +31,21 @@ TanStack Table's source code is arguably somewhat simple (at least we think so). All of the functionality of a feature object can be described with the `TableFeature` type that is exported from TanStack Table. This type is a TypeScript interface that describes the shape of a feature object needed to create a feature. ```ts -export interface TableFeature, TData extends RowData = any> { +export interface TableFeature { constructCell?: ( - cell: Cell, - column: Column, - row: Row, - table: Table + cell: Cell, + column: Column, + row: Row, + table: Table ) => void - constructColumn?: (column: Column, table: Table) => void - constructHeader?: (header: Header, table: Table) => void - constructRow?: (row: Row, table: Table) => void - constructTable?: (table: Table) => void - getDefaultColumnDef?: () => Partial> + constructColumn?: (column: Column, table: Table) => void + constructHeader?: (header: Header, table: Table) => void + constructRow?: (row: Row, table: Table) => void + constructTable?: (table: Table) => void + getDefaultColumnDef?: () => Partial> getDefaultTableOptions?: ( - table: Table - ) => Partial> + table: Table + ) => Partial> getInitialState?: (initialState?: InitialTableState) => Partial } ``` @@ -146,18 +146,18 @@ declare module '@tanstack/react-table' { // or whatever framework adapter you ar //merge our new feature's state with the existing table state interface TableState extends DensityTableState {} //merge our new feature's options with the existing table options - interface TableOptions, TData extends RowData> + interface TableOptions extends DensityOptions {} //merge our new feature's instance APIs with the existing table instance APIs - interface Table, TData extends RowData> extends DensityInstance {} + interface Table extends DensityInstance {} // if you need to add cell instance APIs... - // interface Cell, TData extends RowData, TValue> extends DensityCell + // interface Cell extends DensityCell // if you need to add row instance APIs... - // interface Row, TData extends RowData> extends DensityRow + // interface Row extends DensityRow // if you need to add column instance APIs... - // interface Column, TData extends RowData, TValue> extends DensityColumn + // interface Column extends DensityColumn // if you need to add header instance APIs... - // interface Header, TData extends RowData, TValue> extends DensityHeader + // interface Header extends DensityHeader // Note: declaration merging on `ColumnDef` is not possible because it is a complex type, not an interface. // But you can still use declaration merging on `ColumnDef.meta` @@ -187,8 +187,8 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! }, // define the new feature's default options - getDefaultTableOptions: , TData extends RowData>( - table: Partial> + getDefaultTableOptions: ( + table: Partial> ): DensityOptions => { return { enableDensity: true, @@ -196,12 +196,12 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! } as DensityOptions }, // if you need to add a default column definition... - // getDefaultColumnDef: , TData extends RowData>(): Partial> => { + // getDefaultColumnDef: (): Partial> => { // return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround // }, // define the new feature's table instance methods - constructTable: , TData extends RowData>(table: Table): void => { + constructTable: (table: Table): void => { table.setDensity = updater => { const safeUpdater: Updater = old => { let newState = functionalUpdate(updater, old) @@ -218,13 +218,13 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! }, // if you need to add row instance APIs... - // constructRow: , TData extends RowData>(row, table): void => {}, + // constructRow: (row, table): void => {}, // if you need to add cell instance APIs... - // constructCell: , TData extends RowData>(cell, column, row, table): void => {}, + // constructCell: (cell, column, row, table): void => {}, // if you need to add column instance APIs... - // constructColumn: , TData extends RowData>(column, table): void => {}, + // constructColumn: (column, table): void => {}, // if you need to add header instance APIs... - // constructHeader: , TData extends RowData>(header, table): void => {}, + // constructHeader: (header, table): void => {}, } ``` diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index 9b6b5cfd1e..ed90f82e2f 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -130,7 +130,7 @@ const table = useTable({ }) ``` -### Sorting Fns +### Sorting ProcessingFns The default sorting function for all columns is inferred from the data type of the column. However, it can be useful to define the exact sorting function that you want to use for a specific column, especially if any of your data is nullable or not a standard data type. @@ -153,7 +153,7 @@ When defining a custom sorting function in either the `sortingFns` table option ```tsx //optionally use the SortingFn to infer the parameter types -const myCustomSortingFn: SortingFn = (rowA: Row, rowB: Row, columnId: string) => { +const myCustomSortingFn: SortingFn = (rowA: Row, rowB: Row, columnId: string) => { return //-1, 0, or 1 - access any row data using rowA.original and rowB.original } ``` diff --git a/examples/angular/basic/src/app/app.config.ts b/examples/angular/basic/src/app/app.config.ts index 9c7b136d6b..828af23571 100644 --- a/examples/angular/basic/src/app/app.config.ts +++ b/examples/angular/basic/src/app/app.config.ts @@ -1,5 +1,4 @@ import { provideRouter } from '@angular/router' - import { routes } from './app.routes' import type { ApplicationConfig } from '@angular/core' diff --git a/examples/angular/filters/src/app/table-filter.component.ts b/examples/angular/filters/src/app/table-filter.component.ts index e770805afa..1db87c6b2e 100644 --- a/examples/angular/filters/src/app/table-filter.component.ts +++ b/examples/angular/filters/src/app/table-filter.component.ts @@ -13,7 +13,6 @@ declare module '@tanstack/angular-table' { // allows us to define custom properties for our columns interface ColumnMeta< TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, TValue extends CellData = CellData, > { @@ -93,12 +92,11 @@ declare module '@tanstack/angular-table' { }) export class FilterComponent< TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, > { - column = input.required>() + column = input.required>() - table = input.required>() + table = input.required>() readonly filterVariant = computed(() => { return (this.column().columnDef.meta ?? {}).filterVariant diff --git a/examples/angular/row-selection-signal/src/app/filter.ts b/examples/angular/row-selection-signal/src/app/filter.ts index a55c0fdd06..bd3319c687 100644 --- a/examples/angular/row-selection-signal/src/app/filter.ts +++ b/examples/angular/row-selection-signal/src/app/filter.ts @@ -40,7 +40,7 @@ import type { Column, Table } from '@tanstack/angular-table' imports: [CommonModule], }) export class FilterComponent implements OnInit { - column = input.required>() + column = input.required>() table = input.required>() diff --git a/examples/angular/row-selection/src/app/filter.ts b/examples/angular/row-selection/src/app/filter.ts index a55c0fdd06..bd3319c687 100644 --- a/examples/angular/row-selection/src/app/filter.ts +++ b/examples/angular/row-selection/src/app/filter.ts @@ -40,7 +40,7 @@ import type { Column, Table } from '@tanstack/angular-table' imports: [CommonModule], }) export class FilterComponent implements OnInit { - column = input.required>() + column = input.required>() table = input.required>() diff --git a/examples/lit/column-sizing/src/main.ts b/examples/lit/column-sizing/src/main.ts index 421c8745d6..a9d7133470 100644 --- a/examples/lit/column-sizing/src/main.ts +++ b/examples/lit/column-sizing/src/main.ts @@ -8,7 +8,6 @@ import { createCoreRowModel, flexRender, } from '@tanstack/lit-table' - import { Person, makeData } from './makeData' const columns: Array> = [ diff --git a/examples/lit/filters/src/main.ts b/examples/lit/filters/src/main.ts index 5acf26d65e..5c836f0aac 100644 --- a/examples/lit/filters/src/main.ts +++ b/examples/lit/filters/src/main.ts @@ -71,7 +71,6 @@ declare module '@tanstack/lit-table' { // allows us to define custom properties for our columns interface ColumnMeta< TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, TValue extends CellData = CellData, > { @@ -143,7 +142,7 @@ class ColumnFilter extends LitElement { @customElement('lit-table-example') class LitTableExample extends LitElement { - private tableController = new TableController(this) + private tableController = new TableController(this) @state() private _columnFilters: ColumnFiltersState = [] diff --git a/examples/qwik/basic/src/main.tsx b/examples/qwik/basic/src/main.tsx index 564c1251f7..09eebba42a 100644 --- a/examples/qwik/basic/src/main.tsx +++ b/examples/qwik/basic/src/main.tsx @@ -1,8 +1,6 @@ import '@builder.io/qwik/qwikloader.js' import { component$, render } from '@builder.io/qwik' - import './index.css' - import { createColumnHelper, createCoreRowModel, diff --git a/examples/qwik/filters/src/main.tsx b/examples/qwik/filters/src/main.tsx index b43082a04c..ab5e25447d 100644 --- a/examples/qwik/filters/src/main.tsx +++ b/examples/qwik/filters/src/main.tsx @@ -1,8 +1,6 @@ import '@builder.io/qwik/qwikloader.js' - import { $, component$, render, useSignal } from '@builder.io/qwik' import './index.css' - import { createColumnHelper, createCoreRowModel, @@ -16,7 +14,6 @@ import { sortingFns, useTable, } from '@tanstack/qwik-table' - import { compareItems, rankItem } from '@tanstack/match-sorter-utils' import type { Column, diff --git a/examples/qwik/row-selection/src/main.tsx b/examples/qwik/row-selection/src/main.tsx index c5422f0306..bebdb36f36 100644 --- a/examples/qwik/row-selection/src/main.tsx +++ b/examples/qwik/row-selection/src/main.tsx @@ -1,8 +1,6 @@ import '@builder.io/qwik/qwikloader.js' - import { $, component$, render, useSignal } from '@builder.io/qwik' import './index.css' - import { createColumnHelper, createCoreRowModel, diff --git a/examples/qwik/sorting/src/main.tsx b/examples/qwik/sorting/src/main.tsx index 8b1706b5af..880d9acd9f 100644 --- a/examples/qwik/sorting/src/main.tsx +++ b/examples/qwik/sorting/src/main.tsx @@ -1,6 +1,5 @@ import '@builder.io/qwik/qwikloader.js' import { $, component$, render, useSignal } from '@builder.io/qwik' - import './index.css' import { createCoreRowModel, diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx index 477d171f66..3d1ccbd1fa 100644 --- a/examples/react/basic/src/main.tsx +++ b/examples/react/basic/src/main.tsx @@ -64,7 +64,7 @@ const defaultData: Array = [ const _features = tableFeatures({}) // util method to create sharable TFeatures object/type // 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns. Alternatively, check out the createTableHelper/createColumnHelper util for an even more type-safe way to define columns. -const columns: Array> = [ +const columns: Array> = [ { accessorKey: 'firstName', // accessorKey method (most common for simple use-cases) header: 'First Name', diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx index b40d8f3e2a..c4058a469c 100644 --- a/examples/react/column-dnd/src/main.tsx +++ b/examples/react/column-dnd/src/main.tsx @@ -26,7 +26,6 @@ import { CSS } from '@dnd-kit/utilities' import { makeData } from './makeData' import type { Person } from './makeData' import type { Cell, ColumnDef, Header } from '@tanstack/react-table' - import './index.css' const tableHelper = createTableHelper({ diff --git a/examples/react/column-groups/src/main.tsx b/examples/react/column-groups/src/main.tsx index 77f48df9b5..924a42d45c 100644 --- a/examples/react/column-groups/src/main.tsx +++ b/examples/react/column-groups/src/main.tsx @@ -1,8 +1,6 @@ import * as React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { createColumnHelper, flexRender, @@ -66,7 +64,7 @@ const columns = [ header: () => Last Name, footer: (props) => props.column.id, }), - ] as Array>, + ] as Array>, }), columnHelper.group({ header: 'Info', @@ -91,9 +89,9 @@ const columns = [ header: 'Profile Progress', footer: (props) => props.column.id, }), - ] as Array>, + ] as Array>, }), - ] as Array>, + ] as Array>, }), ] diff --git a/examples/react/column-ordering/src/main.tsx b/examples/react/column-ordering/src/main.tsx index 6b6517322c..ba69b73915 100644 --- a/examples/react/column-ordering/src/main.tsx +++ b/examples/react/column-ordering/src/main.tsx @@ -19,7 +19,7 @@ import './index.css' const _features = tableFeatures({ ColumnOrdering, ColumnVisibility }) -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/react/column-pinning/src/main.tsx b/examples/react/column-pinning/src/main.tsx index cb17791dae..3ef4ca57ca 100644 --- a/examples/react/column-pinning/src/main.tsx +++ b/examples/react/column-pinning/src/main.tsx @@ -1,9 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import { faker } from '@faker-js/faker' - import './index.css' - import { ColumnOrdering, ColumnPinning, @@ -22,7 +20,7 @@ import type { Person } from './makeData' const _features = { ColumnVisibility, ColumnPinning, ColumnOrdering } -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/react/column-resizing-performant/src/main.tsx b/examples/react/column-resizing-performant/src/main.tsx index 0577b52106..4bfc337829 100644 --- a/examples/react/column-resizing-performant/src/main.tsx +++ b/examples/react/column-resizing-performant/src/main.tsx @@ -22,7 +22,7 @@ type Person = { progress: number } -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/react/column-sizing/src/main.tsx b/examples/react/column-sizing/src/main.tsx index 910775b860..7e161082c1 100644 --- a/examples/react/column-sizing/src/main.tsx +++ b/examples/react/column-sizing/src/main.tsx @@ -52,7 +52,7 @@ const defaultData: Array = [ }, ] -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/react/column-visibility/src/main.tsx b/examples/react/column-visibility/src/main.tsx index 55ecfe7af3..a86747bfda 100644 --- a/examples/react/column-visibility/src/main.tsx +++ b/examples/react/column-visibility/src/main.tsx @@ -47,7 +47,7 @@ const defaultData: Array = [ }, ] -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/react/custom-features/src/main.tsx b/examples/react/custom-features/src/main.tsx index b774fff9d0..ba03804090 100644 --- a/examples/react/custom-features/src/main.tsx +++ b/examples/react/custom-features/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { createFilteredRowModel, createPaginatedRowModel, @@ -23,7 +21,6 @@ import type { TableFeatures, Updater, } from '@tanstack/react-table' - import type { Person } from './makeData' // TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features @@ -51,25 +48,19 @@ declare module '@tanstack/react-table' { // merge our new feature's state with the existing table state interface TableState extends DensityTableState {} // merge our new feature's options with the existing table options - interface TableOptions< - TFeatures extends TableFeatures, - TFns extends Fns, - TData extends RowData, - > extends DensityOptions {} + interface TableOptions + extends DensityOptions {} // merge our new feature's instance APIs with the existing table instance APIs - interface Table< - TFeatures extends TableFeatures, - TFns extends Fns, - TData extends RowData, - > extends DensityInstance {} + interface Table + extends DensityInstance {} // if you need to add cell instance APIs... - // interface Cell, TData extends RowData, TValue> extends DensityCell + // interface Cell extends DensityCell // if you need to add row instance APIs... - // interface Row, TData extends RowData> extends DensityRow + // interface Row extends DensityRow // if you need to add column instance APIs... - // interface Column, TData extends RowData, TValue> extends DensityColumn + // interface Column extends DensityColumn // if you need to add header instance APIs... - // interface Header, TData extends RowData, TValue> extends DensityHeader + // interface Header extends DensityHeader // Note: declaration merging on `ColumnDef` is not possible because it is a type, not an interface. // But you can still use declaration merging on `ColumnDef.meta` @@ -90,10 +81,9 @@ export const DensityFeature: TableFeature = { // define the new feature's default options getDefaultTableOptions: < TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, >( - table: Partial>, + table: Partial>, ): DensityOptions => { return { enableDensity: true, @@ -101,17 +91,13 @@ export const DensityFeature: TableFeature = { } as DensityOptions }, // if you need to add a default column definition... - // getDefaultColumnDef: , TData extends RowData>(): Partial> => { + // getDefaultColumnDef: (): Partial> => { // return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround // }, // define the new feature's table instance methods - constructTable: < - TFeatures extends TableFeatures, - TFns extends Fns, - TData extends RowData, - >( - table: Table, + constructTable: ( + table: Table, ): void => { table.setDensity = (updater) => { const safeUpdater: Updater = (old) => { @@ -129,13 +115,13 @@ export const DensityFeature: TableFeature = { }, // if you need to add row instance APIs... - // constructRow: , TData extends RowData>(row, table): void => {}, + // constructRow: (row, table): void => {}, // if you need to add cell instance APIs... - // constructCell: , TData extends RowData>(cell, column, row, table): void => {}, + // constructCell: (cell, column, row, table): void => {}, // if you need to add column instance APIs... - // constructColumn: , TData extends RowData>(column, table): void => {}, + // constructColumn: (column, table): void => {}, // if you need to add header instance APIs... - // constructHeader: , TData extends RowData>(header, table): void => {}, + // constructHeader: (header, table): void => {}, } // end of custom feature code @@ -361,8 +347,8 @@ function Filter({ column, table, }: { - column: Column - table: Table + column: Column + table: Table }) { const firstValue = table .getPreFilteredRowModel() diff --git a/examples/react/editable-data/src/main.tsx b/examples/react/editable-data/src/main.tsx index 06b4bff04e..2a05902228 100644 --- a/examples/react/editable-data/src/main.tsx +++ b/examples/react/editable-data/src/main.tsx @@ -32,11 +32,7 @@ const options = tableOptions({ }) declare module '@tanstack/react-table' { - interface TableMeta< - TFeatures extends TableFeatures, - TFns extends Fns, - TData extends RowData, - > { + interface TableMeta { updateData: (rowIndex: number, columnId: string, value: unknown) => void } } diff --git a/examples/react/expanding/src/main.tsx b/examples/react/expanding/src/main.tsx index d99ec39bb2..1e8b05df66 100644 --- a/examples/react/expanding/src/main.tsx +++ b/examples/react/expanding/src/main.tsx @@ -32,7 +32,7 @@ const _features = tableFeatures({ function App() { const rerender = React.useReducer(() => ({}), {})[1] - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { accessorKey: 'firstName', diff --git a/examples/react/filters-faceted/src/main.tsx b/examples/react/filters-faceted/src/main.tsx index 7410231e1d..a43e68bf59 100644 --- a/examples/react/filters-faceted/src/main.tsx +++ b/examples/react/filters-faceted/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { ColumnFaceting, ColumnFiltering, @@ -18,11 +16,11 @@ import { flexRender, sortingFns, tableFeatures, - tableFns, + processingFns, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' -import type { Fns } from '../../../../packages/table-core/dist/esm/types/Fns' +import type { ProcessingFns } from '../../../../packages/table-core/dist/esm/types/ProcessingFns' import type { CellData, Column, @@ -31,7 +29,6 @@ import type { RowData, TableFeatures, } from '@tanstack/react-table' - import type { Person } from './makeData' const _features = tableFeatures({ @@ -41,7 +38,7 @@ const _features = tableFeatures({ RowSorting, }) -const _fns = tableFns(_features, { +const _processingFns = processingFns(_features, { filterFns, sortingFns, }) @@ -50,7 +47,6 @@ declare module '@tanstack/react-table' { // allows us to define custom properties for our columns interface ColumnMeta< TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, TValue extends CellData = CellData, > { @@ -63,9 +59,7 @@ function App() { [], ) - const columns = React.useMemo< - Array> - >( + const columns = React.useMemo>>( () => [ { accessorKey: 'firstName', @@ -115,7 +109,7 @@ function App() { const table = useTable({ _features, - _fns, + _processingFns, _rowModels: { Filtered: createFilteredRowModel(), // client-side filtering Paginated: createPaginatedRowModel(), diff --git a/examples/react/filters-fuzzy/src/main.tsx b/examples/react/filters-fuzzy/src/main.tsx index db1c0bf8e0..b6df4fb2cc 100644 --- a/examples/react/filters-fuzzy/src/main.tsx +++ b/examples/react/filters-fuzzy/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { ColumnFiltering, RowPagination, @@ -10,6 +8,7 @@ import { createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, + filterFns, flexRender, sortingFns, tableFeatures, @@ -17,6 +16,7 @@ import { } from '@tanstack/react-table' import { compareItems, rankItem } from '@tanstack/match-sorter-utils' import { makeData } from './makeData' +import type { Person } from './makeData' import type { Column, ColumnDef, @@ -28,26 +28,8 @@ import type { // A TanStack fork of Kent C. Dodds' match-sorter library that provides ranking information import type { RankingInfo } from '@tanstack/match-sorter-utils' -import type { Person } from './makeData' - -const _features = tableFeatures({ - ColumnFiltering, - RowSorting, - RowPagination, -}) - -declare module '@tanstack/react-table' { - // add fuzzy filter to the filterFns - interface FilterFns { - fuzzy: FilterFn - } - interface FilterMeta { - itemRank?: RankingInfo - } -} - // 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, @@ -66,7 +48,11 @@ const fuzzyFilter: FilterFn = ( } // Define a custom fuzzy sort function that will sort by rank if the row has ranking information -const fuzzySort: SortingFn = (rowA, rowB, columnId) => { +const fuzzySort: SortingFn = ( + rowA, + rowB, + columnId, +) => { let dir = 0 // Only sort by rank if the column has ranking information @@ -81,6 +67,24 @@ const fuzzySort: SortingFn = (rowA, rowB, columnId) => { return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir } +const _features = tableFeatures({ + ColumnFiltering, + RowSorting, + RowPagination, +}) + +filterFns.fuzzyFilter = fuzzyFilter + +declare module '@tanstack/react-table' { + // add fuzzy filter to the filterFns + interface FilterFns { + fuzzy: FilterFn + } + interface FilterMeta { + itemRank?: RankingInfo + } +} + function App() { const rerender = React.useReducer(() => ({}), {})[1] @@ -89,7 +93,7 @@ function App() { ) const [globalFilter, setGlobalFilter] = React.useState('') - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { accessorKey: 'id', @@ -125,6 +129,9 @@ function App() { const table = useTable({ _features, + _processingFns: { + filterFns, + }, _rowModels: { Filtered: createFilteredRowModel(), Paginated: createPaginatedRowModel(), @@ -210,7 +217,7 @@ function App() { {table.getRowModel().rows.map((row) => { return ( - {row.getVisibleCells().map((cell) => { + {row.getAllCells().map((cell) => { return ( {flexRender( diff --git a/examples/react/filters/src/main.tsx b/examples/react/filters/src/main.tsx index 9ba896c55f..9177b14c6d 100644 --- a/examples/react/filters/src/main.tsx +++ b/examples/react/filters/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { ColumnFiltering, RowPagination, @@ -14,11 +12,9 @@ import { flexRender, sortingFns, tableFeatures, - tableFns, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' -import type { Fns } from '../../../../packages/table-core/dist/esm/types/Fns' import type { CellData, Column, @@ -27,14 +23,12 @@ import type { RowData, TableFeatures, } from '@tanstack/react-table' - import type { Person } from './makeData' declare module '@tanstack/react-table' { // allows us to define custom properties for our columns interface ColumnMeta< TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, TValue extends CellData = CellData, > { @@ -44,11 +38,6 @@ declare module '@tanstack/react-table' { const _features = tableFeatures({ ColumnFiltering, RowSorting, RowPagination }) -const _fns = tableFns(_features, { - filterFns, - sortingFns, -}) - function App() { const rerender = React.useReducer(() => ({}), {})[1] @@ -56,9 +45,7 @@ function App() { [], ) - const columns = React.useMemo< - Array> - >( + const columns = React.useMemo>>( () => [ { accessorKey: 'firstName', @@ -113,7 +100,10 @@ function App() { const table = useTable({ _features, - _fns, + _processingFns: { + filterFns, // client side filtering + sortingFns, + }, _rowModels: { Filtered: createFilteredRowModel(), // client side filtering Sorted: createSortedRowModel(), @@ -275,7 +265,7 @@ function App() { function Filter({ column, }: { - column: Column + column: Column }) { const columnFilterValue = column.getFilterValue() const { filterVariant } = column.columnDef.meta ?? {} diff --git a/examples/react/full-width-resizable-table/src/main.tsx b/examples/react/full-width-resizable-table/src/main.tsx index db798a017c..885210866e 100644 --- a/examples/react/full-width-resizable-table/src/main.tsx +++ b/examples/react/full-width-resizable-table/src/main.tsx @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' - import { flexRender, useTable } from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef } from '@tanstack/react-table' diff --git a/examples/react/full-width-table/src/main.tsx b/examples/react/full-width-table/src/main.tsx index 6c18f4f8e6..a5f2ced3a1 100644 --- a/examples/react/full-width-table/src/main.tsx +++ b/examples/react/full-width-table/src/main.tsx @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' - import { createPaginatedRowModel, flexRender, diff --git a/examples/react/fully-controlled/src/main.tsx b/examples/react/fully-controlled/src/main.tsx index dc0be5ec30..d52ef91969 100644 --- a/examples/react/fully-controlled/src/main.tsx +++ b/examples/react/fully-controlled/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { createPaginatedRowModel, flexRender, diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx index 78036ce3db..5ed864426e 100644 --- a/examples/react/grouping/src/main.tsx +++ b/examples/react/grouping/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { ColumnFiltering, ColumnGrouping, diff --git a/examples/react/kitchen-sink/src/App.tsx b/examples/react/kitchen-sink/src/App.tsx index 0f818f6526..fb809fd515 100644 --- a/examples/react/kitchen-sink/src/App.tsx +++ b/examples/react/kitchen-sink/src/App.tsx @@ -12,7 +12,6 @@ import React from 'react' import styled from '@emotion/styled' import { faker } from '@faker-js/faker' import { makeData } from './makeData' - import { useSkipper } from './hooks' import { columns, diff --git a/examples/react/kitchen-sink/src/main.tsx b/examples/react/kitchen-sink/src/main.tsx index a4837c6396..83f06f31a1 100644 --- a/examples/react/kitchen-sink/src/main.tsx +++ b/examples/react/kitchen-sink/src/main.tsx @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' - import './index.css' const rootElement = document.getElementById('root') diff --git a/examples/react/material-ui-pagination/src/actions.tsx b/examples/react/material-ui-pagination/src/actions.tsx index c7eb1bedf8..90c3365d92 100644 --- a/examples/react/material-ui-pagination/src/actions.tsx +++ b/examples/react/material-ui-pagination/src/actions.tsx @@ -1,5 +1,4 @@ import React from 'react' - import Box from '@mui/material/Box' import FirstPageIcon from '@mui/icons-material/FirstPage' import IconButton from '@mui/material/IconButton' diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx index dccdb4c99d..0cbd5bcce7 100644 --- a/examples/react/material-ui-pagination/src/main.tsx +++ b/examples/react/material-ui-pagination/src/main.tsx @@ -1,6 +1,5 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' import Box from '@mui/material/Box' import Table from '@mui/material/Table' @@ -12,14 +11,12 @@ import TableRow from '@mui/material/TableRow' import TablePagination from '@mui/material/TablePagination' import InputBase from '@mui/material/InputBase' import Paper from '@mui/material/Paper' - import { createFilteredRowModel, createPaginatedRowModel, flexRender, useTable, } from '@tanstack/react-table' - import TablePaginationActions from './actions' import { makeData } from './makeData' import type { Person } from './makeData' @@ -201,7 +198,7 @@ function Filter({ column, table, }: { - column: Column + column: Column table: ReactTable }) { const firstValue = table diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx index 3818e82a96..94e8c9ec16 100644 --- a/examples/react/pagination-controlled/src/main.tsx +++ b/examples/react/pagination-controlled/src/main.tsx @@ -1,15 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import { QueryClient, QueryClientProvider, keepPreviousData, useQuery, } from '@tanstack/react-query' - import './index.css' - import { flexRender, useTable } from '@tanstack/react-table' import { fetchData } from './fetchData' import type { ColumnDef, PaginationState } from '@tanstack/react-table' diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx index 0572920929..42f3075042 100644 --- a/examples/react/pagination/src/main.tsx +++ b/examples/react/pagination/src/main.tsx @@ -1,13 +1,18 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { + ColumnFiltering, + RowPagination, + RowSorting, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, + filterFns, flexRender, + sortingFns, + tableFeatures, + processingFns, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' @@ -17,13 +22,23 @@ import type { PaginationState, Table, } from '@tanstack/react-table' - import type { Person } from './makeData' +const _features = tableFeatures({ + ColumnFiltering, + RowPagination, + RowSorting, +}) + +const _processingFns = processingFns(_features, { + sortingFns, + filterFns, +}) + function App() { const rerender = React.useReducer(() => ({}), {})[1] - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { accessorKey: 'firstName', @@ -61,8 +76,8 @@ function App() { [], ) - const [data, setData] = React.useState(() => makeData(100000)) - const refreshData = () => setData(() => makeData(100000)) + const [data, setData] = React.useState(() => makeData(1_000)) + const refreshData = () => setData(() => makeData(100_000)) // stress test return ( <> @@ -88,7 +103,7 @@ function MyTable({ columns, }: { data: Array - columns: Array> + columns: Array> }) { const [pagination, setPagination] = React.useState({ pageIndex: 0, @@ -96,6 +111,8 @@ function MyTable({ }) const table = useTable({ + _features, + _processingFns, _rowModels: { Sorted: createSortedRowModel(), Filtered: createFilteredRowModel(), @@ -154,7 +171,7 @@ function MyTable({ {table.getRowModel().rows.map((row) => { return ( - {row.getVisibleCells().map((cell) => { + {row.getAllCells().map((cell) => { return ( {flexRender( @@ -246,8 +263,8 @@ function Filter({ column, table, }: { - column: Column - table: Table + column: Column + table: Table }) { const firstValue = table .getPreFilteredRowModel() diff --git a/examples/react/query-router-search-params/src/main.tsx b/examples/react/query-router-search-params/src/main.tsx index a4837c6396..83f06f31a1 100644 --- a/examples/react/query-router-search-params/src/main.tsx +++ b/examples/react/query-router-search-params/src/main.tsx @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' - import './index.css' const rootElement = document.getElementById('root') diff --git a/examples/react/query-router-search-params/src/utils/userColumns.tsx b/examples/react/query-router-search-params/src/utils/userColumns.tsx index d0399cd57f..addf6d1de5 100644 --- a/examples/react/query-router-search-params/src/utils/userColumns.tsx +++ b/examples/react/query-router-search-params/src/utils/userColumns.tsx @@ -9,7 +9,6 @@ import type { User } from '../api/user' declare module '@tanstack/react-table' { interface ColumnMeta< TFeatures extends TableFeatures, - TFns extends Fns, TData extends RowData, TValue extends CellData = CellData, > { diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx index 1ef72c75ae..03cb2a967b 100644 --- a/examples/react/row-dnd/src/main.tsx +++ b/examples/react/row-dnd/src/main.tsx @@ -1,8 +1,6 @@ import React, { type CSSProperties } from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { flexRender, useTable } from '@tanstack/react-table' // needed for table body level scope DnD setup diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx index 9b94ea220a..212d699376 100644 --- a/examples/react/row-pinning/src/main.tsx +++ b/examples/react/row-pinning/src/main.tsx @@ -47,7 +47,7 @@ function App() { const [includeParentRows, setIncludeParentRows] = React.useState(false) const [copyPinnedRows, setCopyPinnedRows] = React.useState(false) - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { id: 'pin', diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx index 60a4f29d45..c06bd19edd 100644 --- a/examples/react/row-selection/src/main.tsx +++ b/examples/react/row-selection/src/main.tsx @@ -27,7 +27,7 @@ function App() { const [rowSelection, setRowSelection] = React.useState({}) const [globalFilter, setGlobalFilter] = React.useState('') - const columns = React.useMemo>>( + const columns = React.useMemo>>( () => [ { id: 'select', diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx index e8ce61ddd1..f7ff64dbff 100644 --- a/examples/react/sorting/src/main.tsx +++ b/examples/react/sorting/src/main.tsx @@ -1,15 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { RowSorting, createSortedRowModel, flexRender, sortingFns, tableFeatures, - tableFns, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' @@ -20,12 +17,8 @@ const _features = tableFeatures({ RowSorting, }) -const _fns = tableFns(_features, { - sortingFns, -}) - // custom sorting logic for one of our enum columns -const sortStatusFn: SortingFn = ( +const sortStatusFn: SortingFn = ( rowA, rowB, _columnId, @@ -42,9 +35,7 @@ function App() { // optionally, manage sorting state in your own state management const [sorting, setSorting] = React.useState([]) - const columns = React.useMemo< - Array> - >( + const columns = React.useMemo>>( () => [ { accessorKey: 'firstName', @@ -98,7 +89,9 @@ function App() { const table = useTable({ _features, - _fns, + _processingFns: { + sortingFns, + }, _rowModels: { Sorted: createSortedRowModel(), // client-side sorting }, diff --git a/examples/react/sub-components/src/main.tsx b/examples/react/sub-components/src/main.tsx index 3c6f147491..91ea303420 100644 --- a/examples/react/sub-components/src/main.tsx +++ b/examples/react/sub-components/src/main.tsx @@ -1,8 +1,6 @@ import React, { Fragment } from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { RowExpanding, createExpandedRowModel, @@ -98,11 +96,11 @@ const columns: Array> = [ type TableProps = { data: Array - columns: Array> + columns: Array> renderSubComponent: (props: { - row: Row + row: Row }) => React.ReactElement - getRowCanExpand: (row: Row) => boolean + getRowCanExpand: (row: Row) => boolean } function Table({ diff --git a/examples/react/virtualized-columns/src/main.tsx b/examples/react/virtualized-columns/src/main.tsx index 1ad4f9336e..bf48f24793 100644 --- a/examples/react/virtualized-columns/src/main.tsx +++ b/examples/react/virtualized-columns/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { ColumnSizing, RowSorting, @@ -10,9 +8,7 @@ import { flexRender, useTable, } from '@tanstack/react-table' - import { useVirtualizer } from '@tanstack/react-virtual' - import { makeColumns, makeData } from './makeData' import type { Person } from './makeData' import type { ColumnDef } from '@tanstack/react-table' diff --git a/examples/react/virtualized-infinite-scrolling/src/main.tsx b/examples/react/virtualized-infinite-scrolling/src/main.tsx index 7fcc34cff4..9d8a1db1fa 100644 --- a/examples/react/virtualized-infinite-scrolling/src/main.tsx +++ b/examples/react/virtualized-infinite-scrolling/src/main.tsx @@ -1,6 +1,5 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' // 3 TanStack Libraries!!! @@ -18,7 +17,6 @@ import { useInfiniteQuery, } from '@tanstack/react-query' import { useVirtualizer } from '@tanstack/react-virtual' - import { fetchData } from './makeData' import type { Person, PersonApiResponse } from './makeData' import type { ColumnDef, OnChangeFn, SortingState } from '@tanstack/react-table' diff --git a/examples/react/virtualized-rows/src/main.tsx b/examples/react/virtualized-rows/src/main.tsx index 151f8ed613..9cf16ceb3e 100644 --- a/examples/react/virtualized-rows/src/main.tsx +++ b/examples/react/virtualized-rows/src/main.tsx @@ -1,8 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' - import './index.css' - import { ColumnSizing, RowSorting, @@ -10,9 +8,7 @@ import { flexRender, useTable, } from '@tanstack/react-table' - import { useVirtualizer } from '@tanstack/react-virtual' - import { makeData } from './makeData' import type { Person } from './makeData' import type { ColumnDef } from '@tanstack/react-table' diff --git a/examples/solid/basic/src/App.tsx b/examples/solid/basic/src/App.tsx index f3dc2d948d..938da2d7fd 100644 --- a/examples/solid/basic/src/App.tsx +++ b/examples/solid/basic/src/App.tsx @@ -46,7 +46,7 @@ const defaultData: Array = [ const _features = tableFeatures({}) // util method to create sharable TFeatures object/type // 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns. Alternatively, check out the createTableHelper/createColumnHelper util for an even more type-safe way to define columns. -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { accessorKey: 'firstName', cell: (info) => info.getValue(), diff --git a/examples/solid/basic/src/index.tsx b/examples/solid/basic/src/index.tsx index b5618861da..ea9c952177 100644 --- a/examples/solid/basic/src/index.tsx +++ b/examples/solid/basic/src/index.tsx @@ -1,6 +1,5 @@ /* @refresh reload */ import { render } from 'solid-js/web' - import './index.css' import App from './App' diff --git a/examples/solid/column-groups/src/App.tsx b/examples/solid/column-groups/src/App.tsx index b6320135e3..83f1b2b506 100644 --- a/examples/solid/column-groups/src/App.tsx +++ b/examples/solid/column-groups/src/App.tsx @@ -44,7 +44,7 @@ const defaultData: Array = [ const _features = tableFeatures({}) -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/solid/column-groups/src/index.tsx b/examples/solid/column-groups/src/index.tsx index b5618861da..ea9c952177 100644 --- a/examples/solid/column-groups/src/index.tsx +++ b/examples/solid/column-groups/src/index.tsx @@ -1,6 +1,5 @@ /* @refresh reload */ import { render } from 'solid-js/web' - import './index.css' import App from './App' diff --git a/examples/solid/column-ordering/src/App.tsx b/examples/solid/column-ordering/src/App.tsx index e60530ff6a..0c566d4af0 100644 --- a/examples/solid/column-ordering/src/App.tsx +++ b/examples/solid/column-ordering/src/App.tsx @@ -16,7 +16,7 @@ import type { const _features = tableFeatures({ ColumnOrdering }) -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/solid/column-ordering/src/index.tsx b/examples/solid/column-ordering/src/index.tsx index b5618861da..ea9c952177 100644 --- a/examples/solid/column-ordering/src/index.tsx +++ b/examples/solid/column-ordering/src/index.tsx @@ -1,6 +1,5 @@ /* @refresh reload */ import { render } from 'solid-js/web' - import './index.css' import App from './App' diff --git a/examples/solid/column-visibility/src/App.tsx b/examples/solid/column-visibility/src/App.tsx index 16e41fe938..0778ebeeb7 100644 --- a/examples/solid/column-visibility/src/App.tsx +++ b/examples/solid/column-visibility/src/App.tsx @@ -45,7 +45,7 @@ const defaultData: Array = [ const _features = tableFeatures({ ColumnVisibility }) -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/solid/column-visibility/src/index.tsx b/examples/solid/column-visibility/src/index.tsx index b5618861da..ea9c952177 100644 --- a/examples/solid/column-visibility/src/index.tsx +++ b/examples/solid/column-visibility/src/index.tsx @@ -1,6 +1,5 @@ /* @refresh reload */ import { render } from 'solid-js/web' - import './index.css' import App from './App' diff --git a/examples/solid/filters/src/App.tsx b/examples/solid/filters/src/App.tsx index 9c967eeb84..e9d8a427e4 100644 --- a/examples/solid/filters/src/App.tsx +++ b/examples/solid/filters/src/App.tsx @@ -23,7 +23,7 @@ const _features = tableFeatures({ ColumnFaceting, }) -const columns: Array> = [ +const columns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/solid/filters/src/ColumnFilter.tsx b/examples/solid/filters/src/ColumnFilter.tsx index 9cec1e4cba..efb3bd7888 100644 --- a/examples/solid/filters/src/ColumnFilter.tsx +++ b/examples/solid/filters/src/ColumnFilter.tsx @@ -3,8 +3,8 @@ import { For, Show, createMemo } from 'solid-js' 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/index.tsx b/examples/solid/filters/src/index.tsx index b5618861da..ea9c952177 100644 --- a/examples/solid/filters/src/index.tsx +++ b/examples/solid/filters/src/index.tsx @@ -1,6 +1,5 @@ /* @refresh reload */ import { render } from 'solid-js/web' - import './index.css' import App from './App' diff --git a/examples/solid/sorting/src/App.tsx b/examples/solid/sorting/src/App.tsx index 2bebfd9c08..bdb29d8939 100644 --- a/examples/solid/sorting/src/App.tsx +++ b/examples/solid/sorting/src/App.tsx @@ -17,7 +17,7 @@ function App() { const [sorting, setSorting] = createSignal([]) const refreshData = () => setData(makeData(100_000)) // stress test - const columns: Array> = [ + const columns: Array> = [ { header: 'Name', footer: (props) => props.column.id, diff --git a/examples/solid/sorting/src/index.tsx b/examples/solid/sorting/src/index.tsx index b5618861da..ea9c952177 100644 --- a/examples/solid/sorting/src/index.tsx +++ b/examples/solid/sorting/src/index.tsx @@ -1,6 +1,5 @@ /* @refresh reload */ import { render } from 'solid-js/web' - import './index.css' import App from './App' diff --git a/examples/svelte/filtering/src/main.ts b/examples/svelte/filtering/src/main.ts index b357b77f5b..3b96aeccb8 100644 --- a/examples/svelte/filtering/src/main.ts +++ b/examples/svelte/filtering/src/main.ts @@ -1,9 +1,7 @@ // @ts-ignore import { mount } from 'svelte' import App from './App.svelte' - import type { FilterFn } from '@tanstack/svelte-table' - import type { RankingInfo } from '@tanstack/match-sorter-utils' declare module '@tanstack/svelte-table' { diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue index e67699800e..7eb5c424d5 100644 --- a/examples/vue/column-ordering/src/App.vue +++ b/examples/vue/column-ordering/src/App.vue @@ -8,7 +8,6 @@ import { createColumnHelper, type ColumnVisibilityState, } from '@tanstack/vue-table' - import { makeData, type Person } from './makeData' import { ref } from 'vue' import { faker } from '@faker-js/faker' @@ -101,7 +100,7 @@ const randomizeColumns = () => { ) } -function toggleColumnVisibility(column: Column) { +function toggleColumnVisibility(column: Column) { columnVisibility.value = { ...columnVisibility.value, [column.id]: !column.getIsVisible(), diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue index a2e16dfded..ed8a94c40c 100644 --- a/examples/vue/column-pinning/src/App.vue +++ b/examples/vue/column-pinning/src/App.vue @@ -10,7 +10,6 @@ import type { ColumnOrderState, ColumnPinningState, } from '@tanstack/vue-table' - import { makeData, type Person } from './makeData' import { ref } from 'vue' import { faker } from '@faker-js/faker' @@ -117,7 +116,7 @@ const randomizeColumns = () => { ) } -function toggleColumnVisibility(column: Column) { +function toggleColumnVisibility(column: Column) { columnVisibility.value = { ...columnVisibility.value, [column.id]: !column.getIsVisible(), diff --git a/examples/vue/pagination-controlled/src/App.vue b/examples/vue/pagination-controlled/src/App.vue index 7dbf9a172c..f79a7615fb 100644 --- a/examples/vue/pagination-controlled/src/App.vue +++ b/examples/vue/pagination-controlled/src/App.vue @@ -1,6 +1,5 @@