fix TData inference on tableHelper, update more examples

TanStack · Nov 18, 2024 · 1afcf94 · 1afcf94
1 parent 581f621
commit 1afcf94
Show file tree

Hide file tree

Showing 62 changed files with 1,095 additions and 814 deletions.
diff --git a/docs/api/features/column-filtering.md b/docs/api/features/column-filtering.md
@@ -126,7 +126,7 @@ To make a ranking/filtering/sorting system work with tables, `filterFn`s can opt
 Below is an example using our own `match-sorter-utils` package (a utility fork of `match-sorter`) to rank, filter, and sort the data
 
 ```tsx
-import { sortingFns } from '@tanstack/react-table'
+import { sortFns } from '@tanstack/react-table'
 import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
 
 const fuzzyFilter = (row, columnId, value, addMeta) => {
@@ -152,7 +152,7 @@ const fuzzySort = (rowA, rowB, columnId) => {
   }
 
   // Provide an alphanumeric fallback for when the item ranks are equal
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+  return dir === 0 ? sortFns.alphanumeric(rowA, rowB, columnId) : dir
 }
 ```
 

diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md
@@ -52,7 +52,7 @@ To make a ranking/filtering/sorting system work with tables, `filterFn`s can opt
 Below is an example using our own `match-sorter-utils` package (a utility fork of `match-sorter`) to rank, filter, and sort the data
 
 ```tsx
-import { sortingFns } from '@tanstack/[adapter]-table'
+import { sortFns } from '@tanstack/[adapter]-table'
 import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
 
 const fuzzyFilter = (row, columnId, value, addMeta) => {
@@ -78,7 +78,7 @@ const fuzzySort = (rowA, rowB, columnId) => {
   }
 
   // Provide an alphanumeric fallback for when the item ranks are equal
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+  return dir === 0 ? sortFns.alphanumeric(rowA, rowB, columnId) : dir
 }
 ```
 

diff --git a/docs/api/features/sorting.md b/docs/api/features/sorting.md
@@ -60,16 +60,16 @@ export type SortingFn<TData extends AnyData> = {
 Sorting functions can be used/referenced/defined by passing the following to `columnDefinition.sortingFn`:
 
 - A `string` that references a built-in sorting function
-- A `string` that references a custom sorting functions provided via the `tableOptions.sortingFns` option
+- A `string` that references a custom sorting functions provided via the `tableOptions.sortFns` option
 - A function directly provided to the `columnDefinition.sortingFn` option
 
 The final list of sorting functions available for the `columnDef.sortingFn` use the following type:
 
 ```tsx
 export type SortingFnOption<TData extends AnyData> =
   | 'auto'
-  | SortingFns
-  | BuiltInSortingFns
+  | SortFns
+  | BuiltInSortFns
   | SortingFn<TFeatures, TData>
 ```
 
@@ -78,7 +78,7 @@ export type SortingFnOption<TData extends AnyData> =
 ### `sortingFn`
 
 ```tsx
-sortingFn?: SortingFn | keyof SortingFns | keyof BuiltInSortingFns
+sortingFn?: SortingFn | keyof SortFns | keyof BuiltInSortFns
 ```
 
 The sorting function to use with this column.
@@ -239,18 +239,18 @@ Returns a function that can be used to toggle this column's sorting state. This
 
 ## Table Options
 
-### `sortingFns`
+### `sortFns`
 
 ```tsx
-sortingFns?: Record<string, SortingFn>
+sortFns?: Record<string, SortingFn>
 ```
 
 This option allows you to define custom sorting functions that can be referenced in a column's `sortingFn` option by their key.
 Example:
 
 ```tsx
 declare module '@tanstack/table-core' {
-  interface SortingFns {
+  interface SortFns {
     myCustomSorting: SortingFn<unknown>
   }
 }
@@ -261,7 +261,7 @@ const column = columnHelper.data('key', {
 
 const table = useTable({
   columns: [column],
-  sortingFns: {
+  sortFns: {
     myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
       rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
   },

diff --git a/docs/guide/fuzzy-filtering.md b/docs/guide/fuzzy-filtering.md
@@ -90,7 +90,7 @@ When using fuzzy filtering with column filtering, you might also want to sort th
 
 ```typescript
 import { compareItems } from '@tanstack/match-sorter-utils'
-import { sortingFns } from '@tanstack/table'
+import { sortFns } from '@tanstack/table'
 
 const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
   let dir = 0
@@ -104,7 +104,7 @@ const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
   }
 
   // Provide an alphanumeric fallback for when the item ranks are equal
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+  return dir === 0 ? sortFns.alphanumeric(rowA, rowB, columnId) : dir
 }
 ```
 

diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md
@@ -145,11 +145,11 @@ By default, there are 6 built-in sorting functions to choose from:
 - `datetime` - Sorts by time, use this if your values are `Date` objects.
 - `basic` - Sorts using a basic/standard `a > b ? 1 : a < b ? -1 : 0` comparison. This is the fastest sorting function, but may not be the most accurate.
 
-You can also define your own custom sorting functions either as the `sortingFn` column option, or as a global sorting function using the `sortingFns` table option.
+You can also define your own custom sorting functions either as the `sortingFn` column option, or as a global sorting function using the `sortFns` table option.
 
 #### Custom Sorting Functions
 
-When defining a custom sorting function in either the `sortingFns` table option or as a `sortingFn` column option, it should have the following signature:
+When defining a custom sorting function in either the `sortFns` table option or as a `sortingFn` column option, it should have the following signature:
 
 ```tsx
 //optionally use the SortingFn to infer the parameter types
@@ -200,7 +200,7 @@ const table = useTable({
   data,
   getCoreRowModel: createCoreRowModel(),
   getSortedRowModel: createSortedRowModel(),
-  sortingFns: { //add a custom sorting function
+  sortFns: { //add a custom sorting function
     myCustomSortingFn: (rowA, rowB, columnId) => {
       return rowA.original[columnId] > rowB.original[columnId] ? 1 : rowA.original[columnId] < rowB.original[columnId] ? -1 : 0
     },

diff --git a/examples/qwik/filters/src/main.tsx b/examples/qwik/filters/src/main.tsx
@@ -11,7 +11,7 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
-  sortingFns,
+  sortFns,
   useTable,
 } from '@tanstack/qwik-table'
 import { compareItems, rankItem } from '@tanstack/match-sorter-utils'
@@ -58,7 +58,7 @@ const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
   }
 
   // Provide an alphanumeric fallback for when the item ranks are equal
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+  return dir === 0 ? sortFns.alphanumeric(rowA, rowB, columnId) : dir
 }
 
 type Person = {
@@ -220,12 +220,12 @@ const App = component$(() => {
                     {header.isPlaceholder ? null : (
                       <>
                         <div
-                          {...{
-                            class: header.column.getCanSort()
+                          class={
+                            header.column.getCanSort()
                               ? 'cursor-pointer select-none'
-                              : '',
-                            onClick: header.column.getToggleSortingHandler(),
-                          }}
+                              : ''
+                          }
+                          onClick={header.column.getToggleSortingHandler()}
                         >
                           {flexRender(
                             header.column.columnDef.header,

diff --git a/examples/qwik/row-selection/src/main.tsx b/examples/qwik/row-selection/src/main.tsx
@@ -61,32 +61,28 @@ const columns: Array<ColumnDef<any, Person>> = [
     id: 'select',
     header: ({ table }) => (
       <IndeterminateCheckbox
-        {...{
-          checked: table.getIsAllRowsSelected(),
-          indeterminate: table.getIsSomeRowsSelected(),
-          onChange$: $(() => {
-            console.log('toggleAllRowsSelected')
-            table.toggleAllRowsSelected()
-          }),
-        }}
+        checked={table.getIsAllRowsSelected()}
+        indeterminate={table.getIsSomeRowsSelected()}
+        onChange$={$(() => {
+          console.log('toggleAllRowsSelected')
+          table.toggleAllRowsSelected()
+        })}
       />
     ),
     cell: ({ row, table }) => {
       const { id } = row
       return (
         <div class="px-1">
           <IndeterminateCheckbox
-            {...{
-              checked: row.getIsSelected(),
-              disabled: !row.getCanSelect(),
-              indeterminate: row.getIsSomeSelected(),
-              // onChange: row.getToggleSelectedHandler(),
-              onChange$: $(() => {
-                // TODO: getting row instance from table works, but how can we call getToggleSelectedHandler() withour getting qwik qrl error?
-                const row = table.getRow(id)
-                row.toggleSelected()
-              }),
-            }}
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            indeterminate={row.getIsSomeSelected()}
+            // onChange: row.getToggleSelectedHandler(),
+            onChange$={$(() => {
+              // TODO: getting row instance from table works, but how can we call getToggleSelectedHandler() without getting qwik qrl error?
+              const row = table.getRow(id)
+              row.toggleSelected()
+            })}
           />
         </div>
       )

diff --git a/examples/react/basic-table-helper/src/main.tsx b/examples/react/basic-table-helper/src/main.tsx
@@ -53,7 +53,7 @@ const defaultData: Array<Person> = [
 
 // 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
 const tableHelper = createTableHelper({
-  _features: { columnSizingFeature: {} },
+  _features: {},
   _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
   _processingFns: {}, // client-side processing functions used by the row models (sorting, filtering, etc.). Not needed in this basic example
   debugTable: true,

diff --git a/examples/react/column-ordering/src/main.tsx b/examples/react/column-ordering/src/main.tsx
@@ -112,11 +112,9 @@ function App() {
         <div className="px-1 border-b border-black">
           <label>
             <input
-              {...{
-                type: 'checkbox',
-                checked: table.getIsAllColumnsVisible(),
-                onChange: table.getToggleAllColumnsVisibilityHandler(),
-              }}
+              type="checkbox"
+              checked={table.getIsAllColumnsVisible()}
+              onChange={table.getToggleAllColumnsVisibilityHandler()}
             />{' '}
             Toggle All
           </label>
@@ -126,11 +124,9 @@ function App() {
             <div key={column.id} className="px-1">
               <label>
                 <input
-                  {...{
-                    type: 'checkbox',
-                    checked: column.getIsVisible(),
-                    onChange: column.getToggleVisibilityHandler(),
-                  }}
+                  type="checkbox"
+                  checked={column.getIsVisible()}
+                  onChange={column.getToggleVisibilityHandler()}
                 />{' '}
                 {column.id}
               </label>

diff --git a/examples/react/column-pinning-split/.gitignore b/examples/react/column-pinning-split/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/column-pinning-split/README.md b/examples/react/column-pinning-split/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/react/column-pinning-split/index.html b/examples/react/column-pinning-split/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/column-pinning-split/package.json b/examples/react/column-pinning-split/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "tanstack-table-example-column-pinning-split",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "lint": "eslint ./src"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.2.0",
+    "@tanstack/react-table": "^9.0.0-alpha.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/react/column-pinning-split/src/index.css b/examples/react/column-pinning-split/src/index.css
@@ -0,0 +1,35 @@
+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;
+}
+
+td {
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+td:last-child {
+  border-right: 0;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}