@tanstack/table-core 8.0.0-alpha.62 → 8.0.0-alpha.65

package/src/filterFns.ts

@@ -1,179 +1,95 @@
-import { TableGenerics, Row } from './types'
-
-export const filterFns = {
-  includesString,
-  includesStringSensitive,
-  equalsString,
-  equalsStringSensitive,
-  arrIncludes,
-  arrIncludesAll,
-  arrIncludesSome,
-  equals,
-  weakEquals,
-  betweenNumberRange,
-}
-
-export type BuiltInFilterFn = keyof typeof filterFns
-
-function includesString<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
-  filterValue: unknown
-) {
-  const search = String(filterValue).toLowerCase()
-
-  rows = rows.filter(row => {
-    return columnIds.some(id => {
-      return String(row.values[id]).toLowerCase().includes(search)
-    })
-  })
-  return rows
+import { FilterFn } from './features/Filters'
+
+const includesString: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: string
+) => {
+  const search = filterValue.toLowerCase()
+  return row.values[columnId].toLowerCase().includes(search)
 }
 
 includesString.autoRemove = (val: any) => testFalsey(val)
 
-function includesStringSensitive<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
-  filterValue: unknown
-) {
-  const search = String(filterValue)
-
-  rows = rows.filter(row => {
-    return columnIds.some(id => {
-      return String(row.values[id]).includes(search)
-    })
-  })
-  return rows
+const includesStringSensitive: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: string
+) => {
+  return row.values[columnId].includes(filterValue)
 }
 
 includesStringSensitive.autoRemove = (val: any) => testFalsey(val)
 
-function equalsString<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
-  filterValue: unknown
-) {
-  const search = String(filterValue).toLowerCase()
-
-  return rows.filter(row => {
-    return columnIds.some(id => {
-      const rowValue = row.values[id]
-      return rowValue !== undefined
-        ? String(rowValue).toLowerCase() === search
-        : true
-    })
-  })
+const equalsString: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: string
+) => {
+  return row.values[columnId].toLowerCase() === filterValue.toLowerCase()
 }
 
 equalsString.autoRemove = (val: any) => testFalsey(val)
 
-function equalsStringSensitive<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
+const arrIncludes: FilterFn<any> = (
+  row,
+  columnId: string,
   filterValue: unknown
-) {
-  const search = String(filterValue)
-  return rows.filter(row => {
-    return columnIds.some(id => {
-      const rowValue = row.values[id]
-      return rowValue !== undefined ? String(rowValue) === search : true
-    })
-  })
-}
-
-equalsStringSensitive.autoRemove = (val: any) => testFalsey(val)
-
-function arrIncludes<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.includes(filterValue)
-    })
-  })
+) => {
+  return row.values[columnId].includes(filterValue)
 }
 
 arrIncludes.autoRemove = (val: any) => testFalsey(val) || !val?.length
 
-function arrIncludesAll<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
+const arrIncludesAll: FilterFn<any> = (
+  row,
+  columnId: string,
   filterValue: unknown[]
-) {
-  return rows.filter(row => {
-    return columnIds.some(id => {
-      const rowValue = row.values[id]
-      return (
-        rowValue &&
-        rowValue.length &&
-        filterValue.every(val => rowValue.includes(val))
-      )
-    })
-  })
+) => {
+  return !filterValue.some(val => !row.values[columnId].includes(val))
 }
 
 arrIncludesAll.autoRemove = (val: any) => testFalsey(val) || !val?.length
 
-function arrIncludesSome<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
+const arrIncludesSome: FilterFn<any> = (
+  row,
+  columnId: 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))
-      )
-    })
-  })
+) => {
+  return filterValue.some(val => row.values[columnId].includes(val))
 }
 
 arrIncludesSome.autoRemove = (val: any) => testFalsey(val) || !val?.length
 
-function equals<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 === filterValue
-    })
-  })
+const equals: FilterFn<any> = (row, columnId: string, filterValue: unknown) => {
+  return row.values[columnId] === filterValue
 }
 
 equals.autoRemove = (val: any) => testFalsey(val)
 
-function weakEquals<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
+const weakEquals: FilterFn<any> = (
+  row,
+  columnId: string,
   filterValue: unknown
-) {
-  return rows.filter(row => {
-    return columnIds.some(id => {
-      const rowValue = row.values[id]
-      // eslint-disable-next-line eqeqeq
-      return rowValue == filterValue
-    })
-  })
+) => {
+  return row.values[columnId] == filterValue
 }
 
 weakEquals.autoRemove = (val: any) => testFalsey(val)
 
-function betweenNumberRange<TGenerics extends TableGenerics>(
-  rows: Row<TGenerics>[],
-  columnIds: string[],
-  filterValue: [unknown, unknown]
-) {
-  let [unsafeMin, unsafeMax] = filterValue || []
+const inNumberRange: FilterFn<any> = (
+  row,
+  columnId: string,
+  filterValue: [number, number]
+) => {
+  let [min, max] = filterValue
+
+  const rowValue = row.values[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
@@ -190,17 +106,28 @@ function betweenNumberRange<TGenerics extends TableGenerics>(
     max = temp
   }
 
-  return rows.filter(row => {
-    return columnIds.some(id => {
-      const rowValue = row.values[id]
-      return rowValue >= min && rowValue <= max
-    })
-  })
+  return [min, max] as const
 }
 
-betweenNumberRange.autoRemove = (val: any) =>
+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) {

package/src/index.ts

@@ -17,8 +17,7 @@ export * from './features/Expanding'
 export * from './utils'
 export * from './utils/getCoreRowModelSync'
 export * from './utils/getCoreRowModelAsync'
-export * from './utils/getColumnFilteredRowModelSync'
-export * from './utils/getGlobalFilteredRowModelSync'
+export * from './utils/getFilteredRowModelSync'
 export * from './utils/getSortedRowModelSync'
 export * from './utils/getGroupedRowModel'
 export * from './utils/getExpandedRowModel'

package/src/types.ts

@@ -28,6 +28,7 @@ import {
   FiltersColumnDef,
   FiltersInstance,
   FiltersOptions,
+  FiltersRow,
   FiltersTableState,
 } from './features/Filters'
 import {
@@ -167,6 +168,7 @@ export type Row<TGenerics extends TableGenerics> = CoreRow<TGenerics> &
   CellsRow<TGenerics> &
   VisibilityRow<TGenerics> &
   ColumnPinningRow<TGenerics> &
+  FiltersRow<TGenerics> &
   GroupingRow &
   RowSelectionRow &
   ExpandedRow

package/src/utils/filterRowsUtils.ts

@@ -1,5 +1,29 @@
 import { TableGenerics, Row, RowModel, TableInstance } from '../types'
 
+export function filterRows<TGenerics extends TableGenerics>(
+  rows: Row<TGenerics>[],
+  columnIds: string[],
+  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)
+  }
+
+  return filterRowModelFromRoot(rows, filterRowImpl, instance)
+}
+
 export function filterRowModelFromLeafs<TGenerics extends TableGenerics>(
   rowsToFilter: Row<TGenerics>[],
   filterRows: (

package/src/utils/getCoreRowModelAsync.ts

@@ -88,7 +88,7 @@ export function getCoreRowModelAsync<TGenerics extends TableGenerics>(opts?: {
         accessRows(data)
       },
       {
-        key: 'getRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getRowModel',
         initialSync: opts?.initialSync,
         onProgress: progress => {
           instance.setState(old => ({ ...old, coreProgress: progress }))

package/src/utils/getCoreRowModelSync.ts

@@ -94,7 +94,7 @@ export function getCoreRowModelSync<TGenerics extends TableGenerics>(): (
         return { rows, flatRows, rowsById }
       },
       {
-        key: 'getRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {

package/src/utils/getExpandedRowModel.ts

@@ -24,7 +24,7 @@ export function getExpandedRowModel<TGenerics extends TableGenerics>(): (
         return expandRows(rowModel, instance)
       },
       {
-        key: 'getExpandedRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getExpandedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
       }
     )

package/src/utils/getFilteredRowModelAsync.ts

@@ -0,0 +1,49 @@
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { incrementalMemo } from '../utils'
+
+export function getFilteredRowModelAsync<
+  TGenerics extends TableGenerics
+>(opts?: {
+  initialSync?: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    incrementalMemo(
+      () => [
+        instance.getState().columnFilters,
+        instance.getPreFilteredRowModel(),
+      ],
+      (_sorting, rowModel): RowModel<TGenerics> => {
+        return {
+          rows: rowModel.rows.slice(),
+          flatRows: [],
+          rowsById: rowModel.rowsById,
+        }
+      },
+      (columnFilters, rowModel) => rowModelRef => scheduleTask => {
+        // TODO: Figure out how to do scheduled filtering
+        // The trick will be batching those tasks in a way
+        // that makes them fast. JS work loops don't tend to do well with
+        // a high number of tasks that do one thing. Instead, shoot for each
+        // task to have a few thousand opts (or whatever amount is generally
+        // fast for most devices).
+        throw new Error('')
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'production' && 'getFilteredRowModelAsync',
+        initialSync: opts?.initialSync,
+        onProgress: progress => {
+          instance.setState(old => ({
+            ...old,
+            columnFiltersProgress: progress,
+          }))
+        },
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._autoResetPageIndex()
+          })
+        },
+      }
+    )
+}

package/src/utils/getFilteredRowModelSync.ts

@@ -0,0 +1,150 @@
+import { ColumnFilter, FilterFn } from '../features/Filters'
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { memo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+type ResolvedColumnFilter<TGenerics extends TableGenerics> = {
+  id: string
+  filterFn: FilterFn<TGenerics>
+  resolvedFilterValue: unknown
+}
+
+export function getFilteredRowModelSync<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [
+        instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
+      ],
+      (rowModel, columnFilters, globalFilter) => {
+        const columnFilteredRowModel: RowModel<TGenerics> = (() => {
+          if (
+            !rowModel.rows.length ||
+            (!columnFilters?.length && !globalFilter)
+          ) {
+            return rowModel
+          }
+
+          const resolvedColumnFilters: ResolvedColumnFilter<TGenerics>[] = []
+          const resolvedGlobalFilters: ResolvedColumnFilter<TGenerics>[] = []
+
+          ;(columnFilters ?? []).forEach(d => {
+            const column = instance.getColumn(d.id)
+
+            if (!column) {
+              if (process.env.NODE_ENV !== 'production') {
+                console.warn(
+                  `Table: Could not find a column to filter with columnId: ${d.id}`
+                )
+              }
+            }
+
+            const filterFn = instance.getColumnFilterFn(column.id)!
+
+            if (!filterFn) {
+              if (process.env.NODE_ENV !== 'production') {
+                console.warn(
+                  `Could not find a valid 'column.filterFn' for column with the ID: ${column.id}.`
+                )
+              }
+              return
+            }
+
+            resolvedColumnFilters.push({
+              id: d.id,
+              filterFn,
+              resolvedFilterValue:
+                filterFn.resolveFilterValue?.(d.value) ?? d.value,
+            })
+          })
+
+          const filterableIds = columnFilters.map(d => d.id)
+
+          const globalFilterFn = instance.getGlobalFilterFn()
+
+          const globallyFilterableColumns = instance
+            .getAllLeafColumns()
+            .filter(column => column.getCanGlobalFilter())
+
+          if (
+            globalFilter &&
+            globalFilterFn &&
+            globallyFilterableColumns.length
+          ) {
+            filterableIds.push('__global__')
+
+            globallyFilterableColumns.forEach(column => {
+              resolvedGlobalFilters.push({
+                id: column.id,
+                filterFn: globalFilterFn,
+                resolvedFilterValue:
+                  globalFilterFn.resolveFilterValue?.(globalFilter) ??
+                  globalFilter,
+              })
+            })
+          }
+
+          // Flag the prefiltered row model with each filter state
+          for (let j = 0; j < rowModel.flatRows.length; j++) {
+            const row = rowModel.flatRows[j]
+
+            row.columnFilterMap = {}
+
+            if (resolvedColumnFilters.length) {
+              for (let i = 0; i < resolvedColumnFilters.length; i++) {
+                const columnFilter = resolvedColumnFilters[i]
+
+                // Tag the row with the column filter state
+                row.columnFilterMap[columnFilter.id] = columnFilter.filterFn(
+                  row,
+                  columnFilter.id,
+                  columnFilter.resolvedFilterValue
+                )
+              }
+            }
+
+            if (resolvedGlobalFilters.length) {
+              let hit = false
+
+              for (let i = 0; i < resolvedGlobalFilters.length; i++) {
+                const globalFilter = resolvedGlobalFilters[i]
+                // Tag the row with the first truthy global filter state
+                if (
+                  globalFilter.filterFn(
+                    row,
+                    globalFilter.id,
+                    globalFilter.resolvedFilterValue
+                  )
+                ) {
+                  hit = true
+                  row.columnFilterMap.__global__ = true
+                  break
+                }
+              }
+
+              if (row.columnFilterMap.__global__ !== true) {
+                row.columnFilterMap.__global__ = false
+              }
+            }
+          }
+
+          // Filter final rows using all of the active filters
+          return filterRows(rowModel.rows, filterableIds, instance)
+        })()
+
+        return columnFilteredRowModel
+      },
+      {
+        key: process.env.NODE_ENV === 'production' && 'getFilteredRowModelSync',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._autoResetPageIndex()
+          })
+        },
+      }
+    )
+}

package/src/utils/getGroupedRowModel.ts

@@ -161,7 +161,7 @@ export function getGroupedRowModelSync<TGenerics extends TableGenerics>(): (
         }
       },
       {
-        key: 'getGroupedRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getGroupedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {

package/src/utils/getPaginationRowModel.ts

@@ -41,7 +41,7 @@ export function getPaginationRowModel<TGenerics extends TableGenerics>(opts?: {
         }
       },
       {
-        key: 'getPaginationRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getPaginationRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
       }
     )

package/src/utils/getSortedRowModelAsync.ts

@@ -75,7 +75,7 @@ export function getSortedRowModelSync<TGenerics extends TableGenerics>(opts?: {
         // sortData(rowModelRef.current.rows)
       },
       {
-        key: 'getSortedRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getSortedRowModel',
         initialSync: opts?.initialSync,
         onProgress: progress => {
           instance.setState(old => ({ ...old, sortingProgress: progress }))

package/src/utils/getSortedRowModelSync.ts

@@ -106,7 +106,7 @@ export function getSortedRowModelSync<TGenerics extends TableGenerics>(): (
         }
       },
       {
-        key: 'getSortedRowModel',
+        key: process.env.NODE_ENV === 'production' && 'getSortedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {

package/src/utils.ts

@@ -92,7 +92,7 @@ export function memo<TDeps extends readonly any[], TResult>(
   getDeps: () => [...TDeps],
   fn: (...args: NoInfer<[...TDeps]>) => TResult,
   opts: {
-    key: string
+    key: any
     debug?: () => any
     onChange?: (result: TResult, previousResult?: TResult) => void
   }
@@ -161,7 +161,6 @@ export function memo<TDeps extends readonly any[], TResult>(
                   }),
                   {}
                 ),
-              parent,
             }
           )
         }
@@ -185,7 +184,7 @@ export function incrementalMemo<TDeps extends readonly any[], TResult>(
     current: TResult
   }) => (scheduler: (workFn: WorkFn) => void) => void,
   opts: {
-    key: string
+    key: any
     onProgress: (
       progress: number,
       nextResult: TResult,
@@ -286,7 +285,6 @@ export function incrementalMemo<TDeps extends readonly any[], TResult>(
                   }),
                   {}
                 ),
-              parent,
             }
           )
         }