From fc1b01f11e7d505efe57594d9e75823916b4b123 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sun, 21 Jul 2024 23:00:17 -0500 Subject: [PATCH] chore: update column dnd example --- docs/config.json | 8 +- .../react/basic-table-helper/src/main.tsx | 2 +- examples/react/basic/src/main.tsx | 74 +++++---- examples/react/bootstrap/.gitignore | 5 - examples/react/bootstrap/README.md | 6 - examples/react/bootstrap/index.html | 13 -- examples/react/bootstrap/package.json | 30 ---- examples/react/bootstrap/src/index.css | 26 ---- examples/react/bootstrap/src/main.tsx | 140 ------------------ examples/react/bootstrap/src/makeData.ts | 44 ------ examples/react/bootstrap/tsconfig.json | 24 --- examples/react/bootstrap/vite.config.js | 17 --- examples/react/column-dnd/src/main.tsx | 50 ++++--- 13 files changed, 70 insertions(+), 369 deletions(-) delete mode 100644 examples/react/bootstrap/.gitignore delete mode 100644 examples/react/bootstrap/README.md delete mode 100644 examples/react/bootstrap/index.html delete mode 100644 examples/react/bootstrap/package.json delete mode 100644 examples/react/bootstrap/src/index.css delete mode 100644 examples/react/bootstrap/src/main.tsx delete mode 100644 examples/react/bootstrap/src/makeData.ts delete mode 100644 examples/react/bootstrap/tsconfig.json delete mode 100644 examples/react/bootstrap/vite.config.js diff --git a/docs/config.json b/docs/config.json index a68056d734..4bb8db4277 100644 --- a/docs/config.json +++ b/docs/config.json @@ -498,6 +498,10 @@ "to": "framework/react/examples/basic", "label": "Basic" }, + { + "to": "framework/react/examples/basic-table-helper", + "label": "Basic with Helpers" + }, { "to": "framework/react/examples/column-groups", "label": "Header Groups" @@ -602,10 +606,6 @@ "to": "framework/react/examples/kitchen-sink", "label": "Kitchen Sink" }, - { - "to": "framework/react/examples/bootstrap", - "label": "React Bootstrap" - }, { "to": "framework/react/examples/material-ui-pagination", "label": "Material UI Pagination" diff --git a/examples/react/basic-table-helper/src/main.tsx b/examples/react/basic-table-helper/src/main.tsx index 8d3434fe33..129be15b26 100644 --- a/examples/react/basic-table-helper/src/main.tsx +++ b/examples/react/basic-table-helper/src/main.tsx @@ -44,7 +44,7 @@ const defaultData: Array = [ { firstName: 'kevin', lastName: 'vandy', - age: 12, + age: 28, visits: 100, status: 'Single', progress: 70, diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx index f07ab27123..514d1fad99 100644 --- a/examples/react/basic/src/main.tsx +++ b/examples/react/basic/src/main.tsx @@ -1,14 +1,10 @@ import * as React from 'react' import ReactDOM from 'react-dom/client' -import { - createColumnHelper, - flexRender, - tableFeatures, - useTable, -} from '@tanstack/react-table' +import { flexRender, tableFeatures, useTable } from '@tanstack/react-table' +import type { ColumnDef } from '@tanstack/react-table' import './index.css' -// This example uses the standalone `useTable` hook to create a table without the new `createTableHelper`. You can choose to use either way. +// This example uses the classic standalone `useTable` hook to create a table without the new `createTableHelper` util. // 1. Define what the shape of your data will be for each row type Person = { @@ -54,56 +50,58 @@ const defaultData: Array = [ status: 'Single', progress: 70, }, + { + firstName: 'kevin', + lastName: 'vandy', + age: 28, + visits: 100, + status: 'Single', + progress: 70, + }, ] // 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features const _features = tableFeatures({}) //util method to create sharable TFeatures object/type -// 4. Optionally, create a helper object to help define our columns with slightly better type inference for each column (TValue generic) -const columnHelper = createColumnHelper() - -// 5. Define the columns for your table -// (Instead of columnHelper, you could just give this array a type of `ColumnDef[]`) -const columns = [ - // accessorKey method (most common for simple use-cases) - columnHelper.accessor('firstName', { +// 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> = [ + { + accessorKey: 'firstName', // accessorKey method (most common for simple use-cases) + header: 'First Name', cell: (info) => info.getValue(), - footer: (info) => info.column.id, - }), - // accessorFn used (alternative) along with a custom id - columnHelper.accessor((row) => row.lastName, { + }, + { + accessorFn: (row) => row.lastName, // accessorFn used (alternative) along with a custom id id: 'lastName', - cell: (info) => {info.getValue()}, header: () => Last Name, - footer: (info) => info.column.id, - }), - // accessorFn used to transform the data - columnHelper.accessor((row) => Number(row.age), { + cell: (info) => {info.getValue()}, + }, + { + accessorFn: (row) => Number(row.age), // accessorFn used to transform the data id: 'age', header: () => 'Age', cell: (info) => info.renderValue(), - footer: (info) => info.column.id, - }), - columnHelper.accessor('visits', { + }, + { + accessorKey: 'visits', header: () => Visits, - footer: (info) => info.column.id, - }), - columnHelper.accessor('status', { + }, + { + accessorKey: 'status', header: 'Status', - footer: (info) => info.column.id, - }), - columnHelper.accessor('progress', { + }, + { + accessorKey: 'progress', header: 'Profile Progress', - footer: (info) => info.column.id, - }), + }, ] function App() { - // 6. Store data with a stable reference + // 5. Store data with a stable reference const [data, _setData] = React.useState(() => [...defaultData]) const rerender = React.useReducer(() => ({}), {})[1] - // 7. Create the table instance with required _features, columns, and data + // 6. Create the table instance with required _features, columns, and data const table = useTable({ _features, // new required option in V9. Tell the table which features you are importing and using (better tree-shaking) _rowModels: {}, // `Core` row model is now included by default, but you can still override it here @@ -112,7 +110,7 @@ function App() { // add additional table options here }) - // 8. Render your table markup from the table instance APIs + // 7. Render your table markup from the table instance APIs return (
diff --git a/examples/react/bootstrap/.gitignore b/examples/react/bootstrap/.gitignore deleted file mode 100644 index d451ff16c1..0000000000 --- a/examples/react/bootstrap/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -.DS_Store -dist -dist-ssr -*.local diff --git a/examples/react/bootstrap/README.md b/examples/react/bootstrap/README.md deleted file mode 100644 index b168d3c4b1..0000000000 --- a/examples/react/bootstrap/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Example - -To run this example: - -- `npm install` or `yarn` -- `npm run start` or `yarn start` diff --git a/examples/react/bootstrap/index.html b/examples/react/bootstrap/index.html deleted file mode 100644 index 3fc40c9367..0000000000 --- a/examples/react/bootstrap/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Vite App - - - -
- - - diff --git a/examples/react/bootstrap/package.json b/examples/react/bootstrap/package.json deleted file mode 100644 index 2bcd376a04..0000000000 --- a/examples/react/bootstrap/package.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "tanstack-table-example-bootstrap", - "version": "0.0.0", - "private": true, - "scripts": { - "dev": "vite", - "build": "vite build", - "serve": "vite preview", - "start": "vite", - "lint": "eslint ./src" - }, - "dependencies": { - "@tanstack/react-table": "^9.0.0-alpha.10", - "bootstrap": "^5.3.3", - "react": "^18.3.1", - "react-bootstrap": "2.10.3", - "react-dom": "^18.3.1" - }, - "devDependencies": { - "@faker-js/faker": "^8.4.1", - "@rollup/plugin-replace": "^5.0.7", - "@types/bootstrap": "^5.2.10", - "@types/react": "^18.3.3", - "@types/react-bootstrap": "^0.32.36", - "@types/react-dom": "^18.3.0", - "@vitejs/plugin-react": "^4.3.1", - "typescript": "5.4.5", - "vite": "^5.3.2" - } -} diff --git a/examples/react/bootstrap/src/index.css b/examples/react/bootstrap/src/index.css deleted file mode 100644 index 43c09e0f6b..0000000000 --- a/examples/react/bootstrap/src/index.css +++ /dev/null @@ -1,26 +0,0 @@ -html { - font-family: sans-serif; - font-size: 14px; -} - -table { - border: 1px solid lightgray; -} - -tbody { - border-bottom: 1px solid lightgray; -} - -th { - border-bottom: 1px solid lightgray; - border-right: 1px solid lightgray; - padding: 2px 4px; -} - -tfoot { - color: gray; -} - -tfoot th { - font-weight: normal; -} diff --git a/examples/react/bootstrap/src/main.tsx b/examples/react/bootstrap/src/main.tsx deleted file mode 100644 index 767e5b58b5..0000000000 --- a/examples/react/bootstrap/src/main.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import * as React from 'react' -import ReactDOM from 'react-dom/client' - -import 'bootstrap/dist/css/bootstrap.min.css' - -import { Table as BTable } from 'react-bootstrap' - -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' -import { makeData } from './makeData' -import type { ColumnDef } from '@tanstack/react-table' -import type { Person } from './makeData' - -const columns: Array> = [ - { - header: 'Name', - footer: (props) => props.column.id, - columns: [ - { - accessorKey: 'firstName', - cell: (info) => info.getValue(), - footer: (props) => props.column.id, - }, - { - accessorFn: (row) => row.lastName, - id: 'lastName', - cell: (info) => info.getValue(), - header: () => Last Name, - footer: (props) => props.column.id, - }, - ], - }, - { - header: 'Info', - footer: (props) => props.column.id, - columns: [ - { - accessorKey: 'age', - header: () => 'Age', - footer: (props) => props.column.id, - }, - { - header: 'More Info', - columns: [ - { - accessorKey: 'visits', - header: () => Visits, - footer: (props) => props.column.id, - }, - { - accessorKey: 'status', - header: 'Status', - footer: (props) => props.column.id, - }, - { - accessorKey: 'progress', - header: 'Profile Progress', - footer: (props) => props.column.id, - }, - ], - }, - ], - }, -] - -function App() { - const [data, setData] = React.useState(makeData(10)) - const rerender = () => setData(makeData(10)) - - const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, - columns, - data, - }) - - return ( -
- -
- {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - - - {table.getFooterGroups().map((footerGroup) => ( - - {footerGroup.headers.map((header) => ( - - ))} - - ))} - - -
- -
- - ) -} - -const rootElement = document.getElementById('root') -if (!rootElement) throw new Error('Failed to find the root element') - -ReactDOM.createRoot(rootElement).render( - - - , -) diff --git a/examples/react/bootstrap/src/makeData.ts b/examples/react/bootstrap/src/makeData.ts deleted file mode 100644 index 45b1db4724..0000000000 --- a/examples/react/bootstrap/src/makeData.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { faker } from '@faker-js/faker' - -export type Person = { - firstName: string - lastName: string - age: number - visits: number - progress: number - status: 'relationship' | 'complicated' | 'single' -} - -const range = (len: number) => { - const arr: Array = [] - for (let i = 0; i < len; i++) { - arr.push(i) - } - return arr -} - -const newPerson = (): Person => { - return { - firstName: faker.person.firstName(), - lastName: faker.person.lastName(), - age: faker.number.int(40), - visits: faker.number.int(1000), - progress: faker.number.int(100), - status: faker.helpers.shuffle([ - 'relationship', - 'complicated', - 'single', - ])[0], - } -} - -export function makeData(...lens: Array) { - const makeDataLevel = (depth = 0): Array => { - const len = lens[depth] - return range(len).map((d): Person => { - return newPerson() - }) - } - - return makeDataLevel() -} diff --git a/examples/react/bootstrap/tsconfig.json b/examples/react/bootstrap/tsconfig.json deleted file mode 100644 index 6d545f543f..0000000000 --- a/examples/react/bootstrap/tsconfig.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src"] -} diff --git a/examples/react/bootstrap/vite.config.js b/examples/react/bootstrap/vite.config.js deleted file mode 100644 index 2e1361723a..0000000000 --- a/examples/react/bootstrap/vite.config.js +++ /dev/null @@ -1,17 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' -import rollupReplace from '@rollup/plugin-replace' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [ - rollupReplace({ - preventAssignment: true, - values: { - __DEV__: JSON.stringify(true), - 'process.env.NODE_ENV': JSON.stringify('development'), - }, - }), - react(), - ], -}) diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx index e623afe635..e5acf482fd 100644 --- a/examples/react/column-dnd/src/main.tsx +++ b/examples/react/column-dnd/src/main.tsx @@ -1,11 +1,10 @@ import React, { type CSSProperties } from 'react' import ReactDOM from 'react-dom/client' - -import './index.css' - -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' - -// needed for table body level scope DnD setup +import { + ColumnOrdering, + createTableHelper, + flexRender, +} from '@tanstack/react-table' import { DndContext, type DragEndEvent, @@ -23,17 +22,26 @@ import { horizontalListSortingStrategy, useSortable, } from '@dnd-kit/sortable' - -// needed for row & cell level scope DnD setup 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({ + _features: { ColumnOrdering: ColumnOrdering }, + _rowModels: {}, + TData: {} as Person, + debugTable: true, + debugHeaders: true, + debugColumns: true, +}) + const DraggableTableHeader = ({ header, }: { - header: Header + header: Header }) => { const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({ @@ -62,7 +70,11 @@ const DraggableTableHeader = ({ ) } -const DragAlongCell = ({ cell }: { cell: Cell }) => { +const DragAlongCell = ({ + cell, +}: { + cell: Cell +}) => { const { isDragging, setNodeRef, transform } = useSortable({ id: cell.column.id, }) @@ -84,7 +96,9 @@ const DragAlongCell = ({ cell }: { cell: Cell }) => { } function App() { - const columns = React.useMemo>>( + const columns = React.useMemo< + Array> + >( () => [ { accessorKey: 'firstName', @@ -134,25 +148,19 @@ function App() { const rerender = () => setData(() => makeData(20)) - const table = useTable({ - _rowModels: { - Core: createCoreRowModel(), - }, + const table = tableHelper.useTable({ columns, data, state: { columnOrder, }, onColumnOrderChange: setColumnOrder, - debugTable: true, - debugHeaders: true, - debugColumns: true, }) // reorder columns after drag & drop function handleDragEnd(event: DragEndEvent) { const { active, over } = event - if (active && over && active.id !== over.id) { + if (over && active.id !== over.id) { setColumnOrder((prevColumnOrder) => { const oldIndex = prevColumnOrder.indexOf(active.id as string) const newIndex = prevColumnOrder.indexOf(over.id as string) @@ -201,7 +209,7 @@ function App() { {table.getRowModel().rows.map((row) => ( - {row.getVisibleCells().map((cell) => ( + {row.getAllCells().map((cell) => (
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.footer, - header.getContext(), - )} -
- 
{JSON.stringify(data, null, 2)}
+ 
{JSON.stringify(columnOrder, null, 2)}
)