@tanstack/table-core 8.0.0-alpha.64 → 8.0.0-alpha.68

package/src/features/Grouping.ts

@@ -45,11 +45,10 @@ export type GroupingColumnDef<TGenerics extends TableGenerics> = {
       row: Row<TGenerics>
       column: Column<TGenerics>
       cell: Cell<TGenerics>
-      value: TGenerics['Value']
+      getValue: () => TGenerics['Value']
     }
   >
   enableGrouping?: boolean
-  defaultCanGroup?: boolean
 }
 
 export type GroupingColumn<TGenerics extends TableGenerics> = {
@@ -59,12 +58,15 @@ export type GroupingColumn<TGenerics extends TableGenerics> = {
   getGroupedIndex: () => number
   toggleGrouping: () => void
   getToggleGroupingHandler: () => () => void
+  getColumnAutoAggregationFn: () => AggregationFn<TGenerics> | undefined
+  getColumnAggregationFn: () => AggregationFn<TGenerics> | undefined
 }
 
 export type GroupingRow = {
   groupingColumnId?: string
   groupingValue?: any
   getIsGrouped: () => boolean
+  groupingValuesCache: Record<string, any>
 }
 
 export type GroupingCell<TGenerics extends TableGenerics> = {
@@ -96,20 +98,8 @@ export type GroupingOptions<TGenerics extends TableGenerics> = {
 export type GroupingColumnMode = false | 'reorder' | 'remove'
 
 export type GroupingInstance<TGenerics extends TableGenerics> = {
-  getColumnAutoAggregationFn: (
-    columnId: string
-  ) => AggregationFn<TGenerics> | undefined
-  getColumnAggregationFn: (
-    columnId: string
-  ) => AggregationFn<TGenerics> | undefined
   setGrouping: (updater: Updater<GroupingState>) => void
   resetGrouping: () => void
-  toggleColumnGrouping: (columnId: string) => void
-  getColumnCanGroup: (columnId: string) => boolean
-  getColumnIsGrouped: (columnId: string) => boolean
-  getColumnGroupedIndex: (columnId: string) => number
-  getToggleGroupingHandler: (columnId: string) => undefined | (() => void)
-  getRowIsGrouped: (rowId: string) => boolean
   getPreGroupedRowModel: () => RowModel<TGenerics>
   getGroupedRowModel: () => RowModel<TGenerics>
   _getGroupedRowModel?: () => RowModel<TGenerics>
@@ -147,24 +137,45 @@ export const Grouping: TableFeature = {
     instance: TableInstance<TGenerics>
   ): GroupingColumn<TGenerics> => {
     return {
-      aggregationFn: column.aggregationFn,
-      getCanGroup: () => instance.getColumnCanGroup(column.id),
-      getGroupedIndex: () => instance.getColumnGroupedIndex(column.id),
-      getIsGrouped: () => instance.getColumnIsGrouped(column.id),
-      toggleGrouping: () => instance.toggleColumnGrouping(column.id),
-      getToggleGroupingHandler: () =>
-        instance.getToggleGroupingHandler(column.id)!,
-    }
-  },
+      toggleGrouping: () => {
+        instance.setGrouping(old => {
+          // Find any existing grouping for this column
+          if (old?.includes(column.id)) {
+            return old.filter(d => d !== column.id)
+          }
 
-  createInstance: <TGenerics extends TableGenerics>(
-    instance: TableInstance<TGenerics>
-  ): GroupingInstance<TGenerics> => {
-    return {
-      getColumnAutoAggregationFn: columnId => {
+          return [...(old ?? []), column.id]
+        })
+      },
+
+      getCanGroup: () => {
+        return (
+          column.enableGrouping ??
+          true ??
+          instance.options.enableGrouping ??
+          true ??
+          !!column.accessorFn
+        )
+      },
+
+      getIsGrouped: () => {
+        return instance.getState().grouping?.includes(column.id)
+      },
+
+      getGroupedIndex: () => instance.getState().grouping?.indexOf(column.id),
+
+      getToggleGroupingHandler: () => {
+        const canGroup = column.getCanGroup()
+
+        return () => {
+          if (!canGroup) return
+          column.toggleGrouping()
+        }
+      },
+      getColumnAutoAggregationFn: () => {
         const firstRow = instance.getCoreRowModel().flatRows[0]
 
-        const value = firstRow?.values[columnId]
+        const value = firstRow?.getValue(column.id)
 
         if (typeof value === 'number') {
           return aggregationFns.sum
@@ -176,8 +187,7 @@ export const Grouping: TableFeature = {
 
         return aggregationFns.count
       },
-      getColumnAggregationFn: columnId => {
-        const column = instance.getColumn(columnId)
+      getColumnAggregationFn: () => {
         const userAggregationFns = instance.options.aggregationFns
 
         if (!column) {
@@ -187,7 +197,7 @@ export const Grouping: TableFeature = {
         return isFunction(column.aggregationFn)
           ? column.aggregationFn
           : column.aggregationFn === 'auto'
-          ? instance.getColumnAutoAggregationFn(columnId)
+          ? column.getColumnAutoAggregationFn()
           : (userAggregationFns as Record<string, any>)?.[
               column.aggregationFn as string
             ] ??
@@ -195,58 +205,19 @@ export const Grouping: TableFeature = {
               column.aggregationFn as BuiltInAggregationFn
             ] as AggregationFn<TGenerics>)
       },
+    }
+  },
 
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): GroupingInstance<TGenerics> => {
+    return {
       setGrouping: updater => instance.options.onGroupingChange?.(updater),
 
-      toggleColumnGrouping: columnId => {
-        instance.setGrouping(old => {
-          // Find any existing grouping for this column
-          if (old?.includes(columnId)) {
-            return old.filter(d => d !== columnId)
-          }
-
-          return [...(old ?? []), columnId]
-        })
-      },
-
-      getColumnCanGroup: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        return (
-          column.enableGrouping ??
-          instance.options.enableGrouping ??
-          column.defaultCanGroup ??
-          !!column.accessorFn
-        )
-      },
-
-      getColumnIsGrouped: columnId => {
-        return instance.getState().grouping?.includes(columnId)
-      },
-
-      getColumnGroupedIndex: columnId =>
-        instance.getState().grouping?.indexOf(columnId),
-
       resetGrouping: () => {
         instance.setGrouping(instance.initialState?.grouping ?? [])
       },
 
-      getToggleGroupingHandler: columnId => {
-        const column = instance.getColumn(columnId)
-        const canGroup = column.getCanGroup()
-
-        return () => {
-          if (!canGroup) return
-          column.toggleGrouping?.()
-        }
-      },
-
-      getRowIsGrouped: rowId => !!instance.getRow(rowId)?.groupingColumnId,
-
       getPreGroupedRowModel: () => instance.getSortedRowModel(),
       getGroupedRowModel: () => {
         if (
@@ -271,7 +242,8 @@ export const Grouping: TableFeature = {
     instance: TableInstance<TGenerics>
   ): GroupingRow => {
     return {
-      getIsGrouped: () => instance.getRowIsGrouped(row.id),
+      getIsGrouped: () => !!row.groupingColumnId,
+      groupingValuesCache: {},
     }
   },
 
@@ -298,7 +270,7 @@ export const Grouping: TableFeature = {
               column,
               row,
               cell,
-              value: cell.value,
+              getValue: cell.getValue,
             })
           : null
       },

package/src/features/Headers.ts

@@ -72,30 +72,6 @@ export const Headers = {
           colSpan: 0,
           rowSpan: 0,
           headerGroup: null!,
-          getSize: () => {
-            let sum = 0
-
-            const recurse = (header: CoreHeader<TGenerics>) => {
-              if (header.subHeaders.length) {
-                header.subHeaders.forEach(recurse)
-              } else {
-                sum += header.column.getSize() ?? 0
-              }
-            }
-
-            recurse(header)
-
-            return sum
-          },
-          getStart: () => {
-            if (header.index > 0) {
-              const prevSiblingHeader =
-                header.headerGroup.headers[header.index - 1]
-              return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
-            }
-
-            return 0
-          },
           getLeafHeaders: (): Header<TGenerics>[] => {
             const leafHeaders: CoreHeader<TGenerics>[] = []
 
@@ -163,7 +139,7 @@ export const Headers = {
           return headerGroups
         },
         {
-          key: 'getHeaderGroups',
+          key: process.env.NODE_ENV === 'development' && 'getHeaderGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -183,7 +159,8 @@ export const Headers = {
           return buildHeaderGroups(allColumns, leafColumns, instance, 'center')
         },
         {
-          key: 'getCenterHeaderGroups',
+          key:
+            process.env.NODE_ENV === 'development' && 'getCenterHeaderGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -200,7 +177,7 @@ export const Headers = {
           return buildHeaderGroups(allColumns, leafColumns, instance, 'left')
         },
         {
-          key: 'getLeftHeaderGroups',
+          key: process.env.NODE_ENV === 'development' && 'getLeftHeaderGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -217,7 +194,7 @@ export const Headers = {
           return buildHeaderGroups(allColumns, leafColumns, instance, 'right')
         },
         {
-          key: 'getRightHeaderGroups',
+          key: process.env.NODE_ENV === 'development' && 'getRightHeaderGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -231,7 +208,7 @@ export const Headers = {
           return [...headerGroups].reverse()
         },
         {
-          key: 'getFooterGroups',
+          key: process.env.NODE_ENV === 'development' && 'getFooterGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -243,7 +220,7 @@ export const Headers = {
           return [...headerGroups].reverse()
         },
         {
-          key: 'getLeftFooterGroups',
+          key: process.env.NODE_ENV === 'development' && 'getLeftFooterGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -255,7 +232,8 @@ export const Headers = {
           return [...headerGroups].reverse()
         },
         {
-          key: 'getCenterFooterGroups',
+          key:
+            process.env.NODE_ENV === 'development' && 'getCenterFooterGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -267,7 +245,7 @@ export const Headers = {
           return [...headerGroups].reverse()
         },
         {
-          key: 'getRightFooterGroups',
+          key: process.env.NODE_ENV === 'development' && 'getRightFooterGroups',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -285,7 +263,7 @@ export const Headers = {
             .flat()
         },
         {
-          key: 'getFlatHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getFlatHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -301,7 +279,7 @@ export const Headers = {
             .flat()
         },
         {
-          key: 'getLeftFlatHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getLeftFlatHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -317,7 +295,7 @@ export const Headers = {
             .flat()
         },
         {
-          key: 'getCenterFlatHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getCenterFlatHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -333,7 +311,7 @@ export const Headers = {
             .flat()
         },
         {
-          key: 'getRightFlatHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getRightFlatHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -347,7 +325,7 @@ export const Headers = {
           return flatHeaders.filter(header => !header.subHeaders?.length)
         },
         {
-          key: 'getCenterLeafHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getCenterLeafHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -359,7 +337,7 @@ export const Headers = {
           return flatHeaders.filter(header => !header.subHeaders?.length)
         },
         {
-          key: 'getLeftLeafHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getLeftLeafHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -371,7 +349,7 @@ export const Headers = {
           return flatHeaders.filter(header => !header.subHeaders?.length)
         },
         {
-          key: 'getRightLeafHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getRightLeafHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
@@ -395,7 +373,7 @@ export const Headers = {
             .flat()
         },
         {
-          key: 'getLeafHeaders',
+          key: process.env.NODE_ENV === 'development' && 'getLeafHeaders',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugHeaders,
         }

package/src/features/Ordering.ts

@@ -100,7 +100,7 @@ export const Ordering: TableFeature = {
           return orderColumns(orderedColumns, grouping, groupedColumnMode)
         },
         {
-          key: 'getOrderColumnsFn',
+          key: process.env.NODE_ENV === 'development' && 'getOrderColumnsFn',
           // debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),

package/src/features/Pagination.ts

@@ -184,7 +184,7 @@ export const Pagination: TableFeature = {
           return pageOptions
         },
         {
-          key: 'getPageOptions',
+          key: process.env.NODE_ENV === 'development' && 'getPageOptions',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),

package/src/features/Pinning.ts

@@ -50,10 +50,6 @@ export type ColumnPinningRow<TGenerics extends TableGenerics> = {
 export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
   resetColumnPinning: () => void
-  pinColumn: (columnId: string, position: ColumnPinningPosition) => void
-  getColumnCanPin: (columnId: string) => boolean
-  getColumnIsPinned: (columnId: string) => ColumnPinningPosition
-  getColumnPinnedIndex: (columnId: string) => number
   getIsSomeColumnsPinned: () => boolean
   getLeftLeafColumns: () => Column<TGenerics>[]
   getRightLeafColumns: () => Column<TGenerics>[]
@@ -86,10 +82,69 @@ export const Pinning: TableFeature = {
     instance: TableInstance<TGenerics>
   ): ColumnPinningColumn => {
     return {
-      getCanPin: () => instance.getColumnCanPin(column.id),
-      getPinnedIndex: () => instance.getColumnPinnedIndex(column.id),
-      getIsPinned: () => instance.getColumnIsPinned(column.id),
-      pin: position => instance.pinColumn(column.id, position),
+      pin: position => {
+        const columnIds = column
+          .getLeafColumns()
+          .map(d => d.id)
+          .filter(Boolean) as string[]
+
+        instance.setColumnPinning(old => {
+          if (position === 'right') {
+            return {
+              left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+              right: [
+                ...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
+                ...columnIds,
+              ],
+            }
+          }
+
+          if (position === 'left') {
+            return {
+              left: [
+                ...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
+                ...columnIds,
+              ],
+              right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+            }
+          }
+
+          return {
+            left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+            right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+          }
+        })
+      },
+
+      getCanPin: () => {
+        const leafColumns = column.getLeafColumns()
+
+        return leafColumns.some(
+          d =>
+            (d.enablePinning ?? true) &&
+            (instance.options.enablePinning ?? true)
+        )
+      },
+
+      getIsPinned: () => {
+        const leafColumnIds = column.getLeafColumns().map(d => d.id)
+
+        const { left, right } = instance.getState().columnPinning
+
+        const isLeft = leafColumnIds.some(d => left?.includes(d))
+        const isRight = leafColumnIds.some(d => right?.includes(d))
+
+        return isLeft ? 'left' : isRight ? 'right' : false
+      },
+
+      getPinnedIndex: () => {
+        const position = column.getIsPinned()
+
+        return position
+          ? instance.getState().columnPinning?.[position]?.indexOf(column.id) ??
+              -1
+          : 0
+      },
     }
   },
 
@@ -110,7 +165,9 @@ export const Pinning: TableFeature = {
           return allCells.filter(d => !leftAndRight.includes(d.columnId))
         },
         {
-          key: 'row.getCenterVisibleCells',
+          key:
+            process.env.NODE_ENV === 'production' &&
+            'row.getCenterVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -129,7 +186,8 @@ export const Pinning: TableFeature = {
           return cells
         },
         {
-          key: 'row.getLeftVisibleCells',
+          key:
+            process.env.NODE_ENV === 'production' && 'row.getLeftVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -147,7 +205,8 @@ export const Pinning: TableFeature = {
           return cells
         },
         {
-          key: 'row.getRightVisibleCells',
+          key:
+            process.env.NODE_ENV === 'production' && 'row.getRightVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -164,84 +223,6 @@ export const Pinning: TableFeature = {
       resetColumnPinning: () =>
         instance.setColumnPinning(instance.initialState?.columnPinning ?? {}),
 
-      pinColumn: (columnId, position) => {
-        const column = instance.getColumn(columnId)
-
-        const columnIds = column
-          ?.getLeafColumns()
-          .map(d => d.id)
-          .filter(Boolean) as string[]
-
-        instance.setColumnPinning(old => {
-          if (position === 'right') {
-            return {
-              left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
-              right: [
-                ...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
-                ...columnIds,
-              ],
-            }
-          }
-
-          if (position === 'left') {
-            return {
-              left: [
-                ...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
-                ...columnIds,
-              ],
-              right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
-            }
-          }
-
-          return {
-            left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
-            right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
-          }
-        })
-      },
-
-      getColumnCanPin: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        const leafColumns = column.getLeafColumns()
-
-        return leafColumns.some(
-          d =>
-            (d.enablePinning ?? true) &&
-            (instance.options.enablePinning ?? true)
-        )
-      },
-
-      getColumnIsPinned: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        const leafColumnIds = column.getLeafColumns().map(d => d.id)
-
-        const { left, right } = instance.getState().columnPinning
-
-        const isLeft = leafColumnIds.some(d => left?.includes(d))
-        const isRight = leafColumnIds.some(d => right?.includes(d))
-
-        return isLeft ? 'left' : isRight ? 'right' : false
-      },
-
-      getColumnPinnedIndex: columnId => {
-        const position = instance.getColumnIsPinned(columnId)
-
-        return position
-          ? instance.getState().columnPinning?.[position]?.indexOf(columnId) ??
-              -1
-          : 0
-      },
-
       getIsSomeColumnsPinned: () => {
         const { left, right } = instance.getState().columnPinning
 
@@ -259,7 +240,7 @@ export const Pinning: TableFeature = {
             .filter(Boolean)
         },
         {
-          key: 'getLeftLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -276,7 +257,7 @@ export const Pinning: TableFeature = {
             .filter(Boolean)
         },
         {
-          key: 'getRightLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -294,7 +275,7 @@ export const Pinning: TableFeature = {
           return allColumns.filter(d => !leftAndRight.includes(d.id))
         },
         {
-          key: 'getCenterLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }