chore: update column ordering example

examples/react/column-groups/src/main.tsx

@@ -5,10 +5,11 @@ import './index.css'
 
 import {
   createColumnHelper,
-  createCoreRowModel,
   flexRender,
+  tableFeatures,
   useTable,
 } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 
 type Person = {
   firstName: string
@@ -46,13 +47,14 @@ const defaultData: Array<Person> = [
   },
 ]
 
-const columnHelper = createColumnHelper<any, Person>()
+const _features = tableFeatures({})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
 const columns = [
   columnHelper.group({
     id: 'hello',
     header: () => <span>Hello</span>,
-    // footer: props => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
         cell: (info) => info.getValue(),
@@ -64,7 +66,7 @@ const columns = [
         header: () => <span>Last Name</span>,
         footer: (props) => props.column.id,
       }),
-    ],
+    ] as Array<ColumnDef<typeof _features, Person>>,
   }),
   columnHelper.group({
     header: 'Info',
@@ -89,9 +91,9 @@ const columns = [
             header: 'Profile Progress',
             footer: (props) => props.column.id,
           }),
-        ],
+        ] as Array<ColumnDef<typeof _features, Person>>,
       }),
-    ],
+    ] as Array<ColumnDef<typeof _features, Person>>,
   }),
 ]
 
@@ -100,9 +102,8 @@ function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
   })

examples/react/column-ordering/src/main.tsx

@@ -1,15 +1,25 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { faker } from '@faker-js/faker'
-
-import './index.css'
-
-import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table'
+import {
+  ColumnOrdering,
+  ColumnVisibility,
+  flexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
 import { makeData } from './makeData'
-import type { ColumnDef, ColumnOrderState } from '@tanstack/react-table'
+import type {
+  ColumnDef,
+  ColumnOrderState,
+  ColumnVisibilityState,
+} from '@tanstack/react-table'
 import type { Person } from './makeData'
+import './index.css'
+
+const _features = tableFeatures({ ColumnOrdering, ColumnVisibility })
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -65,15 +75,15 @@ function App() {
   const [data, setData] = React.useState(() => makeData(20))
   const [columns] = React.useState(() => [...defaultColumns])
 
-  const [columnVisibility, setColumnVisibility] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<ColumnVisibilityState>({})
   const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([])
 
   const rerender = () => setData(() => makeData(20))
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
     state: {

packages/table-core/src/core/columns/Columns.types.ts

@@ -71,7 +71,7 @@ export interface Column_Column<
 export interface TableOptions_Columns<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue extends CellData = any,
+  TValue extends CellData = CellData,
 > {
   /**
    * The array of column defs to use for the table.

packages/table-core/src/helpers/columnHelper.ts

@@ -32,10 +32,27 @@ export type ColumnHelper<
     column: DisplayColumnDef<TFeatures, TData>,
   ) => DisplayColumnDef<TFeatures, TData, unknown>
   group: (
-    column: GroupColumnDef<TFeatures, TData>,
+    column: GroupColumnDef<TFeatures, TData, unknown>,
   ) => GroupColumnDef<TFeatures, TData, unknown>
 }
 
+/**
+ * A helper utility for creating column definitions with slightly better type inference for each individual column.
+ * The `TValue` generic is inferred based on the accessor key or function provided.
+ *
+ * **Note:** From a JavaScript perspective, the functions in these helpers do not do anything. They are only used to help TypeScript infer the correct types for the column definitions.
+ *
+ * @example
+ * ```tsx
+ * const helper = createColumnHelper<typeof _features, Person>() // _features is the result of `tableFeatures({})` helper
+ *
+ * const columns = [
+ *  helper.display({ id: 'actions', header: 'Actions' }),
+ *  helper.accessor('firstName', {}),
+ *  helper.accessor((row) => row.lastName, {}
+ * ]
+ * ```
+ */
 export function createColumnHelper<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -86,7 +103,7 @@ export function createColumnHelper<
 // const test: DeepKeys<Person> = 'nested.foo.0.bar'
 // const test2: DeepKeys<Person> = 'nested.bar'
 
-// const helper = createColumnHelper<any, Person>()
+// const helper = createColumnHelper<{}, Person>()
 
 // helper.accessor('nested.foo', {
 //   cell: (info) => info.getValue(),
@@ -100,9 +117,13 @@ export function createColumnHelper<
 //   cell: (info) => info.getValue(),
 // })
 
-// helper.columns([
-//   helper.accessor('firstName', { cell: (info) => info.getValue() }),
-//   helper.accessor('lastName', { cell: (info) => info.getValue() }),
-//   helper.accessor('age', { cell: (info) => info.getValue() }),
-//   helper.display({ header: 'Visits', id: 'visits' }),
-// ])
+// helper.group({
+//   id: 'hello',
+//   columns: [
+//     helper.accessor('firstName', {}),
+//     helper.accessor((row) => row.lastName, {
+//       id: 'lastName',
+//     }),
+//     helper.accessor('age', {}),
+//   ] as Array<ColumnDef<{}, Person>>,
+// })

packages/table-core/src/helpers/tableFeatures.ts

@@ -1,5 +1,19 @@
 import type { TableFeatures } from '../types/TableFeatures'
 
+/**
+ * A helper function to help define the features that are to be imported and applied to a table instance.
+ *
+ * Use this utility to make it easier to have the correct type inference for the features that are being imported.
+ *
+ * **Note:** It is recommended to use this utility statically outside of a component.
+ *
+ * @example ```tsx
+ * import { tableFeatures, ColumnVisibility, RowPinning } from '@tanstack/react-table'
+ * const _features = tableFeatures({ ColumnVisibility, RowPinning });
+ * 
+ * const table = useTable({ _features, rowModels: {}, columns, data });
+ * ```
+ */
 export function tableFeatures<TFeatures extends TableFeatures>(
   features: TFeatures,
 ): TFeatures {

packages/table-core/src/types/ColumnDef.ts

@@ -54,7 +54,7 @@ type ColumnIdentifiers<
 export type _ColumnDefBase<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = UnionToIntersection<
   | ('ColumnVisibility' extends keyof TFeatures
       ? ColumnDef_ColumnVisibility
@@ -87,13 +87,13 @@ export type _ColumnDefBase<
 export type ColumnDefBase<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
-> = _ColumnDefBase<TableFeatures, TData, TValue>
+  TValue extends CellData = CellData,
+> = _ColumnDefBase<TFeatures, TData, TValue>
 
 export type IdentifiedColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = ColumnDefBase<TFeatures, TData, TValue> & {
   id?: string
   header?: StringOrTemplateHeader<TFeatures, TData, TValue>
@@ -102,43 +102,43 @@ export type IdentifiedColumnDef<
 export type DisplayColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = ColumnDefBase<TFeatures, TData, TValue> &
   ColumnIdentifiers<TFeatures, TData, TValue>
 type GroupColumnDefBase<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = ColumnDefBase<TFeatures, TData, TValue> & {
   columns?: Array<ColumnDef<TFeatures, TData, unknown>>
 }
 
 export type GroupColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = GroupColumnDefBase<TFeatures, TData, TValue> &
   ColumnIdentifiers<TFeatures, TData, TValue>
 
 export type AccessorFnColumnDefBase<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = ColumnDefBase<TFeatures, TData, TValue> & {
   accessorFn: AccessorFn<TData, TValue>
 }
 
 export type AccessorFnColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = AccessorFnColumnDefBase<TFeatures, TData, TValue> &
   ColumnIdentifiers<TFeatures, TData, TValue>
 
 export type AccessorKeyColumnDefBase<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = ColumnDefBase<TFeatures, TData, TValue> & {
   id?: string
   accessorKey: (string & {}) | keyof TData
@@ -147,22 +147,22 @@ export type AccessorKeyColumnDefBase<
 export type AccessorKeyColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = AccessorKeyColumnDefBase<TFeatures, TData, TValue> &
   Partial<ColumnIdentifiers<TFeatures, TData, TValue>>
 
 export type AccessorColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > =
   | AccessorKeyColumnDef<TFeatures, TData, TValue>
   | AccessorFnColumnDef<TFeatures, TData, TValue>
 
 export type ColumnDef<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > =
   | DisplayColumnDef<TFeatures, TData, TValue>
   | GroupColumnDef<TFeatures, TData, TValue>
@@ -176,7 +176,7 @@ export type ColumnDef_All<
 export type ColumnDefResolved<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TValue = unknown,
+  TValue extends CellData = CellData,
 > = Partial<UnionToIntersection<ColumnDef<TFeatures, TData, TValue>>> & {
   accessorKey?: string
 }