@tanstack/table-core 8.0.0-alpha.9 → 8.0.0-beta.0

package/src/features/Visibility.ts

@@ -1,14 +1,20 @@
+import { TableFeature } from '../core/instance'
 import {
   Cell,
   Column,
-  Getter,
   OnChangeFn,
-  PartialGenerics,
-  PropGetterValue,
+  TableGenerics,
   TableInstance,
   Updater,
+  Row,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
+
+export type VisibilityState = Record<string, boolean>
+
+export type VisibilityTableState = {
+  columnVisibility: VisibilityState
+}
 
 export type VisibilityOptions = {
   onColumnVisibilityChange?: OnChangeFn<VisibilityState>
@@ -19,38 +25,26 @@ export type VisibilityDefaultOptions = {
   onColumnVisibilityChange: OnChangeFn<VisibilityState>
 }
 
-export type VisibilityState = Record<string, boolean>
-
-export type VisibilityTableState = {
-  columnVisibility: VisibilityState
-}
-
-export type VisibilityInstance<TGenerics extends PartialGenerics> = {
+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
+  resetColumnVisibility: (defaultState?: boolean) => void
   toggleAllColumnsVisible: (value?: boolean) => void
-  getColumnIsVisible: (columId: string) => boolean
-  getColumnCanHide: (columnId: string) => boolean
   getIsAllColumnsVisible: () => boolean
   getIsSomeColumnsVisible: () => boolean
-  getToggleAllColumnsVisibilityProps: <
-    TGetter extends Getter<ToggleAllColumnsVisibilityProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleAllColumnsVisibilityProps, TGetter>
+  getToggleAllColumnsVisibilityHandler: () => (event: unknown) => void
 }
 
-type ToggleVisibilityProps = {}
-type ToggleAllColumnsVisibilityProps = {}
-
 export type VisibilityColumnDef = {
   enableHiding?: boolean
-  defaultCanHide?: boolean
 }
 
-export type VisibilityRow<TGenerics extends PartialGenerics> = {
+export type VisibilityRow<TGenerics extends TableGenerics> = {
+  _getAllVisibleCells: () => Cell<TGenerics>[]
   getVisibleCells: () => Cell<TGenerics>[]
 }
 
@@ -58,21 +52,20 @@ 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
 }
 
 //
 
-export const Visibility = {
-  getInitialState: (): VisibilityTableState => {
+export const Visibility: TableFeature = {
+  getInitialState: (state): VisibilityTableState => {
     return {
       columnVisibility: {},
+      ...state,
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): VisibilityDefaultOptions => {
     return {
@@ -80,93 +73,125 @@ export const Visibility = {
     }
   },
 
-  getDefaultColumn: () => {
-    return {
-      defaultIsVisible: true,
-    }
-  },
-
-  createColumn: <TGenerics extends PartialGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): VisibilityColumn => {
     return {
-      getCanHide: () => instance.getColumnCanHide(column.id),
-      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: MouseEvent | TouchEvent) => {
-            column.toggleVisibility?.((e.target as HTMLInputElement).checked)
-          },
+      toggleVisibility: value => {
+        if (column.getCanHide()) {
+          instance.setColumnVisibility(old => ({
+            ...old,
+            [column.id]: value ?? !column.getIsVisible(),
+          }))
         }
+      },
+      getIsVisible: () => {
+        return instance.getState().columnVisibility?.[column.id] ?? true
+      },
 
-        return propGetter(props, userProps)
+      getCanHide: () => {
+        return (
+          (column.columnDef.enableHiding ?? true) &&
+          (instance.options.enableHiding ?? true)
+        )
+      },
+      getToggleVisibilityHandler: () => {
+        return (e: unknown) => {
+          column.toggleVisibility?.(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
+        }
       },
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
-  ): VisibilityInstance<TGenerics> => {
+  ): VisibilityRow<TGenerics> => {
     return {
-      getVisibleFlatColumns: memo(
+      _getAllVisibleCells: memo(
+        () => [row.getAllCells(), instance.getState().columnVisibility],
+        cells => {
+          return cells.filter(cell => cell.column.getIsVisible())
+        },
+        {
+          key:
+            process.env.NODE_ENV === 'production' && 'row._getAllVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getVisibleCells: memo(
         () => [
-          instance.getAllFlatColumns(),
-          instance
-            .getAllFlatColumns()
-            .filter(d => d.getIsVisible?.())
-            .map(d => d.id)
-            .join('_'),
+          row.getLeftVisibleCells(),
+          row.getCenterVisibleCells(),
+          row.getRightVisibleCells(),
         ],
-        allFlatColumns => {
-          return allFlatColumns.filter(d => d.getIsVisible?.())
-        },
+        (left, center, right) => [...left, ...center, ...right],
         {
-          key: 'getVisibleFlatColumns',
-          debug: () =>
-            instance.options.debugAll ?? instance.options.debugColumns,
+          key: process.env.NODE_ENV === 'development' && '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 =>
-        instance.options.onColumnVisibilityChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().columnVisibility)
-        ),
+        instance.options.onColumnVisibilityChange?.(updater),
 
-      toggleColumnVisibility: (columnId, value) => {
-        if (!columnId) return
-
-        if (instance.getColumnCanHide(columnId)) {
-          instance.setColumnVisibility(old => ({
-            ...old,
-            [columnId]: value ?? !instance.getColumnIsVisible(columnId),
-          }))
-        }
+      resetColumnVisibility: defaultState => {
+        instance.setColumnVisibility(
+          defaultState ? {} : instance.initialState.columnVisibility ?? {}
+        )
       },
 
       toggleAllColumnsVisible: value => {
@@ -183,59 +208,18 @@ export const Visibility = {
         )
       },
 
-      getColumnIsVisible: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        return (
-          instance.getState().columnVisibility?.[columnId] ??
-          column.defaultIsVisible ??
-          true
-        )
-      },
-
-      getColumnCanHide: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        return (
-          instance.options.enableHiding ??
-          column.enableHiding ??
-          column.defaultCanHide ??
-          true
-        )
-      },
-
       getIsAllColumnsVisible: () =>
         !instance.getAllLeafColumns().some(column => !column.getIsVisible?.()),
 
       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

@@ -0,0 +1,135 @@
+import { FilterFn } from './features/Filters'
+
+const includesString: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: string
+) => {
+  const search = filterValue.toLowerCase()
+  return row.getValue(columnId).toLowerCase().includes(search)
+}
+
+includesString.autoRemove = (val: any) => testFalsey(val)
+
+const includesStringSensitive: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: string
+) => {
+  return row.getValue(columnId).includes(filterValue)
+}
+
+includesStringSensitive.autoRemove = (val: any) => testFalsey(val)
+
+const equalsString: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: string
+) => {
+  return row.getValue(columnId).toLowerCase() === filterValue.toLowerCase()
+}
+
+equalsString.autoRemove = (val: any) => testFalsey(val)
+
+const arrIncludes: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: unknown
+) => {
+  return row.getValue(columnId).includes(filterValue)
+}
+
+arrIncludes.autoRemove = (val: any) => testFalsey(val) || !val?.length
+
+const arrIncludesAll: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: unknown[]
+) => {
+  return !filterValue.some(val => !row.getValue(columnId).includes(val))
+}
+
+arrIncludesAll.autoRemove = (val: any) => testFalsey(val) || !val?.length
+
+const arrIncludesSome: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: unknown[]
+) => {
+  return filterValue.some(val => row.getValue(columnId).includes(val))
+}
+
+arrIncludesSome.autoRemove = (val: any) => testFalsey(val) || !val?.length
+
+const equals: FilterFn<any> = (row, columnId: string, filterValue: unknown) => {
+  return row.getValue(columnId) === filterValue
+}
+
+equals.autoRemove = (val: any) => testFalsey(val)
+
+const weakEquals: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: unknown
+) => {
+  return row.getValue(columnId) == filterValue
+}
+
+weakEquals.autoRemove = (val: any) => testFalsey(val)
+
+const inNumberRange: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: [number, number]
+) => {
+  let [min, max] = filterValue
+
+  const rowValue = row.getValue(columnId)
+  return rowValue >= min && rowValue <= max
+}
+
+inNumberRange.resolveFilterValue = (val: [any, any]) => {
+  let [unsafeMin, unsafeMax] = val
+
+  let parsedMin =
+    typeof unsafeMin !== 'number' ? parseFloat(unsafeMin as string) : unsafeMin
+  let parsedMax =
+    typeof unsafeMax !== 'number' ? parseFloat(unsafeMax as string) : unsafeMax
+
+  let min =
+    unsafeMin === null || Number.isNaN(parsedMin) ? -Infinity : parsedMin
+  let max = unsafeMax === null || Number.isNaN(parsedMax) ? Infinity : parsedMax
+
+  if (min > max) {
+    const temp = min
+    min = max
+    max = temp
+  }
+
+  return [min, max] as const
+}
+
+inNumberRange.autoRemove = (val: any) =>
+  testFalsey(val) || (testFalsey(val[0]) && testFalsey(val[1]))
+
+// Export
+
+export const filterFns = {
+  includesString,
+  includesStringSensitive,
+  equalsString,
+  arrIncludes,
+  arrIncludesAll,
+  arrIncludesSome,
+  equals,
+  weakEquals,
+  inNumberRange,
+}
+
+export type BuiltInFilterFn = keyof typeof filterFns
+
+// Utils
+
+function testFalsey(val: any) {
+  return val === undefined || val === null || val === ''
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+export * from './core/instance'
+export * from './types'
+export * from './createTable'
+export * from './core/column'
+export * from './core/headers'
+export * from './core/row'
+export * from './features/ColumnSizing'
+export * from './features/Expanding'
+export * from './features/Filters'
+export * from './features/Grouping'
+export * from './features/Ordering'
+export * from './features/Pagination'
+export * from './features/Pinning'
+export * from './features/RowSelection'
+export * from './features/Sorting'
+export * from './features/Visibility'
+export * from './filterFns'
+export * from './sortingFns'
+export * from './aggregationFns'
+export * from './utils'
+export * from './utils/getCoreRowModel'
+export * from './utils/getFilteredRowModel'
+export * from './utils/getFacetedRowModel'
+export * from './utils/getFacetedUniqueValues'
+export * from './utils/getFacetedMinMaxValues'
+export * from './utils/getSortedRowModel'
+export * from './utils/getGroupedRowModel'
+export * from './utils/getExpandedRowModel'
+export * from './utils/getPaginationRowModel'

package/src/{sortTypes.ts → sortingFns.ts}

@@ -1,40 +1,69 @@
-import { PartialGenerics, Row } from './types'
+import { SortingFn } from './features/Sorting'
 
 export const reSplitAlphaNumeric = /([0-9]+)/gm
 
-export const sortTypes = {
-  alphanumeric,
-  alphanumericCaseSensitive,
-  text,
-  textCaseSensitive,
-  datetime,
-  basic,
+const alphanumeric: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareAlphanumeric(
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
+  )
 }
 
-export type BuiltInSortType = keyof typeof sortTypes
-
-function alphanumeric<TGenerics extends PartialGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
+const alphanumericCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
   return compareAlphanumeric(
-    toString(rowA.values[columnId]).toLowerCase(),
-    toString(rowB.values[columnId]).toLowerCase()
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
   )
 }
 
-function alphanumericCaseSensitive<TGenerics extends PartialGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareAlphanumeric(
-    toString(rowA.values[columnId]),
-    toString(rowB.values[columnId])
+// The text filter is more basic (less numeric support)
+// but is much faster
+const text: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
+  )
+}
+
+// The text filter is more basic (less numeric support)
+// but is much faster
+const textCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
+  )
+}
+
+const datetime: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(
+    (rowA.getValue(columnId) as Date).getTime(),
+    (rowB.getValue(columnId) as Date).getTime()
   )
 }
 
+const basic: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(rowA.getValue(columnId), rowB.getValue(columnId))
+}
+
+// Utils
+
+function compareBasic(a: any, b: any) {
+  return a === b ? 0 : a > b ? 1 : -1
+}
+
+function toString(a: any) {
+  if (typeof a === 'number') {
+    if (isNaN(a) || a === Infinity || a === -Infinity) {
+      return ''
+    }
+    return String(a)
+  }
+  if (typeof a === 'string') {
+    return a
+  }
+  return ''
+}
+
 // Mixed sorting is slow, but very inclusive of many edge cases.
 // It handles numbers, mixed alphanumeric combinations, and even
 // null, undefined, and Infinity
@@ -82,66 +111,15 @@ function compareAlphanumeric(aStr: string, bStr: string) {
   return a.length - b.length
 }
 
-// The text filter is more basic (less numeric support)
-// but is much faster
-function text<TGenerics extends PartialGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(
-    toString(rowA.values[columnId]).toLowerCase(),
-    toString(rowB.values[columnId]).toLowerCase()
-  )
-}
-
-// The text filter is more basic (less numeric support)
-// but is much faster
-function textCaseSensitive<TGenerics extends PartialGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(
-    toString(rowA.values[columnId]),
-    toString(rowB.values[columnId])
-  )
-}
-
-function datetime<TGenerics extends PartialGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(
-    (rowA.values[columnId] as Date).getTime(),
-    (rowB.values[columnId] as Date).getTime()
-  )
-}
-
-function basic<TGenerics extends PartialGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(rowA.values[columnId], rowB.values[columnId])
-}
-
-// Utils
+// Exports
 
-function compareBasic(a: any, b: any) {
-  return a === b ? 0 : a > b ? 1 : -1
+export const sortingFns = {
+  alphanumeric,
+  alphanumericCaseSensitive,
+  text,
+  textCaseSensitive,
+  datetime,
+  basic,
 }
 
-function toString(a: any) {
-  if (typeof a === 'number') {
-    if (isNaN(a) || a === Infinity || a === -Infinity) {
-      return ''
-    }
-    return String(a)
-  }
-  if (typeof a === 'string') {
-    return a
-  }
-  return ''
-}
+export type BuiltInSortingFn = keyof typeof sortingFns