@tanstack/table-core 8.0.0-alpha.55 → 8.0.0-alpha.59

package/src/features/RowSelection.ts

@@ -1,14 +1,12 @@
 import {
-  Getter,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Row,
   RowModel,
   Updater,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
 export type RowSelectionState = Record<string, boolean>
 
@@ -41,40 +39,22 @@ export type RowSelectionOptions<TGenerics extends TableGenerics> = {
   // ) => RowModel<TGenerics>
 }
 
-type ToggleRowSelectedProps = {
-  onChange?: (e: unknown) => void
-  checked?: boolean
-  title?: string
-  indeterminate?: boolean
-}
-
 export type RowSelectionRow = {
   getIsSelected: () => boolean
   getIsSomeSelected: () => boolean
   getCanSelect: () => boolean
   getCanMultiSelect: () => boolean
   toggleSelected: (value?: boolean) => void
-  getToggleSelectedProps: <TGetter extends Getter<ToggleRowSelectedProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
+  getToggleSelectedHandler: () => (event: unknown) => void
 }
 
 export type RowSelectionInstance<TGenerics extends TableGenerics> = {
   queueResetRowSelection: () => void
-  getToggleRowSelectedProps: <TGetter extends Getter<ToggleRowSelectedProps>>(
-    rowId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
-  getToggleAllRowsSelectedProps: <
-    TGetter extends Getter<ToggleRowSelectedProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
-  getToggleAllPageRowsSelectedProps: <
-    TGetter extends Getter<ToggleRowSelectedProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
+  getToggleRowSelectedHandler: (
+    rowId: string
+  ) => undefined | ((e: unknown) => void)
+  getToggleAllRowsSelectedHandler: () => (event: unknown) => void
+  getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void
   setRowSelection: (updater: Updater<RowSelectionState>) => void
   resetRowSelection: () => void
   toggleRowSelected: (rowId: string, value?: boolean) => void
@@ -120,7 +100,7 @@ export const RowSelection = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): RowSelectionInstance<TGenerics> => {
     let registered = false
@@ -460,77 +440,35 @@ export const RowSelection = {
           : !!paginationFlatRows?.length
       },
 
-      getToggleRowSelectedProps: (rowId, userProps) => {
+      getToggleRowSelectedHandler: rowId => {
         const row = instance.getRow(rowId)
 
         const isSelected = row.getIsSelected()
         const isSomeSelected = row.getIsSomeSelected()
         const canSelect = row.getCanSelect()
 
-        const initialProps: ToggleRowSelectedProps = {
-          onChange: canSelect
-            ? (e: unknown) => {
-                row.toggleSelected(
-                  ((e as MouseEvent).target as HTMLInputElement).checked
-                )
-              }
-            : undefined,
-          checked: isSelected,
-          title: 'Toggle Row Selected',
-          indeterminate: isSomeSelected,
-          // onChange: forInput
-          //   ? (e: Event) => e.stopPropagation()
-          //   : (e: Event) => {
-          //       if (instance.options.isAdditiveSelectEvent(e)) {
-          //         row.toggleSelected()
-          //       } else if (instance.options.isInclusiveSelectEvent(e)) {
-          //         instance.addRowSelectionRange(row.id)
-          //       } else {
-          //         instance.setRowSelection({})
-          //         row.toggleSelected()
-          //       }
-
-          //       if (props.onClick) props.onClick(e)
-          //     },
+        return (e: unknown) => {
+          if (!canSelect) return
+          row.toggleSelected(
+            ((e as MouseEvent).target as HTMLInputElement)?.checked
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
 
-      getToggleAllRowsSelectedProps: userProps => {
-        const isSomeRowsSelected = instance.getIsSomeRowsSelected()
-        const isAllRowsSelected = instance.getIsAllRowsSelected()
-
-        const initialProps: ToggleRowSelectedProps = {
-          onChange: (e: unknown) => {
-            instance.toggleAllRowsSelected(
-              ((e as MouseEvent).target as HTMLInputElement).checked
-            )
-          },
-          checked: isAllRowsSelected,
-          title: 'Toggle All Rows Selected',
-          indeterminate: isSomeRowsSelected,
+      getToggleAllRowsSelectedHandler: () => {
+        return (e: unknown) => {
+          instance.toggleAllRowsSelected(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
 
-      getToggleAllPageRowsSelectedProps: userProps => {
-        const isSomePageRowsSelected = instance.getIsSomePageRowsSelected()
-        const isAllPageRowsSelected = instance.getIsAllPageRowsSelected()
-
-        const initialProps: ToggleRowSelectedProps = {
-          onChange: (e: unknown) => {
-            instance.toggleAllPageRowsSelected(
-              ((e as MouseEvent).target as HTMLInputElement).checked
-            )
-          },
-          checked: isAllPageRowsSelected,
-          title: 'Toggle All Current Page Rows Selected',
-          indeterminate: isSomePageRowsSelected,
+      getToggleAllPageRowsSelectedHandler: () => {
+        return (e: unknown) => {
+          instance.toggleAllPageRowsSelected(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
     }
   },
@@ -543,8 +481,8 @@ export const RowSelection = {
       getIsSelected: () => instance.getRowIsSelected(row.id),
       getIsSomeSelected: () => instance.getRowIsSomeSelected(row.id),
       toggleSelected: value => instance.toggleRowSelected(row.id, value),
-      getToggleSelectedProps: userProps =>
-        instance.getToggleRowSelectedProps(row.id, userProps),
+      getToggleSelectedHandler: () =>
+        instance.getToggleRowSelectedHandler(row.id)!,
       getCanMultiSelect: () => instance.getRowCanMultiSelect(row.id),
       getCanSelect: () => instance.getRowCanSelect(row.id),
     }

package/src/features/Rows.ts

@@ -0,0 +1,123 @@
+import {
+  TableGenerics,
+  TableInstance,
+  Row,
+  RowModel,
+  RowValues,
+} from '../types'
+import { flattenBy } from '../utils'
+
+export type CoreRow<TGenerics extends TableGenerics> = {
+  id: string
+  index: number
+  original?: TGenerics['Row']
+  depth: number
+  values: RowValues
+  subRows: Row<TGenerics>[]
+  getLeafRows: () => Row<TGenerics>[]
+  originalSubRows?: TGenerics['Row'][]
+}
+
+export type RowsOptions<TGenerics extends TableGenerics> = {
+  getCoreRowModel: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
+  getSubRows?: (
+    originalRow: TGenerics['Row'],
+    index: number
+  ) => undefined | TGenerics['Row'][]
+  getRowId?: (
+    originalRow: TGenerics['Row'],
+    index: number,
+    parent?: Row<TGenerics>
+  ) => string
+}
+
+export type RowsInstance<TGenerics extends TableGenerics> = {
+  getRowId: (
+    _: TGenerics['Row'],
+    index: number,
+    parent?: Row<TGenerics>
+  ) => string
+  createRow: (
+    id: string,
+    original: TGenerics['Row'] | undefined,
+    rowIndex: number,
+    depth: number,
+    values: Record<string, any>
+  ) => Row<TGenerics>
+  getCoreRowModel: () => RowModel<TGenerics>
+  _getCoreRowModel?: () => RowModel<TGenerics>
+  getRowModel: () => RowModel<TGenerics>
+  getRow: (id: string) => Row<TGenerics>
+}
+
+//
+
+export const Rows = {
+  // createRow: <TGenerics extends TableGenerics>(
+  //   row: Row<TGenerics>,
+  //   instance: TableInstance<TGenerics>
+  // ): CellsRow<TGenerics> => {
+  //   return {}
+  // },
+
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): RowsInstance<TGenerics> => {
+    return {
+      getRowId: (
+        row: TGenerics['Row'],
+        index: number,
+        parent?: Row<TGenerics>
+      ) =>
+        instance.options.getRowId?.(row, index, parent) ??
+        `${parent ? [parent.id, index].join('.') : index}`,
+      createRow: (id, original, rowIndex, depth, values) => {
+        let row: CoreRow<TGenerics> = {
+          id,
+          index: rowIndex,
+          original,
+          depth,
+          values,
+          subRows: [],
+          getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
+        }
+
+        for (let i = 0; i < instance._features.length; i++) {
+          const feature = instance._features[i]
+          Object.assign(row, feature.createRow?.(row, instance))
+        }
+
+        return row as Row<TGenerics>
+      },
+
+      getCoreRowModel: () => {
+        if (!instance._getCoreRowModel) {
+          instance._getCoreRowModel = instance.options.getCoreRowModel(instance)
+        }
+
+        return instance._getCoreRowModel()
+      },
+
+      // The final calls start at the bottom of the model,
+      // expanded rows, which then work their way up
+
+      getRowModel: () => {
+        return instance.getPaginationRowModel()
+      },
+      getRow: (id: string) => {
+        const row = instance.getRowModel().rowsById[id]
+
+        if (!row) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error(`getRow expected an ID, but got ${id}`)
+          }
+          throw new Error()
+        }
+
+        return row
+      },
+    }
+  },
+}

package/src/features/Sorting.ts

@@ -7,24 +7,14 @@ import {
 
 import {
   Column,
-  Getter,
-  Header,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
 } from '../types'
 
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-  propGetter,
-} from '../utils'
+import { isFunction, makeStateUpdater, Overwrite } from '../utils'
 
 export type SortDirection = 'asc' | 'desc'
 
@@ -72,12 +62,11 @@ export type SortingColumn<TGenerics extends TableGenerics> = {
   getIsSorted: () => false | SortDirection
   resetSorting: () => void
   toggleSorting: (desc?: boolean, isMulti?: boolean) => void
-  getToggleSortingProps: <TGetter extends Getter<ToggleSortingProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleSortingProps, TGetter>
+  getToggleSortingHandler: () => undefined | ((event: unknown) => void)
 }
 
 export type SortingOptions<TGenerics extends TableGenerics> = {
+  manualSorting?: boolean
   sortingFns?: TGenerics['SortingFns']
   onSortingChange?: OnChangeFn<SortingState>
   autoResetSorting?: boolean
@@ -93,11 +82,6 @@ export type SortingOptions<TGenerics extends TableGenerics> = {
   isMultiSortEvent?: (e: unknown) => boolean
 }
 
-export type ToggleSortingProps = {
-  title?: string
-  onClick?: (event: unknown) => void
-}
-
 export type SortingInstance<TGenerics extends TableGenerics> = {
   queueResetSorting: () => void
   getColumnAutoSortingFn: (columnId: string) => SortingFn<TGenerics> | undefined
@@ -116,10 +100,9 @@ export type SortingInstance<TGenerics extends TableGenerics> = {
   getColumnCanMultiSort: (columnId: string) => boolean
   getColumnIsSorted: (columnId: string) => false | 'asc' | 'desc'
   getColumnSortIndex: (columnId: string) => number
-  getToggleSortingProps: <TGetter extends Getter<ToggleSortingProps>>(
-    columnId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleSortingProps, TGetter>
+  getToggleSortingHandler: (
+    columnId: string
+  ) => undefined | ((event: unknown) => void)
   getPreSortedRowModel: () => RowModel<TGenerics>
   getSortedRowModel: () => RowModel<TGenerics>
   _getSortedRowModel?: () => RowModel<TGenerics>
@@ -167,12 +150,12 @@ export const Sorting = {
       resetSorting: () => instance.resetSorting(column.id),
       toggleSorting: (desc, isMulti) =>
         instance.toggleColumnSorting(column.id, desc, isMulti),
-      getToggleSortingProps: userProps =>
-        instance.getToggleSortingProps(column.id, userProps),
+      getToggleSortingHandler: () =>
+        instance.getToggleSortingHandler(column.id)!,
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): SortingInstance<TGenerics> => {
     let registered = false
@@ -415,7 +398,7 @@ export const Sorting = {
         }
       },
 
-      getToggleSortingProps: (columnId, userProps) => {
+      getToggleSortingHandler: columnId => {
         const column = instance.getColumn(columnId)
 
         if (!column) {
@@ -424,22 +407,16 @@ export const Sorting = {
 
         const canSort = column.getCanSort()
 
-        const initialProps: ToggleSortingProps = {
-          title: canSort ? 'Toggle Sorting' : undefined,
-          onClick: canSort
-            ? (e: unknown) => {
-                ;(e as any).persist?.()
-                column.toggleSorting?.(
-                  undefined,
-                  column.getCanMultiSort()
-                    ? instance.options.isMultiSortEvent?.(e)
-                    : false
-                )
-              }
-            : undefined,
+        return (e: unknown) => {
+          if (!canSort) return
+          ;(e as any).persist?.()
+          column.toggleSorting?.(
+            undefined,
+            column.getCanMultiSort()
+              ? instance.options.isMultiSortEvent?.(e)
+              : false
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
 
       getPreSortedRowModel: () => instance.getGlobalFilteredRowModel(),
@@ -452,7 +429,7 @@ export const Sorting = {
             instance.options.getSortedRowModel(instance)
         }
 
-        if (!instance._getSortedRowModel) {
+        if (instance.options.manualSorting || !instance._getSortedRowModel) {
           return instance.getPreSortedRowModel()
         }
 

package/src/features/Visibility.ts

@@ -1,14 +1,13 @@
 import {
   Cell,
   Column,
-  Getter,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Updater,
+  Row,
 } from '../types'
-import { makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
 export type VisibilityOptions = {
   onColumnVisibilityChange?: OnChangeFn<VisibilityState>
@@ -28,6 +27,9 @@ export type VisibilityTableState = {
 export type VisibilityInstance<TGenerics extends TableGenerics> = {
   getVisibleFlatColumns: () => Column<TGenerics>[]
   getVisibleLeafColumns: () => Column<TGenerics>[]
+  getLeftVisibleLeafColumns: () => Column<TGenerics>[]
+  getRightVisibleLeafColumns: () => Column<TGenerics>[]
+  getCenterVisibleLeafColumns: () => Column<TGenerics>[]
   setColumnVisibility: (updater: Updater<VisibilityState>) => void
   toggleColumnVisibility: (columnId: string, value?: boolean) => void
   toggleAllColumnsVisible: (value?: boolean) => void
@@ -35,16 +37,11 @@ export type VisibilityInstance<TGenerics extends TableGenerics> = {
   getColumnCanHide: (columnId: string) => boolean
   getIsAllColumnsVisible: () => boolean
   getIsSomeColumnsVisible: () => boolean
-  getToggleAllColumnsVisibilityProps: <
-    TGetter extends Getter<ToggleAllColumnsVisibilityProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleAllColumnsVisibilityProps, TGetter>
+  getToggleAllColumnsVisibilityHandler: () =>
+    | undefined
+    | ((event: unknown) => void)
 }
 
-type ToggleVisibilityProps = {}
-type ToggleAllColumnsVisibilityProps = {}
-
 export type VisibilityColumnDef = {
   enableHiding?: boolean
   defaultCanHide?: boolean
@@ -52,6 +49,7 @@ export type VisibilityColumnDef = {
 }
 
 export type VisibilityRow<TGenerics extends TableGenerics> = {
+  _getAllVisibleCells: () => Cell<TGenerics>[]
   getVisibleCells: () => Cell<TGenerics>[]
 }
 
@@ -59,9 +57,7 @@ export type VisibilityColumn = {
   getCanHide: () => boolean
   getIsVisible: () => boolean
   toggleVisibility: (value?: boolean) => void
-  getToggleVisibilityProps: <TGetter extends Getter<ToggleVisibilityProps>>(
-    userProps?: TGetter
-  ) => PropGetterValue<ToggleVisibilityProps, TGetter>
+  getToggleVisibilityHandler: () => (event: unknown) => void
 }
 
 //
@@ -96,63 +92,98 @@ export const Visibility = {
       getIsVisible: () => instance.getColumnIsVisible(column.id),
       toggleVisibility: value =>
         instance.toggleColumnVisibility(column.id, value),
-      getToggleVisibilityProps: userProps => {
-        const props: ToggleVisibilityProps = {
-          type: 'checkbox',
-          checked: column.getIsVisible?.(),
-          title: 'Toggle Column Visibility',
-          onChange: (e: unknown) => {
-            column.toggleVisibility?.(
-              ((e as MouseEvent).target as HTMLInputElement).checked
-            )
-          },
+      getToggleVisibilityHandler: () => {
+        return (e: unknown) => {
+          column.toggleVisibility?.(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
         }
-
-        return propGetter(props, userProps)
       },
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
-  ): VisibilityInstance<TGenerics> => {
+  ): VisibilityRow<TGenerics> => {
     return {
-      getVisibleFlatColumns: memo(
+      _getAllVisibleCells: memo(
         () => [
-          instance.getAllFlatColumns(),
-          instance
-            .getAllFlatColumns()
-            .filter(d => d.getIsVisible?.())
+          row
+            .getAllCells()
+            .filter(cell => cell.column.getIsVisible())
             .map(d => d.id)
             .join('_'),
         ],
-        allFlatColumns => {
-          return allFlatColumns.filter(d => d.getIsVisible?.())
+        _ => {
+          return row.getAllCells().filter(cell => cell.column.getIsVisible())
         },
         {
-          key: 'getVisibleFlatColumns',
-          debug: () =>
-            instance.options.debugAll ?? instance.options.debugColumns,
+          key: 'row._getAllVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
+      getVisibleCells: memo(
+        () => [
+          row.getLeftVisibleCells(),
+          row.getCenterVisibleCells(),
+          row.getRightVisibleCells(),
+        ],
+        (left, center, right) => [...left, ...center, ...right],
+        {
+          key: 'row.getVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+    }
+  },
 
-      getVisibleLeafColumns: memo(
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): VisibilityInstance<TGenerics> => {
+    const makeVisibleColumnsMethod = (
+      key: string,
+      getColumns: () => Column<TGenerics>[]
+    ): (() => Column<TGenerics>[]) => {
+      return memo(
         () => [
-          instance.getAllLeafColumns(),
-          instance
-            .getAllLeafColumns()
-            .filter(d => d.getIsVisible?.())
+          getColumns(),
+          getColumns()
+            .filter(d => d.getIsVisible())
             .map(d => d.id)
             .join('_'),
         ],
-        allFlatColumns => {
-          return allFlatColumns.filter(d => d.getIsVisible?.())
+        columns => {
+          return columns.filter(d => d.getIsVisible?.())
         },
         {
-          key: 'getVisibleLeafColumns',
+          key,
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
+      )
+    }
+
+    return {
+      getVisibleFlatColumns: makeVisibleColumnsMethod(
+        'getVisibleFlatColumns',
+        () => instance.getAllFlatColumns()
+      ),
+      getVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getVisibleLeafColumns',
+        () => instance.getAllLeafColumns()
+      ),
+      getLeftVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getLeftVisibleLeafColumns',
+        () => instance.getLeftLeafColumns()
+      ),
+      getRightVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getRightVisibleLeafColumns',
+        () => instance.getRightLeafColumns()
+      ),
+      getCenterVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getCenterVisibleLeafColumns',
+        () => instance.getCenterLeafColumns()
       ),
 
       setColumnVisibility: updater =>
@@ -218,24 +249,12 @@ export const Visibility = {
       getIsSomeColumnsVisible: () =>
         instance.getAllLeafColumns().some(column => column.getIsVisible?.()),
 
-      getToggleAllColumnsVisibilityProps: userProps => {
-        const props: ToggleAllColumnsVisibilityProps = {
-          onChange: (e: MouseEvent) => {
-            instance.toggleAllColumnsVisible(
-              (e.target as HTMLInputElement)?.checked
-            )
-          },
-          type: 'checkbox',
-          title: 'Toggle visibility for all columns',
-          checked: instance.getIsAllColumnsVisible(),
-          indeterminate:
-            !instance.getIsAllColumnsVisible() &&
-            instance.getIsSomeColumnsVisible()
-              ? 'indeterminate'
-              : undefined,
+      getToggleAllColumnsVisibilityHandler: () => {
+        return (e: unknown) => {
+          instance.toggleAllColumnsVisible(
+            ((e as MouseEvent).target as HTMLInputElement)?.checked
+          )
         }
-
-        return propGetter(props, userProps)
       },
     }
   },

package/src/filterFns.ts

@@ -7,6 +7,7 @@ export const filterFns = {
   equalsStringSensitive,
   arrIncludes,
   arrIncludesAll,
+  arrIncludesSome,
   equals,
   weakEquals,
   betweenNumberRange,
@@ -117,6 +118,25 @@ function arrIncludesAll<TGenerics extends TableGenerics>(
 
 arrIncludesAll.autoRemove = (val: any) => testFalsey(val) || !val?.length
 
+function arrIncludesSome<TGenerics extends TableGenerics>(
+  rows: Row<TGenerics>[],
+  columnIds: string[],
+  filterValue: unknown[]
+) {
+  return rows.filter(row => {
+    return columnIds.some(id => {
+      const rowValue = row.values[id]
+      return (
+        rowValue &&
+        rowValue.length &&
+        filterValue.some(val => rowValue.includes(val))
+      )
+    })
+  })
+}
+
+arrIncludesSome.autoRemove = (val: any) => testFalsey(val) || !val?.length
+
 function equals<TGenerics extends TableGenerics>(
   rows: Row<TGenerics>[],
   columnIds: string[],