Fixed some examples (react)

examples/react/basic-table-helper/src/main.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom/client'
-import { createTableHelper } from '@tanstack/react-table'
+import { useTable } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import './index.css'
 
-// This example uses the new `createTableHelper` method to create a re-usable table helper object instead of independently using the standalone `useTable` hook and `createColumnHelper` method. You can choose to use either way.
-
 // 1. Define what the shape of your data will be for each row
 type Person = {
   firstName: string
@@ -51,67 +50,69 @@ 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: {},
-  _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
-  debugTable: true,
-  // TData: {} as Person, // optionally, set the TData type for the table helper. Omit if this will be a table helper for multiple tables of all different data types
-})
-
-// 4. Create a helper object to help define our columns
-// const { columnHelper } = tableHelper // if TData was set in the table helper options - otherwise use the createColumnHelper method below
-const columnHelper = tableHelper.createColumnHelper<Person>()
-
-// 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a react component)
-const columns = columnHelper.columns([
-  // accessorKey method (most common for simple use-cases)
-  columnHelper.accessor('firstName', {
-    cell: (info) => info.getValue(),
-    footer: (info) => info.column.id,
-  }),
-  // accessorFn used (alternative) along with a custom id
-  columnHelper.accessor((row) => row.lastName, {
-    id: 'lastName',
-    cell: (info) => <i>{info.getValue()}</i>,
-    header: () => <span>Last Name</span>,
-    footer: (info) => info.column.id,
-  }),
-  // accessorFn used to transform the data
-  columnHelper.accessor((row) => Number(row.age), {
-    id: 'age',
-    header: () => 'Age',
-    cell: (info) => info.renderValue(),
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('visits', {
-    header: () => <span>Visits</span>,
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('status', {
-    header: 'Status',
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('progress', {
-    header: 'Profile Progress',
-    footer: (info) => info.column.id,
-  }),
-])
+// 3. Define the features for your table. In this case, this will be a basic table with no additional features
+const _features = {}
 
 function App() {
-  // 6. Store data with a stable reference
+  // 4. Define the columns for your table with a stable reference
+  const columns = React.useMemo<Array<ColumnDef<typeof _features, Person>>>(
+    () => [
+      // accessorKey method (most common for simple use-cases)
+      {
+        accessorKey: 'firstName',
+        cell: (info) => info.getValue(),
+        footer: (info) => info.column.id,
+      },
+      // accessorFn used (alternative) along with a custom id
+      {
+        accessorFn: (row) => row.lastName,
+        id: 'lastName',
+        cell: (info) => <i>{info.getValue<string>()}</i>,
+        header: () => <span>Last Name</span>,
+        footer: (info) => info.column.id,
+      },
+      // accessorFn used to transform the data
+      {
+        accessorFn: (row) => Number(row.age),
+        id: 'age',
+        header: () => 'Age',
+        cell: (info) => info.getValue<number>(),
+        footer: (info) => info.column.id,
+      },
+      {
+        accessorKey: 'visits',
+        header: () => <span>Visits</span>,
+        footer: (info) => info.column.id,
+      },
+      {
+        accessorKey: 'status',
+        header: 'Status',
+        footer: (info) => info.column.id,
+      },
+      {
+        accessorKey: 'progress',
+        header: 'Profile Progress',
+        footer: (info) => info.column.id,
+      },
+    ],
+    [],
+  )
+
+  // 5. Store data with a stable reference
   const [data, _setData] = React.useState(() => [...defaultData])
   const rerender = React.useReducer(() => ({}), {})[1]
 
-  // 7. Create the table instance with the required columns and data.
-  // Features and row models are already defined in the table helper object above
-  const table = tableHelper.useTable({
+  // 6. Create the table instance with the required columns and data.
+  // Features and row models are defined in the useTable options
+  const table = useTable({
+    _features,
     columns,
     data,
-    // add additional table options here or in the table helper above
+    _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
+    debugTable: true,
   })
 
-  // 8. Render your table markup from the table instance APIs
+  // 7. Render your table markup from the table instance APIs
   return (
     <div className="p-2">
       <table>

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

@@ -1,9 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
+  FlexRender,
   columnOrderingFeature,
   columnSizingFeature,
-  createTableHelper,
+  useTable,
 } from '@tanstack/react-table'
 import {
   DndContext,
@@ -29,19 +30,15 @@ import type { Person } from './makeData'
 import type { Cell, ColumnDef, Header } from '@tanstack/react-table'
 import './index.css'
 
-const tableHelper = createTableHelper({
-  _features: { columnOrderingFeature, columnSizingFeature },
-  _rowModels: {},
-  TData: {} as Person,
-  debugTable: true,
-  debugHeaders: true,
-  debugColumns: true,
-})
+const _features = {
+  columnOrderingFeature,
+  columnSizingFeature,
+}
 
 const DraggableTableHeader = ({
   header,
 }: {
-  header: Header<typeof tableHelper.features, Person, unknown>
+  header: Header<typeof _features, Person, unknown>
 }) => {
   const { attributes, isDragging, listeners, setNodeRef, transform } =
     useSortable({
@@ -60,7 +57,7 @@ const DraggableTableHeader = ({
 
   return (
     <th colSpan={header.colSpan} ref={setNodeRef} style={style}>
-      {header.isPlaceholder ? null : <table.FlexRender header={header} />}
+      {header.isPlaceholder ? null : <FlexRender header={header} />}
       <button {...attributes} {...listeners}>
         🟰
       </button>
@@ -71,7 +68,7 @@ const DraggableTableHeader = ({
 const DragAlongCell = ({
   cell,
 }: {
-  cell: Cell<typeof tableHelper.features, Person, unknown>
+  cell: Cell<typeof _features, Person, unknown>
 }) => {
   const { isDragging, setNodeRef, transform } = useSortable({
     id: cell.column.id,
@@ -88,15 +85,13 @@ const DragAlongCell = ({
 
   return (
     <td style={style} ref={setNodeRef}>
-      <table.FlexRender cell={cell} />
+      <FlexRender cell={cell} />
     </td>
   )
 }
 
 function App() {
-  const columns = React.useMemo<
-    Array<ColumnDef<typeof tableHelper.features, Person>>
-  >(
+  const columns = React.useMemo<Array<ColumnDef<typeof _features, Person>>>(
     () => [
       {
         accessorKey: 'firstName',
@@ -143,16 +138,18 @@ function App() {
 
   const rerender = () => setData(() => makeData(20))
 
-  const table = tableHelper.useTable(
-    {
-      columns,
-      data,
-      initialState: {
-        columnOrder: columns.map((c) => c.id!),
-      },
+  const table = useTable({
+    _features,
+    columns,
+    data,
+    _rowModels: {},
+    initialState: {
+      columnOrder: columns.map((c) => c.id!),
     },
-    (state) => state,
-  )
+    debugTable: true,
+    debugHeaders: true,
+    debugColumns: true,
+  })
 
   // reorder columns after drag & drop
   function handleDragEnd(event: DragEndEvent) {

examples/react/column-ordering/src/makeData.ts

@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: Array<number>) {
   const makeDataLevel = (depth = 0): Array<Person> => {
     const len = lens[depth]
-    return range(len).map((d): Person => {
+    return range(len).map((_): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

examples/react/column-pinning-split/src/makeData.ts

@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: Array<number>) {
   const makeDataLevel = (depth = 0): Array<Person> => {
     const len = lens[depth]
-    return range(len).map((d): Person => {
+    return range(len).map((_): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

examples/react/column-pinning-sticky/src/makeData.ts

@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: Array<number>) {
   const makeDataLevel = (depth = 0): Array<Person> => {
     const len = lens[depth]
-    return range(len).map((d): Person => {
+    return range(len).map((_): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

examples/react/column-pinning/src/makeData.ts

@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: Array<number>) {
   const makeDataLevel = (depth = 0): Array<Person> => {
     const len = lens[depth]
-    return range(len).map((d): Person => {
+    return range(len).map((_): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

examples/react/column-resizing-performant/src/makeData.ts

@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: Array<number>) {
   const makeDataLevel = (depth = 0): Array<Person> => {
     const len = lens[depth]
-    return range(len).map((d): Person => {
+    return range(len).map((_): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,