@tanstack/table-core 8.1.4 → 8.2.2

package/src/features/Filters.ts

@@ -9,14 +9,9 @@ import {
   Row,
   Updater,
   RowData,
+  FilterMeta,
 } from '../types'
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-} from '../utils'
+import { functionalUpdate, isFunction, makeStateUpdater } from '../utils'
 
 export type FiltersTableState = {
   columnFilters: ColumnFiltersState
@@ -41,7 +36,7 @@ export type FilterFn<TData extends RowData> = {
     row: Row<TData>,
     columnId: string,
     filterValue: any,
-    addMeta: (meta: any) => void
+    addMeta: (meta: FilterMeta) => void
   ): boolean
 
   resolveFilterValue?: TransformFilterValueFn<TData>
@@ -50,12 +45,12 @@ export type FilterFn<TData extends RowData> = {
 
 export type TransformFilterValueFn<TData extends RowData> = (
   value: any,
-  column?: Column<TData>
+  column?: Column<TData, unknown>
 ) => unknown
 
 export type ColumnFilterAutoRemoveTestFn<TData extends RowData> = (
   value: any,
-  column?: Column<TData>
+  column?: Column<TData, unknown>
 ) => boolean
 
 export type CustomFilterFns<TData extends RowData> = Record<
@@ -93,7 +88,7 @@ export type FiltersColumn<TData extends RowData> = {
 
 export type FiltersRow<TData extends RowData> = {
   columnFilters: Record<string, boolean>
-  columnFiltersMeta: Record<string, any>
+  columnFiltersMeta: Record<string, FilterMeta>
 }
 
 export type FiltersOptions<TData extends RowData> = {
@@ -110,7 +105,7 @@ export type FiltersOptions<TData extends RowData> = {
   globalFilterFn?: FilterFnOption<TData>
   onGlobalFilterChange?: OnChangeFn<any>
   enableGlobalFilter?: boolean
-  getColumnCanGlobalFilter?: (column: Column<TData>) => boolean
+  getColumnCanGlobalFilter?: (column: Column<TData, unknown>) => boolean
 
   // Faceting
   getFacetedRowModel?: (
@@ -189,7 +184,7 @@ export const Filters: TableFeature = {
   },
 
   createColumn: <TData extends RowData>(
-    column: Column<TData>,
+    column: Column<TData, unknown>,
     table: Table<TData>
   ): FiltersColumn<TData> => {
     return {
@@ -451,7 +446,7 @@ export const Filters: TableFeature = {
 export function shouldAutoRemoveFilter<TData extends RowData>(
   filterFn?: FilterFn<TData>,
   value?: any,
-  column?: Column<TData>
+  column?: Column<TData, unknown>
 ) {
   return (
     (filterFn && filterFn.autoRemove

package/src/features/Grouping.ts

@@ -33,9 +33,11 @@ export type AggregationFnOption<TData extends RowData> =
   | BuiltInAggregationFn
   | AggregationFn<TData>
 
-export type GroupingColumnDef<TData extends RowData> = {
+export type GroupingColumnDef<TData extends RowData, TValue> = {
   aggregationFn?: AggregationFnOption<TData>
-  aggregatedCell?: ColumnDefTemplate<ReturnType<Cell<TData>['getContext']>>
+  aggregatedCell?: ColumnDefTemplate<
+    ReturnType<Cell<TData, TValue>['getContext']>
+  >
   enableGrouping?: boolean
 }
 
@@ -51,7 +53,7 @@ export type GroupingColumn<TData extends RowData> = {
 
 export type GroupingRow = {
   groupingColumnId?: string
-  groupingValue?: any
+  groupingValue?: unknown
   getIsGrouped: () => boolean
   _groupingValuesCache: Record<string, any>
 }
@@ -89,7 +91,10 @@ export type GroupingInstance<TData extends RowData> = {
 //
 
 export const Grouping: TableFeature = {
-  getDefaultColumnDef: <TData extends RowData>(): GroupingColumnDef<TData> => {
+  getDefaultColumnDef: <TData extends RowData>(): GroupingColumnDef<
+    TData,
+    unknown
+  > => {
     return {
       aggregatedCell: props => (props.getValue() as any)?.toString?.() ?? null,
       aggregationFn: 'auto',
@@ -112,8 +117,8 @@ export const Grouping: TableFeature = {
     }
   },
 
-  createColumn: <TData extends RowData>(
-    column: Column<TData>,
+  createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
     table: Table<TData>
   ): GroupingColumn<TData> => {
     return {
@@ -215,9 +220,9 @@ export const Grouping: TableFeature = {
     }
   },
 
-  createCell: <TData extends RowData>(
-    cell: Cell<TData>,
-    column: Column<TData>,
+  createCell: <TData extends RowData, TValue>(
+    cell: Cell<TData, TValue>,
+    column: Column<TData, TValue>,
     row: Row<TData>,
     table: Table<TData>
   ): GroupingCell => {
@@ -237,7 +242,7 @@ export const Grouping: TableFeature = {
 }
 
 export function orderColumns<TData extends RowData>(
-  leafColumns: Column<TData>[],
+  leafColumns: Column<TData, unknown>[],
   grouping: string[],
   groupedColumnMode?: GroupingColumnMode
 ) {

package/src/features/Ordering.ts

@@ -29,7 +29,9 @@ export type ColumnOrderDefaultOptions = {
 export type ColumnOrderInstance<TData extends RowData> = {
   setColumnOrder: (updater: Updater<ColumnOrderState>) => void
   resetColumnOrder: (defaultState?: boolean) => void
-  _getOrderColumnsFn: () => (columns: Column<TData>[]) => Column<TData>[]
+  _getOrderColumnsFn: () => (
+    columns: Column<TData, unknown>[]
+  ) => Column<TData, unknown>[]
 }
 
 //
@@ -69,7 +71,7 @@ export const Ordering: TableFeature = {
         (columnOrder, grouping, groupedColumnMode) => columns => {
           // Sort grouped columns to the start of the column list
           // before the headers are built
-          let orderedColumns: Column<TData>[] = []
+          let orderedColumns: Column<TData, unknown>[] = []
 
           // If there is no order, return the normal columns
           if (!columnOrder?.length) {

package/src/features/Pinning.ts

@@ -43,18 +43,18 @@ export type ColumnPinningColumn = {
 }
 
 export type ColumnPinningRow<TData extends RowData> = {
-  getLeftVisibleCells: () => Cell<TData>[]
-  getCenterVisibleCells: () => Cell<TData>[]
-  getRightVisibleCells: () => Cell<TData>[]
+  getLeftVisibleCells: () => Cell<TData, unknown>[]
+  getCenterVisibleCells: () => Cell<TData, unknown>[]
+  getRightVisibleCells: () => Cell<TData, unknown>[]
 }
 
 export type ColumnPinningInstance<TData extends RowData> = {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
   resetColumnPinning: (defaultState?: boolean) => void
   getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean
-  getLeftLeafColumns: () => Column<TData>[]
-  getRightLeafColumns: () => Column<TData>[]
-  getCenterLeafColumns: () => Column<TData>[]
+  getLeftLeafColumns: () => Column<TData, unknown>[]
+  getRightLeafColumns: () => Column<TData, unknown>[]
+  getCenterLeafColumns: () => Column<TData, unknown>[]
 }
 
 //
@@ -80,8 +80,8 @@ export const Pinning: TableFeature = {
     }
   },
 
-  createColumn: <TData extends RowData>(
-    column: Column<TData>,
+  createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
     table: Table<TData>
   ): ColumnPinningColumn => {
     return {
@@ -185,7 +185,7 @@ export const Pinning: TableFeature = {
               columnId => allCells.find(cell => cell.column.id === columnId)!
             )
             .filter(Boolean)
-            .map(d => ({ ...d, position: 'left' } as Cell<TData>))
+            .map(d => ({ ...d, position: 'left' } as Cell<TData, unknown>))
 
           return cells
         },
@@ -203,7 +203,7 @@ export const Pinning: TableFeature = {
               columnId => allCells.find(cell => cell.column.id === columnId)!
             )
             .filter(Boolean)
-            .map(d => ({ ...d, position: 'left' } as Cell<TData>))
+            .map(d => ({ ...d, position: 'left' } as Cell<TData, unknown>))
 
           return cells
         },

package/src/features/Sorting.ts

@@ -58,6 +58,7 @@ export type SortingColumn<TData extends RowData> = {
   getAutoSortingFn: () => SortingFn<TData>
   getAutoSortDir: () => SortDirection
   getSortingFn: () => SortingFn<TData>
+  getFirstSortDir: () => SortDirection
   getNextSortingOrder: () => SortDirection | false
   getCanSort: () => boolean
   getCanMultiSort: () => boolean
@@ -116,8 +117,8 @@ export const Sorting: TableFeature = {
     }
   },
 
-  createColumn: <TData extends RowData>(
-    column: Column<TData>,
+  createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
     table: Table<TData>
   ): SortingColumn<TData> => {
     return {
@@ -184,19 +185,21 @@ export const Sorting: TableFeature = {
 
         // this needs to be outside of table.setSorting to be in sync with rerender
         const nextSortingOrder = column.getNextSortingOrder()
+        const hasManualValue = typeof desc !== 'undefined' && desc !== null
 
         table.setSorting(old => {
           // Find any existing sorting for this column
           const existingSorting = old?.find(d => d.id === column.id)
           const existingIndex = old?.findIndex(d => d.id === column.id)
-          const hasDescDefined = typeof desc !== 'undefined' && desc !== null
 
           let newSorting: SortingState = []
 
           // What should we do with this sort action?
           let sortAction: 'add' | 'remove' | 'toggle' | 'replace'
+          let nextDesc = hasManualValue ? desc : nextSortingOrder === 'desc'
 
-          if (column.getCanMultiSort() && multi) {
+          // Multi-mode
+          if (old?.length && column.getCanMultiSort() && multi) {
             if (existingSorting) {
               sortAction = 'toggle'
             } else {
@@ -214,29 +217,22 @@ export const Sorting: TableFeature = {
           }
 
           // Handle toggle states that will remove the sorting
-          if (
-            sortAction === 'toggle' && // Must be toggling
-            (table.options.enableSortingRemoval ?? true) && // If enableSortRemove, enable in general
-            !hasDescDefined && // Must not be setting desc
-            (multi ? table.options.enableMultiRemove ?? true : true) && // If multi, don't allow if enableMultiRemove
-            !nextSortingOrder // Finally, detect if it should indeed be removed
-          ) {
-            sortAction = 'remove'
+          if (sortAction === 'toggle') {
+            // If we are "actually" toggling (not a manual set value), should we remove the sorting?
+            if (!hasManualValue) {
+              // Is our intention to remove?
+              if (!nextSortingOrder) {
+                sortAction = 'remove'
+              }
+            }
           }
 
-          if (sortAction === 'replace') {
-            newSorting = [
-              {
-                id: column.id,
-                desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
-              },
-            ]
-          } else if (sortAction === 'add' && old?.length) {
+          if (sortAction === 'add') {
             newSorting = [
               ...old,
               {
                 id: column.id,
-                desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
+                desc: nextDesc,
               },
             ]
             // Take latest n columns
@@ -245,41 +241,56 @@ export const Sorting: TableFeature = {
               newSorting.length -
                 (table.options.maxMultiSortColCount ?? Number.MAX_SAFE_INTEGER)
             )
-          } else if (sortAction === 'toggle' && old?.length) {
+          } else if (sortAction === 'toggle') {
             // This flips (or sets) the
             newSorting = old.map(d => {
               if (d.id === column.id) {
                 return {
                   ...d,
-                  desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
+                  desc: nextDesc,
                 }
               }
               return d
             })
-          } else if (sortAction === 'remove' && old?.length) {
+          } else if (sortAction === 'remove') {
             newSorting = old.filter(d => d.id !== column.id)
+          } else {
+            newSorting = [
+              {
+                id: column.id,
+                desc: nextDesc,
+              },
+            ]
           }
 
           return newSorting
         })
       },
 
-      getNextSortingOrder: () => {
+      getFirstSortDir: () => {
         const sortDescFirst =
           column.columnDef.sortDescFirst ??
           table.options.sortDescFirst ??
           column.getAutoSortDir() === 'desc'
-        const firstSortDirection = sortDescFirst ? 'desc' : 'asc'
+        return sortDescFirst ? 'desc' : 'asc'
+      },
 
+      getNextSortingOrder: (multi?: boolean) => {
+        const firstSortDirection = column.getFirstSortDir()
         const isSorted = column.getIsSorted()
+
         if (!isSorted) {
           return firstSortDirection
         }
-        if (isSorted === firstSortDirection) {
-          return isSorted === 'desc' ? 'asc' : 'desc'
-        } else {
+
+        if (
+          isSorted !== firstSortDirection &&
+          (table.options.enableSortingRemoval ?? true) && // If enableSortRemove, enable in general
+          (multi ? table.options.enableMultiRemove ?? true : true) // If multi, don't allow if enableMultiRemove))
+        ) {
           return false
         }
+        return isSorted === 'desc' ? 'asc' : 'desc'
       },
 
       getCanSort: () => {

package/src/features/Visibility.ts

@@ -27,11 +27,11 @@ export type VisibilityDefaultOptions = {
 }
 
 export type VisibilityInstance<TData extends RowData> = {
-  getVisibleFlatColumns: () => Column<TData>[]
-  getVisibleLeafColumns: () => Column<TData>[]
-  getLeftVisibleLeafColumns: () => Column<TData>[]
-  getRightVisibleLeafColumns: () => Column<TData>[]
-  getCenterVisibleLeafColumns: () => Column<TData>[]
+  getVisibleFlatColumns: () => Column<TData, unknown>[]
+  getVisibleLeafColumns: () => Column<TData, unknown>[]
+  getLeftVisibleLeafColumns: () => Column<TData, unknown>[]
+  getRightVisibleLeafColumns: () => Column<TData, unknown>[]
+  getCenterVisibleLeafColumns: () => Column<TData, unknown>[]
   setColumnVisibility: (updater: Updater<VisibilityState>) => void
   resetColumnVisibility: (defaultState?: boolean) => void
   toggleAllColumnsVisible: (value?: boolean) => void
@@ -45,8 +45,8 @@ export type VisibilityColumnDef = {
 }
 
 export type VisibilityRow<TData extends RowData> = {
-  _getAllVisibleCells: () => Cell<TData>[]
-  getVisibleCells: () => Cell<TData>[]
+  _getAllVisibleCells: () => Cell<TData, unknown>[]
+  getVisibleCells: () => Cell<TData, unknown>[]
 }
 
 export type VisibilityColumn = {
@@ -74,8 +74,8 @@ export const Visibility: TableFeature = {
     }
   },
 
-  createColumn: <TData extends RowData>(
-    column: Column<TData>,
+  createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
     table: Table<TData>
   ): VisibilityColumn => {
     return {
@@ -143,8 +143,8 @@ export const Visibility: TableFeature = {
   ): VisibilityInstance<TData> => {
     const makeVisibleColumnsMethod = (
       key: string,
-      getColumns: () => Column<TData>[]
-    ): (() => Column<TData>[]) => {
+      getColumns: () => Column<TData, unknown>[]
+    ): (() => Column<TData, unknown>[]) => {
       return memo(
         () => [
           getColumns(),

package/src/filterFns.ts

@@ -6,7 +6,7 @@ const includesString: FilterFn<any> = (
   filterValue: string
 ) => {
   const search = filterValue.toLowerCase()
-  return row.getValue(columnId)?.toLowerCase().includes(search)
+  return row.getValue<string>(columnId)?.toLowerCase().includes(search)
 }
 
 includesString.autoRemove = (val: any) => testFalsey(val)
@@ -16,7 +16,7 @@ const includesStringSensitive: FilterFn<any> = (
   columnId: string,
   filterValue: string
 ) => {
-  return row.getValue(columnId)?.includes(filterValue)
+  return row.getValue<string>(columnId)?.includes(filterValue)
 }
 
 includesStringSensitive.autoRemove = (val: any) => testFalsey(val)
@@ -26,7 +26,9 @@ const equalsString: FilterFn<any> = (
   columnId: string,
   filterValue: string
 ) => {
-  return row.getValue(columnId)?.toLowerCase() === filterValue.toLowerCase()
+  return (
+    row.getValue<string>(columnId)?.toLowerCase() === filterValue.toLowerCase()
+  )
 }
 
 equalsString.autoRemove = (val: any) => testFalsey(val)
@@ -36,7 +38,7 @@ const arrIncludes: FilterFn<any> = (
   columnId: string,
   filterValue: unknown
 ) => {
-  return row.getValue(columnId)?.includes(filterValue)
+  return row.getValue<unknown[]>(columnId)?.includes(filterValue)
 }
 
 arrIncludes.autoRemove = (val: any) => testFalsey(val) || !val?.length
@@ -46,7 +48,9 @@ const arrIncludesAll: FilterFn<any> = (
   columnId: string,
   filterValue: unknown[]
 ) => {
-  return !filterValue.some(val => !row.getValue(columnId)?.includes(val))
+  return !filterValue.some(
+    val => !row.getValue<unknown[]>(columnId)?.includes(val)
+  )
 }
 
 arrIncludesAll.autoRemove = (val: any) => testFalsey(val) || !val?.length
@@ -56,7 +60,9 @@ const arrIncludesSome: FilterFn<any> = (
   columnId: string,
   filterValue: unknown[]
 ) => {
-  return filterValue.some(val => row.getValue(columnId)?.includes(val))
+  return filterValue.some(val =>
+    row.getValue<unknown[]>(columnId)?.includes(val)
+  )
 }
 
 arrIncludesSome.autoRemove = (val: any) => testFalsey(val) || !val?.length
@@ -84,7 +90,7 @@ const inNumberRange: FilterFn<any> = (
 ) => {
   let [min, max] = filterValue
 
-  const rowValue = row.getValue(columnId)
+  const rowValue = row.getValue<number>(columnId)
   return rowValue >= min && rowValue <= max
 }
 

package/src/sortingFns.ts

@@ -35,10 +35,13 @@ const textCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
 }
 
 const datetime: SortingFn<any> = (rowA, rowB, columnId) => {
-  return compareBasic(
-    (rowA.getValue(columnId) as Date).getTime(),
-    (rowB.getValue(columnId) as Date).getTime()
-  )
+  const a = rowA.getValue<Date>(columnId)
+  const b = rowB.getValue<Date>(columnId)
+
+  // Can handle nullish values
+  // Use > and < because == (and ===) doesn't work with
+  // Date objects (would require calling getTime()).
+  return a > b ? 1 : a < b ? -1 : 0
 }
 
 const basic: SortingFn<any> = (rowA, rowB, columnId) => {

package/src/types.ts

@@ -77,10 +77,14 @@ import { CoreRow } from './core/row'
 import { PartialKeys } from './utils'
 import { CoreCell } from './core/cell'
 
+export interface TableMeta {}
+export interface ColumnMeta {}
+export interface FilterMeta {}
+
 export type Updater<T> = T | ((old: T) => T)
 export type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void
 
-export type RowData = object | any[]
+export type RowData = unknown | object | any[]
 
 export type TableGenerics = {
   Row?: any
@@ -155,34 +159,33 @@ export type Row<TData extends RowData> = CoreRow<TData> &
   RowSelectionRow &
   ExpandedRow
 
-export type RowValues = {
-  [key: string]: any
-}
-
 export type RowModel<TData extends RowData> = {
   rows: Row<TData>[]
   flatRows: Row<TData>[]
   rowsById: Record<string, Row<TData>>
 }
 
-export type AccessorFn<TData extends RowData> = (
+export type AccessorFn<TData extends RowData, TValue = unknown> = (
   originalRow: TData,
   index: number
-) => any
+) => TValue
 
 export type ColumnDefTemplate<TProps extends object> =
   | string
   | ((props: TProps) => any)
 
-export type ColumnDef<TData extends RowData> = CoreColumnDef<TData> &
+export type ColumnDef<
+  TData extends RowData,
+  TValue extends any = unknown
+> = CoreColumnDef<TData, TValue> &
   VisibilityColumnDef &
   ColumnPinningColumnDef &
   FiltersColumnDef<TData> &
   SortingColumnDef<TData> &
-  GroupingColumnDef<TData> &
+  GroupingColumnDef<TData, TValue> &
   ColumnSizingColumnDef
 
-export type Column<TData extends RowData> = CoreColumn<TData> &
+export type Column<TData extends RowData, TValue> = CoreColumn<TData, TValue> &
   ColumnVisibilityColumn &
   ColumnPinningColumn &
   FiltersColumn<TData> &
@@ -190,9 +193,10 @@ export type Column<TData extends RowData> = CoreColumn<TData> &
   GroupingColumn<TData> &
   ColumnSizingColumn
 
-export type Cell<TData extends RowData> = CoreCell<TData> & GroupingCell
+export type Cell<TData extends RowData, TValue> = CoreCell<TData, TValue> &
+  GroupingCell
 
-export type Header<TData extends RowData> = CoreHeader<TData> &
+export type Header<TData extends RowData, TValue> = CoreHeader<TData, TValue> &
   ColumnSizingHeader
 
 export type HeaderGroup<TData extends RowData> = CoreHeaderGroup<TData>

package/src/utils/getCoreRowModel.ts

@@ -40,7 +40,7 @@ export function getCoreRowModel<TData extends RowData>(): (
             const row = createRow(
               table,
               table._getRowId(originalRows[i]!, i, parent),
-              originalRows[i],
+              originalRows[i]!,
               i,
               depth
             )

package/src/utils/getFacetedMinMaxValues.ts

@@ -18,7 +18,7 @@ export function getFacetedMinMaxValues<TData extends RowData>(): (
         let facetedMinMaxValues: [any, any] = [firstValue, firstValue]
 
         for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
-          const value = facetedRowModel.flatRows[i]?.getValue(columnId)
+          const value = facetedRowModel.flatRows[i]!.getValue<number>(columnId)
 
           if (value < facetedMinMaxValues[0]) {
             facetedMinMaxValues[0] = value

package/src/utils/getGroupedRowModel.ts

@@ -55,7 +55,13 @@ export function getGroupedRowModel<TData extends RowData>(): (
                 ? flattenBy(groupedRows, row => row.subRows)
                 : groupedRows
 
-              const row = createRow(table, id, undefined, index, depth)
+              const row = createRow(
+                table,
+                id,
+                leafRows[0]!.original,
+                index,
+                depth
+              )
 
               Object.assign(row, {
                 groupingColumnId: columnId,