update vanilla examples to v9

Author: KevinVandy

examples/vanilla/basic/src/createTable.ts

@@ -0,0 +1,66 @@
+import { atom } from 'nanostores'
+import {
+  constructTable,
+  coreFeatures,
+  getInitialTableState,
+} from '@tanstack/table-core'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+
+export const flexRender = <TProps extends object>(comp: any, props: TProps) => {
+  if (typeof comp === 'function') {
+    return comp(props)
+  }
+  return comp
+}
+
+export const createTable = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+): Table<TFeatures, TData> => {
+  const _features = { ...coreFeatures, ...tableOptions._features }
+
+  // const initialState = getInitialTableState(_features)
+  const state = atom(getInitialTableState(_features, tableOptions.initialState))
+
+  // Compose in the generic options to the user options
+  const statefulOptions: TableOptions<TFeatures, TData> = {
+    ...tableOptions,
+    _features,
+    state: { ...state, ...tableOptions.state },
+  }
+
+  // Create a new table
+  const table = constructTable(statefulOptions)
+
+  // Subscribe to state changes
+  state.subscribe((currentState) => {
+    table.setOptions((prev) => ({
+      ...prev,
+      ...tableOptions,
+      state: {
+        ...(currentState as TableState<TFeatures>),
+        ...tableOptions.state,
+      },
+      // Similarly, we'll maintain both our internal state and any user-provided state
+      onStateChange: (updater) => {
+        if (typeof updater === 'function') {
+          const newState = updater(currentState as TableState<TFeatures>)
+          state.set(newState)
+        } else {
+          state.set(updater)
+        }
+        tableOptions.onStateChange?.(updater)
+      },
+    }))
+  })
+
+  return table
+}

examples/vanilla/basic/src/main.ts

@@ -1,8 +1,6 @@
 import './index.css'
-
-import { createColumnHelper, getCoreRowModel } from '@tanstack/table-core'
-
-import { flexRender, useTable } from './useTable'
+import { createColumnHelper, tableFeatures } from '@tanstack/table-core'
+import { createTable, flexRender } from './createTable'
 
 type Person = {
   firstName: string
@@ -13,7 +11,7 @@ type Person = {
   progress: number
 }
 
-const data: Person[] = [
+const data: Array<Person> = [
   {
     firstName: 'tanner',
     lastName: 'linsley',
@@ -40,9 +38,11 @@ const data: Person[] = [
   },
 ]
 
-const columnHelper = createColumnHelper<Person>()
+const _features = tableFeatures({})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
-const columns = [
+const columns = columnHelper.columns([
   columnHelper.accessor('firstName', {
     cell: (info) => info.getValue(),
     footer: (info) => info.column.id,
@@ -70,7 +70,7 @@ const columns = [
     header: 'Profile Progress',
     footer: (info) => info.column.id,
   }),
-]
+])
 
 const renderTable = () => {
   // Create table elements
@@ -99,7 +99,7 @@ const renderTable = () => {
   // Render table rows
   table.getRowModel().rows.forEach((row) => {
     const trElement = document.createElement('tr')
-    row.getVisibleCells().forEach((cell) => {
+    row.getAllCells().forEach((cell) => {
       const tdElement = document.createElement('td')
       tdElement.innerHTML = flexRender(
         cell.column.columnDef.cell,
@@ -129,10 +129,12 @@ const renderTable = () => {
   wrapperElement.appendChild(tableElement)
 }
 
-const table = useTable<Person>({
-  data,
+const table = createTable({
+  _features,
+  _rowModels: {},
   columns,
-  getCoreRowModel: getCoreRowModel(),
+  data,
+  debugAll: true,
 })
 
 renderTable()

examples/vanilla/basic/src/useTable.ts

@@ -0,0 +1,66 @@
+import { atom } from 'nanostores'
+import {
+  constructTable,
+  coreFeatures,
+  getInitialTableState,
+} from '@tanstack/table-core'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+
+export const flexRender = <TProps extends object>(comp: any, props: TProps) => {
+  if (typeof comp === 'function') {
+    return comp(props)
+  }
+  return comp
+}
+
+export const createTable = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+): Table<TFeatures, TData> => {
+  const _features = { ...coreFeatures, ...tableOptions._features }
+
+  // const initialState = getInitialTableState(_features)
+  const state = atom(getInitialTableState(_features, tableOptions.initialState))
+
+  // Compose in the generic options to the user options
+  const statefulOptions: TableOptions<TFeatures, TData> = {
+    ...tableOptions,
+    _features,
+    state: { ...state, ...tableOptions.state },
+  }
+
+  // Create a new table
+  const table = constructTable(statefulOptions)
+
+  // Subscribe to state changes
+  state.subscribe((currentState) => {
+    table.setOptions((prev) => ({
+      ...prev,
+      ...tableOptions,
+      state: {
+        ...(currentState as TableState<TFeatures>),
+        ...tableOptions.state,
+      },
+      // Similarly, we'll maintain both our internal state and any user-provided state
+      onStateChange: (updater) => {
+        if (typeof updater === 'function') {
+          const newState = updater(currentState as TableState<TFeatures>)
+          state.set(newState)
+        } else {
+          state.set(updater)
+        }
+        tableOptions.onStateChange?.(updater)
+      },
+    }))
+  })
+
+  return table
+}

examples/vanilla/pagination/src/createTable.ts

@@ -2,19 +2,28 @@ import './index.css'
 
 import {
   createColumnHelper,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
 } from '@tanstack/table-core'
-
-import { makeData, Person } from './makeData'
-import { flexRender, useTable } from './useTable'
+import { makeData } from './makeData'
+import { createTable, flexRender } from './createTable'
+import type { Person } from './makeData'
+import type { Table } from '@tanstack/table-core'
 
 const data = makeData(100000)
 
-const columnHelper = createColumnHelper<Person>()
+const _features = tableFeatures({
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
-const columns = [
+const columns = columnHelper.columns([
   columnHelper.accessor('firstName', {
     cell: (info) => info.getValue(),
     footer: (info) => info.column.id,
@@ -42,9 +51,9 @@ const columns = [
     header: 'Profile Progress',
     footer: (info) => info.column.id,
   }),
-]
+])
 
-const renderTable = () => {
+const renderTable = (table: Table<typeof _features, Person>) => {
   // Create table elements
   const tableElement = document.createElement('table')
   const theadElement = document.createElement('thead')
@@ -87,7 +96,7 @@ const renderTable = () => {
   // Render table rows
   table.getRowModel().rows.forEach((row) => {
     const trElement = document.createElement('tr')
-    row.getVisibleCells().forEach((cell) => {
+    row.getAllCells().forEach((cell) => {
       const tdElement = document.createElement('td')
       tdElement.innerHTML = flexRender(
         cell.column.columnDef.cell,
@@ -195,11 +204,17 @@ const renderTable = () => {
   wrapperElement.appendChild(stateInfoElement)
 }
 
-const table = useTable<Person>({
+const table = createTable({
+  _features,
+  _rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
+    sortedRowModel: createSortedRowModel(sortFns),
+  },
   data,
   columns,
   initialState: {
     pagination: {
+      pageIndex: 0,
       pageSize: 10,
     },
     sorting: [
@@ -209,10 +224,8 @@ const table = useTable<Person>({
       },
     ],
   },
-  getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-  getSortedRowModel: getSortedRowModel(),
-  onStateChange: () => renderTable(),
+  onStateChange: () => renderTable(table),
+  debugTable: true,
 })
 
-renderTable()
+renderTable(table)