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

package/src/features/Visibility.ts

@@ -32,10 +32,7 @@ export type VisibilityInstance<TGenerics extends TableGenerics> = {
   getRightVisibleLeafColumns: () => Column<TGenerics>[]
   getCenterVisibleLeafColumns: () => Column<TGenerics>[]
   setColumnVisibility: (updater: Updater<VisibilityState>) => void
-  toggleColumnVisibility: (columnId: string, value?: boolean) => void
   toggleAllColumnsVisible: (value?: boolean) => void
-  getColumnIsVisible: (columId: string) => boolean
-  getColumnCanHide: (columnId: string) => boolean
   getIsAllColumnsVisible: () => boolean
   getIsSomeColumnsVisible: () => boolean
   getToggleAllColumnsVisibilityHandler: () =>
@@ -45,7 +42,6 @@ export type VisibilityInstance<TGenerics extends TableGenerics> = {
 
 export type VisibilityColumnDef = {
   enableHiding?: boolean
-  defaultCanHide?: boolean
   defaultIsVisible?: boolean
 }
 
@@ -90,10 +86,24 @@ export const Visibility: TableFeature = {
     instance: TableInstance<TGenerics>
   ): VisibilityColumn => {
     return {
-      getCanHide: () => instance.getColumnCanHide(column.id),
-      getIsVisible: () => instance.getColumnIsVisible(column.id),
-      toggleVisibility: value =>
-        instance.toggleColumnVisibility(column.id, value),
+      toggleVisibility: value => {
+        if (column.getCanHide()) {
+          instance.setColumnVisibility(old => ({
+            ...old,
+            [column.id]: value ?? !column.getIsVisible(),
+          }))
+        }
+      },
+      getIsVisible: () => {
+        return instance.getState().columnVisibility?.[column.id] ?? true
+      },
+
+      getCanHide: () => {
+        return (
+          (column.enableHiding ?? true) &&
+          (instance.options.enableHiding ?? true)
+        )
+      },
       getToggleVisibilityHandler: () => {
         return (e: unknown) => {
           column.toggleVisibility?.(
@@ -134,7 +144,7 @@ export const Visibility: TableFeature = {
         ],
         (left, center, right) => [...left, ...center, ...right],
         {
-          key: process.env.NODE_ENV === 'production' && 'row.getVisibleCells',
+          key: process.env.NODE_ENV === 'development' && 'row.getVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -192,17 +202,6 @@ export const Visibility: TableFeature = {
       setColumnVisibility: updater =>
         instance.options.onColumnVisibilityChange?.(updater),
 
-      toggleColumnVisibility: (columnId, value) => {
-        if (!columnId) return
-
-        if (instance.getColumnCanHide(columnId)) {
-          instance.setColumnVisibility(old => ({
-            ...old,
-            [columnId]: value ?? !instance.getColumnIsVisible(columnId),
-          }))
-        }
-      },
-
       toggleAllColumnsVisible: value => {
         value = value ?? !instance.getIsAllColumnsVisible()
 
@@ -217,35 +216,6 @@ export const Visibility: TableFeature = {
         )
       },
 
-      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?.()),
 

package/src/types.ts

@@ -228,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/getCoreRowModelAsync.ts

@@ -88,7 +88,7 @@ export function getCoreRowModelAsync<TGenerics extends TableGenerics>(opts?: {
         accessRows(data)
       },
       {
-        key: process.env.NODE_ENV === 'production' && '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: process.env.NODE_ENV === 'production' && '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: process.env.NODE_ENV === 'production' && '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

@@ -1,5 +1,7 @@
+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
@@ -9,24 +11,130 @@ export function getFilteredRowModelAsync<
   return instance =>
     incrementalMemo(
       () => [
-        instance.getState().columnFilters,
         instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
       ],
-      (_sorting, rowModel): RowModel<TGenerics> => {
+      (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('')
+      (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:

package/src/utils/getFilteredRowModelSync.ts

@@ -1,14 +1,12 @@
-import { ColumnFilter, FilterFn } from '../features/Filters'
+import {
+  ColumnFilter,
+  FilterFn,
+  ResolvedColumnFilter,
+} 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> {
@@ -20,125 +18,118 @@ export function getFilteredRowModelSync<TGenerics extends TableGenerics>(): (
         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}`
-                )
-              }
+        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)!
+          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
+          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,
+          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,
             })
           })
+        }
 
-          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]
 
-          // 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 = {}
 
-            row.columnFilterMap = {}
+          if (resolvedColumnFilters.length) {
+            for (let i = 0; i < resolvedColumnFilters.length; i++) {
+              const columnFilter = resolvedColumnFilters[i]
 
-            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
+              )
+            }
+          }
 
-                // Tag the row with the column filter state
-                row.columnFilterMap[columnFilter.id] = columnFilter.filterFn(
+          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,
-                  columnFilter.id,
-                  columnFilter.resolvedFilterValue
+                  globalFilter.id,
+                  globalFilter.resolvedValue
                 )
+              ) {
+                row.columnFilterMap.__global__ = true
+                break
               }
             }
 
-            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
-              }
+            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
+        // Filter final rows using all of the active filters
+        return filterRows(rowModel.rows, filterableIds, instance)
       },
       {
-        key: process.env.NODE_ENV === 'production' && 'getFilteredRowModelSync',
+        key:
+          process.env.NODE_ENV === 'development' && 'getFilteredRowModelSync',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {

package/src/utils/getGroupedRowModel.ts

@@ -161,7 +161,7 @@ export function getGroupedRowModelSync<TGenerics extends TableGenerics>(): (
         }
       },
       {
-        key: process.env.NODE_ENV === 'production' && '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: process.env.NODE_ENV === 'production' && 'getPaginationRowModel',
+        key: process.env.NODE_ENV === 'development' && '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: process.env.NODE_ENV === 'production' && 'getSortedRowModel',
+        key: process.env.NODE_ENV === 'development' && 'getSortedRowModel',
         initialSync: opts?.initialSync,
         onProgress: progress => {
           instance.setState(old => ({ ...old, sortingProgress: progress }))

package/src/utils/getSortedRowModelSync.ts

@@ -19,7 +19,7 @@ export function getSortedRowModelSync<TGenerics extends TableGenerics>(): (
 
         // Filter out sortings that correspond to non existing columns
         const availableSorting = sortingState.filter(sort =>
-          instance.getColumnCanSort(sort.id)
+          instance.getColumn(sort.id).getCanSort()
         )
 
         const columnInfoById: Record<
@@ -32,12 +32,12 @@ export function getSortedRowModelSync<TGenerics extends TableGenerics>(): (
         > = {}
 
         availableSorting.forEach(sortEntry => {
-          const column = instance.getColumn(sortEntry.id)!
+          const column = instance.getColumn(sortEntry.id)
 
           columnInfoById[sortEntry.id] = {
             sortUndefined: column.sortUndefined,
             invertSorting: column.invertSorting,
-            sortingFn: instance.getColumnSortingFn(sortEntry.id)!,
+            sortingFn: column.getSortingFn(),
           }
         })
 
@@ -106,7 +106,7 @@ export function getSortedRowModelSync<TGenerics extends TableGenerics>(): (
         }
       },
       {
-        key: process.env.NODE_ENV === 'production' && 'getSortedRowModel',
+        key: process.env.NODE_ENV === 'development' && 'getSortedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {