diff --git a/examples/react/column-pinning-sticky/src/main.tsx b/examples/react/column-pinning-sticky/src/main.tsx index e46a573c06..68f650848e 100644 --- a/examples/react/column-pinning-sticky/src/main.tsx +++ b/examples/react/column-pinning-sticky/src/main.tsx @@ -1,13 +1,25 @@ import React, { type CSSProperties } from 'react' import ReactDOM from 'react-dom/client' - -import './index.css' - -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { + type Column, + type ColumnDef, + ColumnOrdering, + ColumnPinning, + ColumnVisibility, + flexRender, + tableFeatures, + useTable, +} from '@tanstack/react-table' import { faker } from '@faker-js/faker' import { makeData } from './makeData' import type { Person } from './makeData' -import type { Column, ColumnDef } from '@tanstack/react-table' +import './index.css' + +const _features = tableFeatures({ + ColumnVisibility, + ColumnPinning, + ColumnOrdering, +}) //These are the important styles to make sticky column pinning work! //Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc. @@ -88,9 +100,8 @@ function App() { const rerender = () => setData(() => makeData(30)) const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, + _features, + _rowModels: {}, columns, data, debugTable: true, diff --git a/examples/react/column-pinning/src/main.tsx b/examples/react/column-pinning/src/main.tsx index a2e56ddfb8..cc215e19c3 100644 --- a/examples/react/column-pinning/src/main.tsx +++ b/examples/react/column-pinning/src/main.tsx @@ -4,7 +4,13 @@ import { faker } from '@faker-js/faker' import './index.css' -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { + ColumnOrdering, + ColumnPinning, + ColumnVisibility, + flexRender, + useTable, +} from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef, @@ -13,7 +19,9 @@ import type { } from '@tanstack/react-table' import type { Person } from './makeData' -const defaultColumns: Array> = [ +const _features = { ColumnVisibility, ColumnPinning, ColumnOrdering } + +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -78,9 +86,8 @@ function App() { const rerender = () => setData(() => makeData(5000)) const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, + _features, + _rowModels: {}, columns, data, state: { diff --git a/examples/react/column-resizing-performant/src/main.tsx b/examples/react/column-resizing-performant/src/main.tsx index 4f2dc4a015..1593aa9a3f 100644 --- a/examples/react/column-resizing-performant/src/main.tsx +++ b/examples/react/column-resizing-performant/src/main.tsx @@ -1,11 +1,17 @@ import React from 'react' import ReactDOM from 'react-dom/client' - -import './index.css' - -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { + ColumnResizing, + ColumnSizing, + flexRender, + tableFeatures, + useTable, +} from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef, Table } from '@tanstack/react-table' +import './index.css' + +const _features = tableFeatures({ ColumnSizing, ColumnResizing }) type Person = { firstName: string @@ -16,7 +22,7 @@ type Person = { progress: number } -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -72,9 +78,8 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, + _features, + _rowModels: {}, columns, data, defaultColumn: { @@ -96,8 +101,7 @@ function App() { const columnSizeVars = React.useMemo(() => { const headers = table.getFlatHeaders() const colSizes: { [key: string]: number } = {} - for (let i = 0; i < headers.length; i++) { - const header = headers[i] + for (const header of headers) { colSizes[`--header-${header.id}-size`] = header.getSize() colSizes[`--col-${header.column.id}-size`] = header.column.getSize() } @@ -215,7 +219,7 @@ function TableBody({ table }: { table: Table }) { > {row.getVisibleCells().map((cell) => { //simulate expensive render - for (let i = 0; i < 10000; i++) { + for (const _ of Array(10000)) { Math.random() } diff --git a/examples/react/column-sizing/src/main.tsx b/examples/react/column-sizing/src/main.tsx index 535548cd82..50e7e60795 100644 --- a/examples/react/column-sizing/src/main.tsx +++ b/examples/react/column-sizing/src/main.tsx @@ -1,14 +1,20 @@ import React from 'react' import ReactDOM from 'react-dom/client' - -import './index.css' - -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { + ColumnResizing, + ColumnSizing, + flexRender, + tableFeatures, + useTable, +} from '@tanstack/react-table' import type { ColumnDef, ColumnResizeDirection, ColumnResizeMode, } from '@tanstack/react-table' +import './index.css' + +const _features = tableFeatures({ ColumnResizing, ColumnSizing }) type Person = { firstName: string @@ -46,7 +52,7 @@ const defaultData: Array = [ }, ] -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -113,9 +119,8 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, + _features, + _rowModels: {}, columns, data, columnResizeMode, diff --git a/examples/react/column-visibility/src/main.tsx b/examples/react/column-visibility/src/main.tsx index e025b93072..a86747bfda 100644 --- a/examples/react/column-visibility/src/main.tsx +++ b/examples/react/column-visibility/src/main.tsx @@ -1,10 +1,15 @@ import React from 'react' import ReactDOM from 'react-dom/client' - +import { + ColumnVisibility, + flexRender, + tableFeatures, + useTable, +} from '@tanstack/react-table' +import type { ColumnDef } from '@tanstack/react-table' import './index.css' -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' -import type { ColumnDef } from '@tanstack/react-table' +const _features = tableFeatures({ ColumnVisibility }) type Person = { firstName: string @@ -42,7 +47,7 @@ const defaultData: Array = [ }, ] -const defaultColumns: Array> = [ +const defaultColumns: Array> = [ { header: 'Name', footer: (props) => props.column.id, @@ -95,7 +100,7 @@ const defaultColumns: Array> = [ ] function App() { - const [data, setData] = React.useState(() => [...defaultData]) + const [data, _setData] = React.useState(() => [...defaultData]) const [columns] = React.useState(() => [ ...defaultColumns, ]) @@ -104,9 +109,8 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, + _features, + _rowModels: {}, columns, data, state: { diff --git a/examples/react/editable-data/src/main.tsx b/examples/react/editable-data/src/main.tsx index ab3452f797..4f89ea03b6 100644 --- a/examples/react/editable-data/src/main.tsx +++ b/examples/react/editable-data/src/main.tsx @@ -1,15 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' - -// -import './index.css' - -// import { - createCoreRowModel, + ColumnFiltering, + RowPagination, createFilteredRowModel, createPaginatedRowModel, flexRender, + tableOptions, useTable, } from '@tanstack/react-table' import { makeData } from './makeData' @@ -21,6 +18,15 @@ import type { TableFeatures, } from '@tanstack/react-table' import type { Person } from './makeData' +import './index.css' + +const options = tableOptions({ + _features: { RowPagination, ColumnFiltering }, + _rowModels: { + Filtered: createFilteredRowModel(), + Paginated: createPaginatedRowModel(), + }, +}) declare module '@tanstack/react-table' { interface TableMeta { @@ -29,7 +35,7 @@ declare module '@tanstack/react-table' { } // Give our default column cell renderer editing superpowers! -const defaultColumn: Partial> = { +const defaultColumn: Partial> = { cell: ({ getValue, row: { index }, column: { id }, table }) => { const initialValue = getValue() // We need to keep and update the state of the cell normally @@ -74,7 +80,9 @@ function useSkipper() { function App() { const rerender = React.useReducer(() => ({}), {})[1] - const columns = React.useMemo>>( + const columns = React.useMemo< + Array> + >( () => [ { header: 'Name', @@ -133,11 +141,7 @@ function App() { const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper() const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - Filtered: createFilteredRowModel(), - Paginated: createPaginatedRowModel(), - }, + ...options, columns, data, defaultColumn, diff --git a/packages/table-core/src/helpers/tableOptions.ts b/packages/table-core/src/helpers/tableOptions.ts index 75098d3144..968e4e5c21 100644 --- a/packages/table-core/src/helpers/tableOptions.ts +++ b/packages/table-core/src/helpers/tableOptions.ts @@ -6,15 +6,23 @@ export function tableOptions< TFeatures extends TableFeatures, TData extends RowData = any, >( - options: Omit, 'columns'>, -): Omit, 'columns'> + options: Omit, 'columns'> & { + _features: TFeatures + }, +): Omit, 'columns' | '_features'> & { + _features: TFeatures +} export function tableOptions< TFeatures extends TableFeatures, TData extends RowData = any, >( - options: Omit, 'data'>, -): Omit, 'data'> + options: Omit, 'data'> & { + _features: TFeatures + }, +): Omit, 'data' | '_features'> & { + _features: TFeatures +} export function tableOptions< TFeatures extends TableFeatures, @@ -27,8 +35,12 @@ export function tableOptions< TFeatures extends TableFeatures, TData extends RowData = any, >( - options: Omit, 'data' | 'columns'>, -): Omit, 'data' | 'columns'> + options: Omit, 'data' | 'columns'> & { + _features: TFeatures + }, +): Omit, 'data' | 'columns' | '_features'> & { + _features: TFeatures +} export function tableOptions< TFeatures extends TableFeatures,