chore: update react col examples

Author: KevinVandy

examples/react/column-pinning-sticky/src/main.tsx

@@ -1,13 +1,25 @@
 import React, { type CSSProperties } from 'react'
 import ReactDOM from 'react-dom/client'
-
-import './index.css'
-
-import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table'
+import {
+  type Column,
+  type ColumnDef,
+  ColumnOrdering,
+  ColumnPinning,
+  ColumnVisibility,
+  flexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
 import { faker } from '@faker-js/faker'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
-import type { Column, ColumnDef } from '@tanstack/react-table'
+import './index.css'
+
+const _features = tableFeatures({
+  ColumnVisibility,
+  ColumnPinning,
+  ColumnOrdering,
+})
 
 //These are the important styles to make sticky column pinning work!
 //Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
@@ -88,9 +100,8 @@ function App() {
   const rerender = () => setData(() => makeData(30))
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
     debugTable: true,

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

@@ -4,7 +4,13 @@ import { faker } from '@faker-js/faker'
 
 import './index.css'
 
-import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table'
+import {
+  ColumnOrdering,
+  ColumnPinning,
+  ColumnVisibility,
+  flexRender,
+  useTable,
+} from '@tanstack/react-table'
 import { makeData } from './makeData'
 import type {
   ColumnDef,
@@ -13,7 +19,9 @@ import type {
 } from '@tanstack/react-table'
 import type { Person } from './makeData'
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const _features = { ColumnVisibility, ColumnPinning, ColumnOrdering }
+
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -78,9 +86,8 @@ function App() {
   const rerender = () => setData(() => makeData(5000))
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
     state: {

examples/react/column-resizing-performant/src/main.tsx

@@ -1,11 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-
-import './index.css'
-
-import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table'
+import {
+  ColumnResizing,
+  ColumnSizing,
+  flexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
 import { makeData } from './makeData'
 import type { ColumnDef, Table } from '@tanstack/react-table'
+import './index.css'
+
+const _features = tableFeatures({ ColumnSizing, ColumnResizing })
 
 type Person = {
   firstName: string
@@ -16,7 +22,7 @@ type Person = {
   progress: number
 }
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -72,9 +78,8 @@ function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
     defaultColumn: {
@@ -96,8 +101,7 @@ function App() {
   const columnSizeVars = React.useMemo(() => {
     const headers = table.getFlatHeaders()
     const colSizes: { [key: string]: number } = {}
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i]
+    for (const header of headers) {
       colSizes[`--header-${header.id}-size`] = header.getSize()
       colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
     }
@@ -215,7 +219,7 @@ function TableBody({ table }: { table: Table<any, Person> }) {
         >
           {row.getVisibleCells().map((cell) => {
             //simulate expensive render
-            for (let i = 0; i < 10000; i++) {
+            for (const _ of Array(10000)) {
               Math.random()
             }
 

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

@@ -1,14 +1,20 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-
-import './index.css'
-
-import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table'
+import {
+  ColumnResizing,
+  ColumnSizing,
+  flexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
 import type {
   ColumnDef,
   ColumnResizeDirection,
   ColumnResizeMode,
 } from '@tanstack/react-table'
+import './index.css'
+
+const _features = tableFeatures({ ColumnResizing, ColumnSizing })
 
 type Person = {
   firstName: string
@@ -46,7 +52,7 @@ const defaultData: Array<Person> = [
   },
 ]
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -113,9 +119,8 @@ function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
     columnResizeMode,

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

@@ -1,10 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-
+import {
+  ColumnVisibility,
+  flexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import './index.css'
 
-import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table'
-import type { ColumnDef } from '@tanstack/react-table'
+const _features = tableFeatures({ ColumnVisibility })
 
 type Person = {
   firstName: string
@@ -42,7 +47,7 @@ const defaultData: Array<Person> = [
   },
 ]
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -95,7 +100,7 @@ const defaultColumns: Array<ColumnDef<any, Person>> = [
 ]
 
 function App() {
-  const [data, setData] = React.useState(() => [...defaultData])
+  const [data, _setData] = React.useState(() => [...defaultData])
   const [columns] = React.useState<typeof defaultColumns>(() => [
     ...defaultColumns,
   ])
@@ -104,9 +109,8 @@ function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-    },
+    _features,
+    _rowModels: {},
     columns,
     data,
     state: {

examples/react/editable-data/src/main.tsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-
-//
-import './index.css'
-
-//
 import {
-  createCoreRowModel,
+  ColumnFiltering,
+  RowPagination,
   createFilteredRowModel,
   createPaginatedRowModel,
   flexRender,
+  tableOptions,
   useTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData'
@@ -21,6 +18,15 @@ import type {
   TableFeatures,
 } from '@tanstack/react-table'
 import type { Person } from './makeData'
+import './index.css'
+
+const options = tableOptions({
+  _features: { RowPagination, ColumnFiltering },
+  _rowModels: {
+    Filtered: createFilteredRowModel(),
+    Paginated: createPaginatedRowModel(),
+  },
+})
 
 declare module '@tanstack/react-table' {
   interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
@@ -29,7 +35,7 @@ declare module '@tanstack/react-table' {
 }
 
 // Give our default column cell renderer editing superpowers!
-const defaultColumn: Partial<ColumnDef<any, any>> = {
+const defaultColumn: Partial<ColumnDef<typeof options._features, Person>> = {
   cell: ({ getValue, row: { index }, column: { id }, table }) => {
     const initialValue = getValue()
     // We need to keep and update the state of the cell normally
@@ -74,7 +80,9 @@ function useSkipper() {
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
-  const columns = React.useMemo<Array<ColumnDef<any, Person>>>(
+  const columns = React.useMemo<
+    Array<ColumnDef<typeof options._features, Person>>
+  >(
     () => [
       {
         header: 'Name',
@@ -133,11 +141,7 @@ function App() {
   const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper()
 
   const table = useTable({
-    _rowModels: {
-      Core: createCoreRowModel(),
-      Filtered: createFilteredRowModel(),
-      Paginated: createPaginatedRowModel(),
-    },
+    ...options,
     columns,
     data,
     defaultColumn,

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

@@ -6,15 +6,23 @@ export function tableOptions<
   TFeatures extends TableFeatures,
   TData extends RowData = any,
 >(
-  options: Omit<TableOptions<TFeatures, TData>, 'columns'>,
-): Omit<TableOptions<TFeatures, TData>, 'columns'>
+  options: Omit<TableOptions<TFeatures, TData>, 'columns'> & {
+    _features: TFeatures
+  },
+): Omit<TableOptions<TFeatures, TData>, 'columns' | '_features'> & {
+  _features: TFeatures
+}
 
 export function tableOptions<
   TFeatures extends TableFeatures,
   TData extends RowData = any,
 >(
-  options: Omit<TableOptions<TFeatures, TData>, 'data'>,
-): Omit<TableOptions<TFeatures, TData>, 'data'>
+  options: Omit<TableOptions<TFeatures, TData>, 'data'> & {
+    _features: TFeatures
+  },
+): Omit<TableOptions<TFeatures, TData>, 'data' | '_features'> & {
+  _features: TFeatures
+}
 
 export function tableOptions<
   TFeatures extends TableFeatures,
@@ -27,8 +35,12 @@ export function tableOptions<
   TFeatures extends TableFeatures,
   TData extends RowData = any,
 >(
-  options: Omit<TableOptions<TFeatures, TData>, 'data' | 'columns'>,
-): Omit<TableOptions<TFeatures, TData>, 'data' | 'columns'>
+  options: Omit<TableOptions<TFeatures, TData>, 'data' | 'columns'> & {
+    _features: TFeatures
+  },
+): Omit<TableOptions<TFeatures, TData>, 'data' | 'columns' | '_features'> & {
+  _features: TFeatures
+}
 
 export function tableOptions<
   TFeatures extends TableFeatures,