chore: fix react table types

Author: KevinVandy

examples/react/grouping/src/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 
 import {
+  ColumnDef,
   ColumnFiltering,
   ColumnGrouping,
   RowExpanding,
@@ -23,74 +24,76 @@ import type { GroupingState } from '@tanstack/react-table'
 import type { Person } from './makeData'
 
 const tableHelper = createTableHelper({
-  features: {
+  _features: {
     ColumnFiltering,
     RowPagination,
     RowSorting,
     ColumnGrouping,
     RowExpanding,
   },
-  rowModels: {
+  _rowModels: {
     Core: createCoreRowModel(),
     Filtered: createFilteredRowModel(),
     Paginated: createPaginatedRowModel(),
     Sorted: createSortedRowModel(),
     Grouped: createGroupedRowModel(),
     Expanded: createExpandedRowModel(),
   },
+  TData: {} as Person,
 })
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
-  const columns = React.useMemo(
-    () =>
-      tableHelper.columnHelper.columns<typeof tableHelper.features, Person>([
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-          cell: (info) => info.getValue(),
-          /**
-           * override the value used for row grouping
-           * (otherwise, defaults to the value derived from accessorKey / accessorFn)
-           */
-          getGroupingValue: (row) => `${row.firstName} ${row.lastName}`,
-        },
-        {
-          accessorFn: (row) => row.lastName,
-          id: 'lastName',
-          header: () => <span>Last Name</span>,
-          cell: (info) => info.getValue(),
-        },
+  const columns = React.useMemo<
+    Array<ColumnDef<typeof tableHelper.features, Person>>
+  >(
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        cell: (info) => info.getValue(),
+        /**
+         * override the value used for row grouping
+         * (otherwise, defaults to the value derived from accessorKey / accessorFn)
+         */
+        getGroupingValue: (row) => `${row.firstName} ${row.lastName}`,
+      },
+      {
+        accessorFn: (row) => row.lastName,
+        id: 'lastName',
+        header: () => <span>Last Name</span>,
+        cell: (info) => info.getValue(),
+      },
 
-        {
-          accessorKey: 'age',
-          header: () => 'Age',
-          aggregatedCell: ({ getValue }) =>
-            Math.round(getValue<number>() * 100) / 100,
-          aggregationFn: 'median',
-        },
+      {
+        accessorKey: 'age',
+        header: () => 'Age',
+        aggregatedCell: ({ getValue }) =>
+          Math.round(getValue<number>() * 100) / 100,
+        aggregationFn: 'median',
+      },
 
-        {
-          accessorKey: 'visits',
-          header: () => <span>Visits</span>,
-          aggregationFn: 'sum',
-          // aggregatedCell: ({ getValue }) => getValue().toLocaleString(),
-        },
-        {
-          accessorKey: 'status',
-          header: 'Status',
-        },
-        {
-          accessorKey: 'progress',
-          header: 'Profile Progress',
-          cell: ({ getValue }) =>
-            Math.round(getValue<number>() * 100) / 100 + '%',
-          aggregationFn: 'mean',
-          aggregatedCell: ({ getValue }) =>
-            Math.round(getValue<number>() * 100) / 100 + '%',
-        },
-      ]),
+      {
+        accessorKey: 'visits',
+        header: () => <span>Visits</span>,
+        aggregationFn: 'sum',
+        // aggregatedCell: ({ getValue }) => getValue().toLocaleString(),
+      },
+      {
+        accessorKey: 'status',
+        header: 'Status',
+      },
+      {
+        accessorKey: 'progress',
+        header: 'Profile Progress',
+        cell: ({ getValue }) =>
+          Math.round(getValue<number>() * 100) / 100 + '%',
+        aggregationFn: 'mean',
+        aggregatedCell: ({ getValue }) =>
+          Math.round(getValue<number>() * 100) / 100 + '%',
+      },
+    ],
     [],
   )
 

packages/react-table/src/tableHelper.ts

@@ -24,15 +24,14 @@ export type TableHelper<
 export function createTableHelper<
   TFeatures extends TableFeatures,
   TData extends RowData,
->({
-  TData,
-  ...tableHelperOptions
-}: TableHelperOptions<TFeatures, TData>): TableHelper<TFeatures, TData> {
+>(
+  tableHelperOptions: TableHelperOptions<TFeatures, TData>,
+): TableHelper<TFeatures, TData> {
   const tableHelper = _createTableHelper(useTable, tableHelperOptions)
   return {
     ...tableHelper,
     useTable: tableHelper.tableCreator,
-  }
+  } as any
 }
 
 // test

packages/react-table/src/useTable.ts

@@ -33,7 +33,7 @@ export function useTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(tableOptions: TableOptions<TFeatures, TData>): Table<TFeatures, TData> {
-  const [state, setState] = React.useState<TableState<TFeatures>>(
+  const [state, setState] = React.useState<TableState<TFeatures>>(() =>
     getInitialTableState(builtInFeatures, tableOptions.initialState),
   )