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

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
@@ -226,8 +228,6 @@ export type CoreHeader<TGenerics extends TableGenerics> = {
   index: number
   depth: number
   column: Column<TGenerics>
-  getStart: () => number
-  getSize: () => number
   headerGroup: HeaderGroup<TGenerics>
   subHeaders: Header<TGenerics>[]
   colSpan?: number

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 === 'development' && '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 === 'development' && '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 === 'development' && 'getExpandedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
       }
     )
@@ -42,7 +42,7 @@ export function expandRows<TGenerics extends TableGenerics>(
     if (
       instance.options.expandSubRows &&
       row.subRows?.length &&
-      instance.getIsRowExpanded(row.id)
+      row.getIsExpanded()
     ) {
       row.subRows.forEach(handleRow)
     }

package/src/utils/getFilteredRowModelAsync.ts

@@ -0,0 +1,157 @@
+import { ResolvedColumnFilter } from '../features/Filters'
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { incrementalMemo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+export function getFilteredRowModelAsync<
+  TGenerics extends TableGenerics
+>(opts?: {
+  initialSync?: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    incrementalMemo(
+      () => [
+        instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
+      ],
+      (rowModel): RowModel<TGenerics> => {
+        return {
+          rows: rowModel.rows.slice(),
+          flatRows: [],
+          rowsById: rowModel.rowsById,
+        }
+      },
+      (rowModel, columnFilters, globalFilter) => rowModelRef => scheduleTask => {
+        if (
+          !rowModel.rows.length ||
+          (!columnFilters?.length && !globalFilter)
+        ) {
+          rowModelRef.current = rowModel
+          return
+        }
+
+        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 = column.getFilterFn()!
+
+          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,
+            resolvedValue: 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,
+              resolvedValue:
+                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.resolvedValue
+              )
+            }
+          }
+
+          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.resolvedValue
+                )
+              ) {
+                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)
+      },
+      {
+        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,141 @@
+import {
+  ColumnFilter,
+  FilterFn,
+  ResolvedColumnFilter,
+} from '../features/Filters'
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { memo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+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) => {
+        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 = column.getFilterFn()
+
+          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,
+            resolvedValue: 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,
+              resolvedValue:
+                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.resolvedValue
+              )
+            }
+          }
+
+          if (resolvedGlobalFilters.length) {
+            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.resolvedValue
+                )
+              ) {
+                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)
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' && '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 === 'development' && '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 === 'development' && 'getPaginationRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
       }
     )