@tanstack/react-table 8.0.0-alpha.1 → 8.0.0-alpha.4

package/src/core.tsx

@@ -38,11 +38,24 @@ import * as Filters from './features/Filters'
 import * as Sorting from './features/Sorting'
 import * as Grouping from './features/Grouping'
 import * as Expanding from './features/Expanding'
+import * as ColumnSizing from './features/ColumnSizing'
+import * as Pagination from './features/Pagination'
+import * as RowSelection from './features/RowSelection'
 import { RowModel } from '.'
 
-// import './features/withColumnResizing';
-// import './features/withPagination';
-// import './features/withRowSelection';
+const features = [
+  Visibility,
+  Ordering,
+  Pinning,
+  Headers,
+  Filters,
+  Sorting,
+  Grouping,
+  Expanding,
+  ColumnSizing,
+  Pagination,
+  RowSelection,
+]
 
 export type CoreOptions<
   TData,
@@ -66,6 +79,7 @@ export type CoreOptions<
     parent?: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   ) => string
   onStateChange?: (newState: TableState) => void
+  autoResetAll?: boolean
 }
 
 export type TableCore<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
@@ -225,6 +239,10 @@ export type TableCore<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
       columnId: string,
       userProps?: TGetter
     ) => undefined | PropGetterValue<CellProps, TGetter>
+    getTableWidth: () => number
+    getLeftTableWidth: () => number
+    getCenterTableWidth: () => number
+    getRightTableWidth: () => number
   }
 
 export type CoreRow<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
@@ -256,93 +274,138 @@ export type CoreColumnDef<
   TFilterFns,
   TSortingFns,
   TAggregationFns
-> = (
-  | {
-      accessorFn: AccessorFn<TData>
-      id: string
-      accessorKey?: never
-      header?:
-        | string
-        | Renderable<{
-            header: Header<
-              TData,
-              TValue,
-              TFilterFns,
-              TSortingFns,
-              TAggregationFns
-            >
-            column: Column<
-              TData,
-              TValue,
-              TFilterFns,
-              TSortingFns,
-              TAggregationFns
-            >
-          }>
-    }
-  | {
-      accessorKey: string & keyof TData
-      id?: string
-      accessorFn?: never
-      header?:
-        | string
-        | Renderable<{
-            header: Header<
-              TData,
-              TValue,
-              TFilterFns,
-              TSortingFns,
-              TAggregationFns
-            >
-            column: Column<
-              TData,
-              TValue,
-              TFilterFns,
-              TSortingFns,
-              TAggregationFns
-            >
-          }>
-    }
-  | {
-      id: string
-      accessorKey?: never
-      accessorFn?: never
-      header?:
-        | string
-        | Renderable<{
-            header: Header<
-              TData,
-              TValue,
-              TFilterFns,
-              TSortingFns,
-              TAggregationFns
-            >
-            column: Column<
-              TData,
-              TValue,
-              TFilterFns,
-              TSortingFns,
-              TAggregationFns
-            >
-          }>
-    }
-  | {
-      header: string
-      id?: string
-      accessorKey?: never
-      accessorFn?: never
-    }
-) & {
+> = {
+  id: string
+  accessorKey?: string & keyof TData
+  accessorFn?: AccessorFn<TData>
+  header?:
+    | string
+    | Renderable<{
+        instance: ReactTable<
+          TData,
+          TValue,
+          TFilterFns,
+          TSortingFns,
+          TAggregationFns
+        >
+        header: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+        column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+      }>
+} & //           instance: ReactTable< //       | Renderable<{ //       | string //     header?: //     accessorKey?: never //     id: string //     accessorFn: AccessorFn<TData> // | {
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//           header: Header<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//           column: Column<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//         }>
+//   }
+// | {
+//     accessorKey: string & keyof TData
+//     id?: string
+//     accessorFn?: never
+//     header?:
+//       | string
+//       | Renderable<{
+//           instance: ReactTable<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//           header: Header<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//           column: Column<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//         }>
+//   }
+// | {
+//     id: string
+//     accessorKey?: never
+//     accessorFn?: never
+//     header?:
+//       | string
+//       | Renderable<{
+//           instance: ReactTable<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//           header: Header<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//           column: Column<
+//             TData,
+//             TValue,
+//             TFilterFns,
+//             TSortingFns,
+//             TAggregationFns
+//           >
+//         }>
+//   }
+// | {
+//     header: string
+//     id?: string
+//     accessorKey?: never
+//     accessorFn?: never
+//   }
+{
   __generated: true
   width?: number
   minWidth?: number
   maxWidth?: number
   columns?: ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[]
   footer?: Renderable<{
+    instance: ReactTable<
+      TData,
+      TValue,
+      TFilterFns,
+      TSortingFns,
+      TAggregationFns
+    >
     header: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   }>
   cell?: Renderable<{
+    instance: ReactTable<
+      TData,
+      TValue,
+      TFilterFns,
+      TSortingFns,
+      TAggregationFns
+    >
+    row: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     cell: Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     value: TValue
@@ -402,15 +465,9 @@ export function createTableInstance<
     TAggregationFns
   >
 
-  const defaultOptions = {
-    ...Visibility.getDefaultOptions(instance),
-    ...Ordering.getDefaultOptions(instance),
-    ...Pinning.getDefaultOptions(instance),
-    ...Filters.getDefaultOptions(instance),
-    ...Sorting.getDefaultOptions(instance),
-    ...Grouping.getDefaultOptions(instance),
-    ...Expanding.getDefaultOptions(instance),
-  }
+  const defaultOptions = features.reduce((obj, feature) => {
+    return Object.assign(obj, (feature as any).getDefaultOptions?.(instance))
+  }, {})
 
   const defaultState = {}
 
@@ -425,15 +482,11 @@ export function createTableInstance<
   instance.options = buildOptions(options)
 
   const initialState = {
-    ...Visibility.getInitialState(),
-    ...Ordering.getInitialState(),
-    ...Pinning.getInitialState(),
-    ...Filters.getInitialState(),
-    ...Sorting.getInitialState(),
-    ...Grouping.getInitialState(),
-    ...Expanding.getInitialState(),
+    ...features.reduce((obj, feature) => {
+      return Object.assign(obj, (feature as any).getInitialState?.())
+    }, {}),
     ...(options.initialState ?? {}),
-  }
+  } as TableState
 
   const finalInstance: ReactTable<
     TData,
@@ -443,14 +496,9 @@ export function createTableInstance<
     TAggregationFns
   > = {
     ...instance,
-    ...Visibility.getInstance(instance),
-    ...Ordering.getInstance(instance),
-    ...Pinning.getInstance(instance),
-    ...Headers.getInstance(instance),
-    ...Filters.getInstance(instance),
-    ...Sorting.getInstance(instance),
-    ...Grouping.getInstance(instance),
-    ...Expanding.getInstance(instance),
+    ...features.reduce((obj, feature) => {
+      return Object.assign(obj, (feature as any).getInstance?.(instance))
+    }, {}),
     rerender,
     initialState,
     internalState: initialState,
@@ -468,19 +516,23 @@ export function createTableInstance<
     ) => `${parent ? [parent.id, index].join('.') : index}`,
 
     getState: () => {
-      return {
+      let state = {
         ...instance.internalState,
         ...instance.options.state,
       }
+
+      return state
     },
 
     setState: (
       updater: Updater<TableState>,
       shouldRerender: boolean = true
     ) => {
-      const newState = functionalUpdate(updater, instance.internalState)
       const onStateChange = instance.options.onStateChange
 
+      let internalState = instance.internalState
+      let newState = functionalUpdate(updater, internalState)
+
       instance.internalState = newState
 
       if (onStateChange) {
@@ -513,17 +565,15 @@ export function createTableInstance<
           ) => props.header.column.id,
           cell: ({ value = '' }: { value: any }): JSX.Element =>
             typeof value === 'boolean' ? value.toString() : value,
-          ...Visibility.getDefaultColumn(),
-          ...Filters.getDefaultColumn(),
-          ...Sorting.getDefaultColumn(),
-          ...Grouping.getDefaultColumn(),
+          ...features.reduce((obj, feature) => {
+            return Object.assign(obj, (feature as any).getDefaultColumn?.())
+          }, {}),
           ...defaultColumn,
         } as Partial<
           ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
         >
       },
-      'getDefaultColumn',
-      instance.options.debug
+      { debug: instance.options.debug, key: 'getDefaultColumn' }
     ),
 
     getColumnDefs: () => instance.options.columns,
@@ -563,9 +613,7 @@ export function createTableInstance<
         TSortingFns,
         TAggregationFns
       > = {
-        width: 150,
-        minWidth: 20,
-        maxWidth: Number.MAX_SAFE_INTEGER,
+        ...ColumnSizing.defaultColumnSizing,
         ...defaultColumn,
         ...columnDef,
         id: `${id}`,
@@ -589,8 +637,10 @@ export function createTableInstance<
               ...column.columns?.flatMap(d => d.getFlatColumns()),
             ]
           },
-          'column.getFlatColumns',
-          instance.options.debug
+          {
+            key: 'column.getFlatColumns',
+            debug: instance.options.debug,
+          }
         ),
         getLeafColumns: memo(
           () => [instance.getOrderColumnsFn()],
@@ -613,64 +663,19 @@ export function createTableInstance<
               >,
             ]
           },
-          'column.getLeafColumns',
-          instance.options.debug
+          {
+            key: 'column.getLeafColumns',
+            debug: instance.options.debug,
+          }
         ),
       }
 
-      column = Object.assign(
-        column,
-        Visibility.createColumn(
-          column as Column<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          instance
-        ),
-        Pinning.createColumn(
-          column as Column<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          instance
-        ),
-        Filters.createColumn(
-          column as Column<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          instance
-        ),
-        Sorting.createColumn(
-          column as Column<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          instance
-        ),
-        Grouping.createColumn(
-          column as Column<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          instance
+      column = features.reduce((obj, feature) => {
+        return Object.assign(
+          obj,
+          (feature as any).createColumn?.(column, instance)
         )
-      )
+      }, column)
 
       // Yes, we have to convert instance to uknown, because we know more than the compiler here.
       return column as Column<
@@ -724,8 +729,7 @@ export function createTableInstance<
 
         return recurseColumns(columnDefs)
       },
-      'getAllColumns',
-      instance.options.debug
+      { key: 'getAllColumns', debug: instance.options.debug }
     ),
 
     getAllFlatColumns: memo(
@@ -735,8 +739,7 @@ export function createTableInstance<
           return column.getFlatColumns()
         })
       },
-      'getAllFlatColumns',
-      instance.options.debug
+      { key: 'getAllFlatColumns', debug: instance.options.debug }
     ),
 
     getAllFlatColumnsById: memo(
@@ -747,8 +750,7 @@ export function createTableInstance<
           return acc
         }, {} as Record<string, Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>>)
       },
-      'getAllFlatColumnsById',
-      instance.options.debug
+      { key: 'getAllFlatColumnsById', debug: instance.options.debug }
     ),
 
     getAllLeafColumns: memo(
@@ -757,8 +759,7 @@ export function createTableInstance<
         let leafColumns = allColumns.flatMap(column => column.getLeafColumns())
         return orderColumns(leafColumns)
       },
-      'getAllLeafColumns',
-      instance.options.debug
+      { key: 'getAllLeafColumns', debug: instance.options.debug }
     ),
 
     getColumn: columnId => {
@@ -783,9 +784,14 @@ export function createTableInstance<
         throw new Error()
       }
 
+      const columnSize = instance.getState().columnSizing[column.id]
+
       return Math.min(
-        Math.max(column.minWidth ?? 0, column.width ?? 0),
-        column.maxWidth ?? 0
+        Math.max(
+          column.minWidth ?? ColumnSizing.defaultColumnSizing.minWidth,
+          columnSize ?? column.width ?? ColumnSizing.defaultColumnSizing.width
+        ),
+        column.maxWidth ?? ColumnSizing.defaultColumnSizing.maxWidth
       )
     },
 
@@ -805,24 +811,28 @@ export function createTableInstance<
         value,
         getCellProps: userProps =>
           instance.getCellProps(row.id, column.id, userProps)!,
-        renderCell: () => flexRender(column.cell, { column, cell, value }),
+        renderCell: () =>
+          flexRender(column.cell, { instance, column, row, cell, value }),
       }
 
-      Object.assign(cell, {
-        ...Grouping.createCell(
-          cell as Cell<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          > &
-            Grouping.GroupingCell,
-          column,
-          row as Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-          instance
-        ),
-      })
+      features.forEach(feature => {
+        Object.assign(
+          cell,
+          (feature as any).createCell?.(
+            cell as Cell<
+              TData,
+              TValue,
+              TFilterFns,
+              TSortingFns,
+              TAggregationFns
+            > &
+              Grouping.GroupingCell,
+            column,
+            row as Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+            instance
+          )
+        )
+      }, {})
 
       return cell
     },
@@ -864,8 +874,10 @@ export function createTableInstance<
             )
           })
         },
-        process.env.NODE_ENV !== 'production' ? 'row.getAllCells' : '',
-        instance.options.debug
+        {
+          key: process.env.NODE_ENV !== 'production' ? 'row.getAllCells' : '',
+          debug: instance.options.debug,
+        }
       )
 
       row.getAllCellsByColumnId = memo(
@@ -876,25 +888,15 @@ export function createTableInstance<
             return acc
           }, {} as Record<string, Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>>)
         },
-        'row.getAllCellsByColumnId',
-        instance.options.debug
+        {
+          key: 'row.getAllCellsByColumnId',
+          debug: instance.options.debug,
+        }
       )
 
-      row = Object.assign(
-        row,
-        Headers.createRow(
-          row as Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-          instance
-        ),
-        Grouping.createRow(
-          row as Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-          instance
-        ),
-        Expanding.createRow(
-          row as Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-          instance
-        )
-      )
+      features.forEach(feature => {
+        Object.assign(row, (feature as any).createRow?.(row, instance))
+      })
 
       return row as Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     },
@@ -914,50 +916,6 @@ export function createTableInstance<
         if (process.env.NODE_ENV !== 'production' && instance.options.debug)
           console.info('Accessing...')
 
-        // Auto-reset data-dependent states if configured
-        if (
-          instance.options.autoResetColumnFilters &&
-          // @ts-ignore
-          instance.getRowModelNonFirst
-        ) {
-          instance.resetColumnFilters()
-        }
-
-        if (
-          instance.options.autoResetGlobalFilter &&
-          // @ts-ignore
-          instance.getRowModelNonFirst
-        ) {
-          instance.resetGlobalFilter()
-        }
-
-        if (
-          instance.options.autoResetSorting &&
-          // @ts-ignore
-          instance.getRowModelNonFirst
-        ) {
-          instance.resetSorting()
-        }
-
-        if (
-          instance.options.autoResetGrouping &&
-          // @ts-ignore
-          instance.getRowModelNonFirst
-        ) {
-          instance.resetGrouping()
-        }
-
-        if (
-          instance.options.autoResetExpanded &&
-          // @ts-ignore
-          instance.getRowModelNonFirst
-        ) {
-          instance.resetExpanded()
-        }
-
-        // @ts-ignore
-        instance.getRowModelNonFirst = true
-
         // Access the row model using initial columns
         const rows: Row<
           TData,
@@ -1066,8 +1024,14 @@ export function createTableInstance<
 
         return { rows, flatRows, rowsById }
       },
-      'getRowModel',
-      instance.options.debug
+      {
+        key: 'getRowModel',
+        debug: instance.options.debug,
+        onChange: () => {
+          instance._notifyRowSelectionReset()
+          instance._notifyFiltersReset()
+        },
+      }
     ),
 
     // The standard
@@ -1088,7 +1052,7 @@ export function createTableInstance<
     // expanded rows, which then work their way up
 
     getRowModel: () => {
-      return instance.getExpandedRowModel()
+      return instance.getPaginationRowModel()
     },
 
     getRows: () => {
@@ -1188,7 +1152,30 @@ export function createTableInstance<
         userProps
       )
     },
+
+    getTableWidth: () =>
+      instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
+    getLeftTableWidth: () =>
+      instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
+    getCenterTableWidth: () =>
+      instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
+    getRightTableWidth: () =>
+      instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
   }
 
-  return Object.assign(instance, finalInstance)
+  instance = Object.assign(instance, finalInstance)
+
+  // This won't trigger a rerender yet, but it will force
+  // pagination derivation to run (particularly pageSize detection)
+  instance.setPagination(d => d)
+
+  return instance
 }