@tanstack/table-core 8.0.0-alpha.67 → 8.0.0-alpha.70

package/src/features/RowSelection.ts

@@ -53,7 +53,7 @@ export type RowSelectionInstance<TGenerics extends TableGenerics> = {
   getToggleAllRowsSelectedHandler: () => (event: unknown) => void
   getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void
   setRowSelection: (updater: Updater<RowSelectionState>) => void
-  resetRowSelection: () => void
+  resetRowSelection: (defaultState?: boolean) => void
   getIsAllRowsSelected: () => boolean
   getIsAllPageRowsSelected: () => boolean
   getIsSomeRowsSelected: () => boolean
@@ -96,8 +96,10 @@ export const RowSelection: TableFeature = {
     return {
       setRowSelection: updater =>
         instance.options.onRowSelectionChange?.(updater),
-      resetRowSelection: () =>
-        instance.setRowSelection(instance.initialState.rowSelection ?? {}),
+      resetRowSelection: defaultState =>
+        instance.setRowSelection(
+          defaultState ? {} : instance.initialState.rowSelection ?? {}
+        ),
       toggleAllRowsSelected: value => {
         instance.setRowSelection(old => {
           value =

package/src/features/Rows.ts

@@ -12,7 +12,8 @@ export type CoreRow<TGenerics extends TableGenerics> = {
   index: number
   original?: TGenerics['Row']
   depth: number
-  values: RowValues
+  valuesCache: Record<string, any>
+  getValue: (columnId: string) => any
   subRows: Row<TGenerics>[]
   getLeafRows: () => Row<TGenerics>[]
   originalSubRows?: TGenerics['Row'][]
@@ -44,7 +45,7 @@ export type RowsInstance<TGenerics extends TableGenerics> = {
     original: TGenerics['Row'] | undefined,
     rowIndex: number,
     depth: number,
-    values: Record<string, any>
+    subRows?: Row<TGenerics>[]
   ) => Row<TGenerics>
   getCoreRowModel: () => RowModel<TGenerics>
   _getCoreRowModel?: () => RowModel<TGenerics>
@@ -73,20 +74,34 @@ export const Rows = {
       ) =>
         instance.options.getRowId?.(row, index, parent) ??
         `${parent ? [parent.id, index].join('.') : index}`,
-      createRow: (id, original, rowIndex, depth, values) => {
+      createRow: (id, original, rowIndex, depth, subRows) => {
         let row: CoreRow<TGenerics> = {
           id,
           index: rowIndex,
           original,
           depth,
-          values,
-          subRows: [],
+          valuesCache: {},
+          getValue: columnId => {
+            if (row.valuesCache.hasOwnProperty(columnId)) {
+              return row.valuesCache[columnId]
+            }
+            const column = instance.getColumn(columnId)
+            if (!column.accessorFn) {
+              throw new Error()
+            }
+            row.valuesCache[columnId] = column.accessorFn(
+              row.original,
+              rowIndex
+            )
+            return row.valuesCache[columnId]
+          },
+          subRows: 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))
+          Object.assign(row, feature?.createRow?.(row, instance))
         }
 
         return row as Row<TGenerics>

package/src/features/Sorting.ts

@@ -62,7 +62,7 @@ export type SortingColumn<TGenerics extends TableGenerics> = {
   getCanMultiSort: () => boolean
   getSortIndex: () => number
   getIsSorted: () => false | SortDirection
-  resetSorting: () => void
+  clearSorting: () => void
   toggleSorting: (desc?: boolean, isMulti?: boolean) => void
   getToggleSortingHandler: () => undefined | ((event: unknown) => void)
 }
@@ -85,6 +85,7 @@ export type SortingOptions<TGenerics extends TableGenerics> = {
 
 export type SortingInstance<TGenerics extends TableGenerics> = {
   setSorting: (updater: Updater<SortingState>) => void
+  resetSorting: (defaultState?: boolean) => void
   getPreSortedRowModel: () => RowModel<TGenerics>
   getSortedRowModel: () => RowModel<TGenerics>
   _getSortedRowModel?: () => RowModel<TGenerics>
@@ -130,7 +131,7 @@ export const Sorting: TableFeature = {
         let isString = false
 
         for (const row of firstRows) {
-          const value = row?.values[column.id]
+          const value = row?.getValue(column.id)
 
           if (Object.prototype.toString.call(value) === '[object Date]') {
             return sortingFns.datetime
@@ -154,7 +155,7 @@ export const Sorting: TableFeature = {
       getAutoSortDir: () => {
         const firstRow = instance.getFilteredRowModel().flatRows[0]
 
-        const value = firstRow?.values[column.id]
+        const value = firstRow?.getValue(column.id)
 
         if (typeof value === 'string') {
           return 'asc'
@@ -304,14 +305,11 @@ export const Sorting: TableFeature = {
       getSortIndex: () =>
         instance.getState().sorting?.findIndex(d => d.id === column.id) ?? -1,
 
-      resetSorting: (columnId?: string) => {
-        if (columnId) {
-          instance.setSorting(old =>
-            old?.length ? old.filter(d => d.id !== columnId) : []
-          )
-        } else {
-          instance.setSorting(instance.initialState?.sorting ?? [])
-        }
+      clearSorting: () => {
+        //clear sorting for just 1 column
+        instance.setSorting(old =>
+          old?.length ? old.filter(d => d.id !== column.id) : []
+        )
       },
 
       getToggleSortingHandler: () => {
@@ -338,7 +336,11 @@ export const Sorting: TableFeature = {
 
     return {
       setSorting: updater => instance.options.onSortingChange?.(updater),
-
+      resetSorting: defaultState => {
+        instance.setSorting(
+          defaultState ? [] : instance.initialState?.sorting ?? []
+        )
+      },
       getPreSortedRowModel: () => instance.getFilteredRowModel(),
       getSortedRowModel: () => {
         if (

package/src/features/Visibility.ts

@@ -32,6 +32,7 @@ export type VisibilityInstance<TGenerics extends TableGenerics> = {
   getRightVisibleLeafColumns: () => Column<TGenerics>[]
   getCenterVisibleLeafColumns: () => Column<TGenerics>[]
   setColumnVisibility: (updater: Updater<VisibilityState>) => void
+  resetColumnVisibility: (defaultState?: boolean) => void
   toggleAllColumnsVisible: (value?: boolean) => void
   getIsAllColumnsVisible: () => boolean
   getIsSomeColumnsVisible: () => boolean
@@ -202,6 +203,12 @@ export const Visibility: TableFeature = {
       setColumnVisibility: updater =>
         instance.options.onColumnVisibilityChange?.(updater),
 
+      resetColumnVisibility: defaultState => {
+        instance.setColumnVisibility(
+          defaultState ? {} : instance.initialState.columnVisibility ?? {}
+        )
+      },
+
       toggleAllColumnsVisible: value => {
         value = value ?? !instance.getIsAllColumnsVisible()
 

package/src/filterFns.ts

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

package/src/index.ts

@@ -15,10 +15,18 @@ export * from './features/Sorting'
 export * from './features/Visibility'
 export * from './features/Expanding'
 export * from './utils'
-export * from './utils/getCoreRowModelSync'
-export * from './utils/getCoreRowModelAsync'
-export * from './utils/getFilteredRowModelSync'
-export * from './utils/getSortedRowModelSync'
+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'
+// Experimental Async
+// export * from './utils/getCoreRowModelAsync'
+// export * from './utils/getFilteredRowModelAsync'
+// export * from './utils/getFacetedRowModelAsync'
+// export * from './utils/getFacetedUniqueValuesAsync'
+// export * from './utils/getFacetedMinMaxValuesAsync'

package/src/sortingFns.ts

@@ -19,8 +19,8 @@ function alphanumeric<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareAlphanumeric(
-    toString(rowA.values[columnId]).toLowerCase(),
-    toString(rowB.values[columnId]).toLowerCase()
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
   )
 }
 
@@ -30,8 +30,8 @@ function alphanumericCaseSensitive<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareAlphanumeric(
-    toString(rowA.values[columnId]),
-    toString(rowB.values[columnId])
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
   )
 }
 
@@ -90,8 +90,8 @@ function text<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareBasic(
-    toString(rowA.values[columnId]).toLowerCase(),
-    toString(rowB.values[columnId]).toLowerCase()
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
   )
 }
 
@@ -103,8 +103,8 @@ function textCaseSensitive<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareBasic(
-    toString(rowA.values[columnId]),
-    toString(rowB.values[columnId])
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
   )
 }
 
@@ -114,8 +114,8 @@ function datetime<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareBasic(
-    (rowA.values[columnId] as Date).getTime(),
-    (rowB.values[columnId] as Date).getTime()
+    (rowA.getValue(columnId) as Date).getTime(),
+    (rowB.getValue(columnId) as Date).getTime()
   )
 }
 
@@ -124,7 +124,7 @@ function basic<TGenerics extends TableGenerics>(
   rowB: Row<TGenerics>,
   columnId: string
 ) {
-  return compareBasic(rowA.values[columnId], rowB.values[columnId])
+  return compareBasic(rowA.getValue(columnId), rowB.getValue(columnId))
 }
 
 // Utils

package/src/types.ts

@@ -1,4 +1,4 @@
-import { CoreOptions, CoreTableState, TableCore } from './core'
+import { CoreOptions, CoreTableState, CoreInstance } from './core'
 import { ColumnsOptions, CoreColumn, CoreColumnDef } from './features/Columns'
 import {
   VisibilityInstance,
@@ -107,7 +107,7 @@ export type TableFeature = {
 }
 
 export type TableInstance<TGenerics extends TableGenerics> =
-  TableCore<TGenerics> &
+  CoreInstance<TGenerics> &
     ColumnsInstance<TGenerics> &
     RowsInstance<TGenerics> &
     CellsInstance<TGenerics> &
@@ -214,7 +214,7 @@ export type CoreCell<TGenerics extends TableGenerics> = {
   id: string
   rowId: string
   columnId: string
-  value: TGenerics['Value']
+  getValue: () => TGenerics['Value']
   row: Row<TGenerics>
   column: Column<TGenerics>
   renderCell: () => string | null | TGenerics['Rendered']
@@ -249,17 +249,4 @@ export type HeaderGroup<TGenerics extends TableGenerics> = {
   headers: Header<TGenerics>[]
 }
 
-export type HeaderRenderProps<THeader> = {
-  header: THeader
-}
-
-export type FooterRenderProps<THeader> = {
-  header: THeader
-}
-
-export type CellRenderProps<TCell, TRow> = {
-  cell: TCell
-  row: TRow
-}
-
 export type NoInfer<A extends any> = [A][A extends any ? 0 : never]

package/src/utils/filterRowsUtils.ts

@@ -2,21 +2,9 @@ import { TableGenerics, Row, RowModel, TableInstance } from '../types'
 
 export function filterRows<TGenerics extends TableGenerics>(
   rows: Row<TGenerics>[],
-  columnIds: string[],
+  filterRowImpl: (row: Row<TGenerics>) => any,
   instance: TableInstance<TGenerics>
 ) {
-  const filterRowImpl = (rowsToFilter: Row<TGenerics>[]) => {
-    // Horizontally filter rows through each column
-    return rowsToFilter.filter(row => {
-      for (let i = 0; i < columnIds.length; i++) {
-        if (row.columnFilterMap[columnIds[i]] === false) {
-          return false
-        }
-      }
-      return true
-    })
-  }
-
   if (instance.options.filterFromLeafRows) {
     return filterRowModelFromLeafs(rows, filterRowImpl, instance)
   }
@@ -26,51 +14,40 @@ export function filterRows<TGenerics extends TableGenerics>(
 
 export function filterRowModelFromLeafs<TGenerics extends TableGenerics>(
   rowsToFilter: Row<TGenerics>[],
-  filterRows: (
-    rowsToFilter: Row<TGenerics>[],
-    depth: number
-  ) => Row<TGenerics>[],
+  filterRow: (row: Row<TGenerics>) => Row<TGenerics>[],
   instance: TableInstance<TGenerics>
 ): RowModel<TGenerics> {
   const newFilteredFlatRows: Row<TGenerics>[] = []
   const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
 
+  let row
+  let newRow
+
   const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
-    rowsToFilter = rowsToFilter.slice()
+    const rows: Row<TGenerics>[] = []
 
     // Filter from children up first
     for (let i = 0; i < rowsToFilter.length; i++) {
-      const row = rowsToFilter[i]
-
-      if (!row.subRows?.length) {
-        continue
+      row = rowsToFilter[i]!
+
+      if (row.subRows?.length) {
+        newRow = instance.createRow(row.id, row.original, row.index, row.depth)
+        newRow.columnFilterMap = row.columnFilterMap
+        newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+        if (!newRow.subRows.length) {
+          continue
+        }
+        row = newRow
       }
 
-      rowsToFilter[i] = instance.createRow(
-        row.id,
-        row.original,
-        row.index,
-        row.depth,
-        row.values
-      )
-
-      rowsToFilter[i].subRows = recurseFilterRows(row.subRows, depth + 1)
-
-      if (!rowsToFilter[i].subRows.length) {
-        rowsToFilter.splice(i, 1)
-        i--
+      if (filterRow(row)) {
+        rows.push(row)
+        newFilteredRowsById[row.id] = row
+        newFilteredRowsById[i] = row
       }
     }
 
-    rowsToFilter = filterRows(rowsToFilter, depth)
-
-    // Apply the filter to any subRows
-    rowsToFilter.forEach(row => {
-      newFilteredFlatRows.push(row)
-      newFilteredRowsById[row.id] = row
-    })
-
-    return rowsToFilter
+    return rows
   }
 
   return {
@@ -82,45 +59,47 @@ export function filterRowModelFromLeafs<TGenerics extends TableGenerics>(
 
 export function filterRowModelFromRoot<TGenerics extends TableGenerics>(
   rowsToFilter: Row<TGenerics>[],
-  filterRows: (
-    rowsToFilter: Row<TGenerics>[],
-    depth: number
-  ) => Row<TGenerics>[],
+  filterRow: (row: Row<TGenerics>) => any,
   instance: TableInstance<TGenerics>
 ): RowModel<TGenerics> {
   const newFilteredFlatRows: Row<TGenerics>[] = []
   const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
 
+  let rows
+  let row
+  let newRow
+
   // Filters top level and nested rows
   const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
     // Filter from parents downward first
-    rowsToFilter = filterRows(rowsToFilter, depth)
+
+    rows = []
 
     // Apply the filter to any subRows
     for (let i = 0; i < rowsToFilter.length; i++) {
-      const row = rowsToFilter[i]
-
-      newFilteredFlatRows.push(row)
-      newFilteredRowsById[row.id] = row
+      row = rowsToFilter[i]!
+
+      const pass = filterRow(row)
+
+      if (pass) {
+        if (row.subRows?.length) {
+          newRow = instance.createRow(
+            row.id,
+            row.original,
+            row.index,
+            row.depth
+          )
+          newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+          row = newRow
+        }
 
-      if (!row.subRows?.length) {
-        rowsToFilter.splice(i, 1)
-        i--
-        continue
+        rows.push(row)
+        newFilteredFlatRows.push(row)
+        newFilteredRowsById[row.id] = row
       }
-
-      rowsToFilter[i] = instance.createRow(
-        row.id,
-        row.original,
-        row.index,
-        row.depth,
-        row.values
-      )
-
-      rowsToFilter[i].subRows = recurseFilterRows(row.subRows, depth + 1)
     }
 
-    return rowsToFilter
+    return rows
   }
 
   return {

package/src/utils/{getCoreRowModelSync.ts → getCoreRowModel.ts}

@@ -1,7 +1,7 @@
 import { TableInstance, Row, RowModel, TableGenerics } from '../types'
 import { memo } from '../utils'
 
-export function getCoreRowModelSync<TGenerics extends TableGenerics>(): (
+export function getCoreRowModel<TGenerics extends TableGenerics>(): (
   instance: TableInstance<TGenerics>
 ) => () => RowModel<TGenerics> {
   return instance =>
@@ -46,13 +46,7 @@ export function getCoreRowModelSync<TGenerics extends TableGenerics>(): (
           }
 
           // Make the row
-          const row = instance.createRow(
-            id,
-            originalRow,
-            rowIndex,
-            depth,
-            values
-          )
+          const row = instance.createRow(id, originalRow, rowIndex, depth)
 
           // Push instance row into the parentRows array
           parentRows.push(row)

package/src/utils/getFacetedMinMaxValues.ts

@@ -0,0 +1,37 @@
+import { TableInstance, TableGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getFacetedMinMaxValues<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => [number, number] {
+  return (instance, columnId) =>
+    memo(
+      () => [instance.getColumn(columnId).getFacetedRowModel()],
+      facetedRowModel => {
+        let facetedMinMaxValues: [any, any] = [
+          facetedRowModel.flatRows[0]?.getValue(columnId) ?? null,
+          facetedRowModel.flatRows[0]?.getValue(columnId) ?? null,
+        ]
+
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+          const value = facetedRowModel.flatRows[i]?.getValue(columnId)
+
+          if (value < facetedMinMaxValues[0]) {
+            facetedMinMaxValues[0] = value
+          } else if (value > facetedMinMaxValues[1]) {
+            facetedMinMaxValues[1] = value
+          }
+        }
+
+        return facetedMinMaxValues
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedMinMaxValues_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}

package/src/utils/getFacetedRowModel.ts

@@ -0,0 +1,50 @@
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { memo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+export function getFacetedRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => RowModel<TGenerics> {
+  return (instance, columnId) =>
+    memo(
+      () => [
+        instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
+        instance.getFilteredRowModel(),
+      ],
+      (preRowModel, columnFilters, globalFilter) => {
+        if (
+          !preRowModel.rows.length ||
+          (!columnFilters?.length && !globalFilter)
+        ) {
+          return preRowModel
+        }
+
+        const filterableIds = [
+          ...columnFilters.map(d => d.id).filter(d => d !== columnId),
+          globalFilter ? '__global__' : undefined,
+        ].filter(Boolean) as string[]
+
+        const filterRowsImpl = (row: Row<TGenerics>) => {
+          // Horizontally filter rows through each column
+          for (let i = 0; i < filterableIds.length; i++) {
+            if (row.columnFilterMap[filterableIds[i]!] === false) {
+              return false
+            }
+          }
+          return true
+        }
+
+        return filterRows(preRowModel.rows, filterRowsImpl, instance)
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedRowModel_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}