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

package/src/features/ColumnSizing.ts

@@ -44,19 +44,10 @@ export type ColumnSizingDefaultOptions = {
 }
 
 export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
-  getColumnSize: (columnId: string) => number
-  getColumnStart: (columnId: string, position?: ColumnPinningPosition) => number
   setColumnSizing: (updater: Updater<ColumnSizingState>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
-  resetColumnSizing: () => void
-  resetColumnSize: (columnId: string) => void
-  resetHeaderSize: (headerId: string) => void
-  resetHeaderSizeInfo: () => void
-  getColumnCanResize: (columnId: string) => boolean
-  getHeaderCanResize: (headerId: string) => boolean
-  getResizeHandler: (headerId: string) => (event: unknown) => void
-  getColumnIsResizing: (columnId: string) => boolean
-  getHeaderIsResizing: (headerId: string) => boolean
+  resetColumnSizing: (defaultState?: boolean) => void
+  resetHeaderSizeInfo: (defaultState?: boolean) => void
   getTotalSize: () => number
   getLeftTotalSize: () => number
   getCenterTotalSize: () => number
@@ -65,7 +56,6 @@ export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
 
 export type ColumnSizingColumnDef = {
   enableResizing?: boolean
-  defaultCanResize?: boolean
   size?: number
   minSize?: number
   maxSize?: number
@@ -80,10 +70,9 @@ export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
 }
 
 export type ColumnSizingHeader<TGenerics extends TableGenerics> = {
-  getCanResize: () => boolean
-  getIsResizing: () => boolean
+  getSize: () => number
+  getStart: (position?: ColumnPinningPosition) => number
   getResizeHandler: () => (event: unknown) => void
-  resetSize: () => void
 }
 
 //
@@ -94,6 +83,15 @@ export const defaultColumnSizing = {
   maxSize: Number.MAX_SAFE_INTEGER,
 }
 
+const getDefaultColumnSizingInfoState = (): ColumnSizingInfoState => ({
+  startOffset: null,
+  startSize: null,
+  deltaOffset: null,
+  deltaPercentage: null,
+  isResizingColumn: false,
+  columnSizingStart: [],
+})
+
 export const ColumnSizing: TableFeature = {
   getDefaultColumn: (): ColumnSizingColumnDef => {
     return defaultColumnSizing
@@ -101,14 +99,7 @@ export const ColumnSizing: TableFeature = {
   getInitialState: (state): ColumnSizingTableState => {
     return {
       columnSizing: {},
-      columnSizingInfo: {
-        startOffset: null,
-        startSize: null,
-        deltaOffset: null,
-        deltaPercentage: null,
-        isResizingColumn: false,
-        columnSizingStart: [],
-      },
+      columnSizingInfo: getDefaultColumnSizingInfoState(),
       ...state,
     }
   },
@@ -128,37 +119,7 @@ export const ColumnSizing: TableFeature = {
     instance: TableInstance<TGenerics>
   ): ColumnSizingColumn<TGenerics> => {
     return {
-      getSize: () => instance.getColumnSize(column.id),
-      getStart: position => instance.getColumnStart(column.id, position),
-      getIsResizing: () => instance.getColumnIsResizing(column.id),
-      getCanResize: () => instance.getColumnCanResize(column.id),
-      resetSize: () => instance.resetColumnSize(column.id),
-    }
-  },
-
-  createHeader: <TGenerics extends TableGenerics>(
-    header: Header<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingHeader<TGenerics> => {
-    return {
-      getIsResizing: () => instance.getColumnIsResizing(header.column.id),
-      getCanResize: () => instance.getColumnCanResize(header.column.id),
-      resetSize: () => instance.resetColumnSize(header.column.id),
-      getResizeHandler: () => instance.getResizeHandler(header.id),
-    }
-  },
-
-  createInstance: <TGenerics extends TableGenerics>(
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingInstance<TGenerics> => {
-    return {
-      getColumnSize: (columnId: string) => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
+      getSize: () => {
         const columnSize = instance.getState().columnSizing[column.id]
 
         return Math.min(
@@ -169,99 +130,74 @@ export const ColumnSizing: TableFeature = {
           column.maxSize ?? defaultColumnSizing.maxSize
         )
       },
-      getColumnStart: (columnId, position) => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
+      getStart: position => {
         const columns = !position
           ? instance.getVisibleLeafColumns()
           : position === 'left'
           ? instance.getLeftVisibleLeafColumns()
           : instance.getRightVisibleLeafColumns()
 
-        const index = columns.findIndex(d => d.id === columnId)
+        const index = columns.findIndex(d => d.id === column.id)
 
         if (index > 0) {
-          const prevSiblingColumn = columns[index - 1]
+          const prevSiblingColumn = columns[index - 1]!
 
           return (
-            instance.getColumnStart(prevSiblingColumn.id, position) +
-            prevSiblingColumn.getSize()
+            prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize()
           )
         }
 
         return 0
       },
-      setColumnSizing: updater =>
-        instance.options.onColumnSizingChange?.(updater),
-      setColumnSizingInfo: updater =>
-        instance.options.onColumnSizingInfoChange?.(updater),
-      resetColumnSizing: () => {
-        instance.setColumnSizing(instance.initialState.columnSizing ?? {})
-      },
-      resetHeaderSizeInfo: () => {
-        instance.setColumnSizingInfo(
-          instance.initialState.columnSizingInfo ?? {}
-        )
-      },
-      resetColumnSize: columnId => {
-        instance.setColumnSizing(({ [columnId]: _, ...rest }) => {
+      resetSize: () => {
+        instance.setColumnSizing(({ [column.id]: _, ...rest }) => {
           return rest
         })
       },
-      resetHeaderSize: headerId => {
-        const header = instance.getHeader(headerId)
-
-        return instance.resetColumnSize(header.column.id)
-      },
-      getHeaderCanResize: headerId => {
-        const header = instance.getHeader(headerId)
-
-        if (!header) {
-          throw new Error()
-        }
-
-        return instance.getColumnCanResize(header.column.id)
+      getCanResize: () => {
+        return (
+          (column.enableResizing ?? true) &&
+          (instance.options.enableColumnResizing ?? true)
+        )
       },
-      getColumnCanResize: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
+      getIsResizing: () => {
         return (
-          column.enableResizing ??
-          instance.options.enableColumnResizing ??
-          column.defaultCanResize ??
-          true
+          instance.getState().columnSizingInfo.isResizingColumn === column.id
         )
       },
-      getColumnIsResizing: columnId => {
-        const column = instance.getColumn(columnId)
+    }
+  },
 
-        if (!column) {
-          throw new Error()
+  createHeader: <TGenerics extends TableGenerics>(
+    header: Header<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnSizingHeader<TGenerics> => {
+    return {
+      getSize: () => {
+        let sum = 0
+
+        const recurse = (header: Header<TGenerics>) => {
+          if (header.subHeaders.length) {
+            header.subHeaders.forEach(recurse)
+          } else {
+            sum += header.column.getSize() ?? 0
+          }
         }
 
-        return (
-          instance.getState().columnSizingInfo.isResizingColumn === columnId
-        )
-      },
-      getHeaderIsResizing: headerId => {
-        const header = instance.getHeader(headerId)
+        recurse(header)
 
-        if (!header) {
-          throw new Error()
+        return sum
+      },
+      getStart: () => {
+        if (header.index > 0) {
+          const prevSiblingHeader =
+            header.headerGroup.headers[header.index - 1]!
+          return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
         }
 
-        return instance.getColumnIsResizing(header.column.id)
+        return 0
       },
-      getResizeHandler: (headerId: string) => {
-        const header = instance.getHeader(headerId)
+      getResizeHandler: () => {
         const column = instance.getColumn(header.column.id)
         const canResize = column.getCanResize()
 
@@ -279,16 +215,16 @@ export const ColumnSizing: TableFeature = {
             }
           }
 
-          const header = headerId ? instance.getHeader(headerId) : undefined
-
-          const startSize = header ? header.getSize() : column.getSize()
+          const startSize = column.getSize()
 
           const columnSizingStart: [string, number][] = header
-            ? header.getLeafHeaders().map(d => [d.column.id, d.getSize()])
+            ? header
+                .getLeafHeaders()
+                .map(d => [d.column.id, d.column.getSize()])
             : [[column.id, column.getSize()]]
 
           const clientX = isTouchStartEvent(e)
-            ? Math.round(e.touches[0].clientX)
+            ? Math.round(e.touches[0]!.clientX)
             : (e as MouseEvent).clientX
 
           const updateOffset = (
@@ -365,7 +301,7 @@ export const ColumnSizing: TableFeature = {
                 e.preventDefault()
                 e.stopPropagation()
               }
-              onMove(e.touches[0].clientX)
+              onMove(e.touches[0]!.clientX)
               return false
             },
             upHandler: (e: TouchEvent) => {
@@ -375,7 +311,7 @@ export const ColumnSizing: TableFeature = {
                 e.preventDefault()
                 e.stopPropagation()
               }
-              onEnd(e.touches[0].clientX)
+              onEnd(e.touches[0]!.clientX)
             },
           }
 
@@ -384,16 +320,6 @@ export const ColumnSizing: TableFeature = {
             : false
 
           if (isTouchStartEvent(e)) {
-            document.addEventListener(
-              'touchmove',
-              touchEvents.moveHandler,
-              passiveIfSupported
-            )
-            document.addEventListener(
-              'touchend',
-              touchEvents.upHandler,
-              passiveIfSupported
-            )
           } else {
             document.addEventListener(
               'mousemove',
@@ -418,21 +344,45 @@ export const ColumnSizing: TableFeature = {
           }))
         }
       },
+    }
+  },
+
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): ColumnSizingInstance<TGenerics> => {
+    return {
+      setColumnSizing: updater =>
+        instance.options.onColumnSizingChange?.(updater),
+      setColumnSizingInfo: updater =>
+        instance.options.onColumnSizingInfoChange?.(updater),
+      resetColumnSizing: defaultState => {
+        instance.setColumnSizing(
+          defaultState ? {} : instance.initialState.columnSizing ?? {}
+        )
+      },
+      resetHeaderSizeInfo: defaultState => {
+        instance.setColumnSizingInfo(
+          defaultState
+            ? getDefaultColumnSizingInfoState()
+            : instance.initialState.columnSizingInfo ??
+                getDefaultColumnSizingInfoState()
+        )
+      },
       getTotalSize: () =>
         instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
+          return sum + header.column.getSize()
         }, 0) ?? 0,
       getLeftTotalSize: () =>
         instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
+          return sum + header.column.getSize()
         }, 0) ?? 0,
       getCenterTotalSize: () =>
         instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
+          return sum + header.column.getSize()
         }, 0) ?? 0,
       getRightTotalSize: () =>
         instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
+          return sum + header.column.getSize()
         }, 0) ?? 0,
     }
   },

package/src/features/Columns.ts

@@ -8,7 +8,6 @@ import {
   AccessorFn,
   ColumnDef,
   Renderable,
-  HeaderRenderProps,
 } from '../types'
 import { memo } from '../utils'
 
@@ -42,7 +41,7 @@ export type CoreColumnDef<TGenerics extends TableGenerics> = {
       row: Row<TGenerics>
       column: Column<TGenerics>
       cell: Cell<TGenerics>
-      value: TGenerics['Value']
+      getValue: () => TGenerics['Value']
     }
   >
   meta?: TGenerics['ColumnMeta']
@@ -93,12 +92,9 @@ export const Columns = {
           defaultColumn = (defaultColumn ?? {}) as Partial<ColumnDef<TGenerics>>
 
           return {
-            header: (props: HeaderRenderProps<Header<TGenerics>>) =>
-              props.header.column.id,
-            footer: (props: HeaderRenderProps<Header<TGenerics>>) =>
-              props.header.column.id,
-            cell: ({ value = '' }: { value: any }): JSX.Element =>
-              typeof value === 'boolean' ? value.toString() : value,
+            header: props => props.header.column.id,
+            footer: props => props.header.column.id,
+            cell: props => props.getValue().toString?.() ?? null,
             ...instance._features.reduce((obj, feature) => {
               return Object.assign(obj, feature.getDefaultColumn?.())
             }, {}),
@@ -108,7 +104,7 @@ export const Columns = {
         {
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
-          key: process.env.NODE_ENV === 'production' && 'getDefaultColumn',
+          key: process.env.NODE_ENV === 'development' && 'getDefaultColumn',
         }
       ),
 
@@ -225,7 +221,7 @@ export const Columns = {
           return recurseColumns(columnDefs)
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getAllColumns',
+          key: process.env.NODE_ENV === 'development' && 'getAllColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -239,7 +235,7 @@ export const Columns = {
           })
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getAllFlatColumns',
+          key: process.env.NODE_ENV === 'development' && 'getAllFlatColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -254,7 +250,8 @@ export const Columns = {
           }, {} as Record<string, Column<TGenerics>>)
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getAllFlatColumnsById',
+          key:
+            process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -269,7 +266,7 @@ export const Columns = {
           return orderColumns(leafColumns)
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getAllLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getAllLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }

package/src/features/Expanding.ts

@@ -8,6 +8,7 @@ import {
   TableFeature,
 } from '../types'
 import { makeStateUpdater } from '../utils'
+import { Rows } from './Rows'
 
 export type ExpandedStateList = Record<string, boolean>
 export type ExpandedState = true | Record<string, boolean>
@@ -26,12 +27,11 @@ export type ExpandedOptions<TGenerics extends TableGenerics> = {
   manualExpanding?: boolean
   onExpandedChange?: OnChangeFn<ExpandedState>
   autoResetExpanded?: boolean
-  enableExpanded?: boolean
+  enableExpanding?: boolean
   getExpandedRowModel?: (
     instance: TableInstance<TGenerics>
   ) => () => RowModel<TGenerics>
   expandSubRows?: boolean
-  defaultCanExpand?: boolean
   getIsRowExpanded?: (row: Row<TGenerics>) => boolean
   getRowCanExpand?: (row: Row<TGenerics>) => boolean
   paginateExpandedRows?: boolean
@@ -40,13 +40,9 @@ export type ExpandedOptions<TGenerics extends TableGenerics> = {
 export type ExpandedInstance<TGenerics extends TableGenerics> = {
   _autoResetExpanded: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
-  toggleRowExpanded: (rowId: string, expanded?: boolean) => void
   toggleAllRowsExpanded: (expanded?: boolean) => void
-  resetExpanded: () => void
-  getRowCanExpand: (rowId: string) => boolean
+  resetExpanded: (defaultState?: boolean) => void
   getCanSomeRowsExpand: () => boolean
-  getIsRowExpanded: (rowId: string) => boolean
-  getToggleExpandedHandler: (rowId: string) => undefined | (() => void)
   getToggleAllRowsExpandedHandler: () => (event: unknown) => void
   getIsSomeRowsExpanded: () => boolean
   getIsAllRowsExpanded: () => boolean
@@ -101,39 +97,6 @@ export const Expanding: TableFeature = {
         }
       },
       setExpanded: updater => instance.options.onExpandedChange?.(updater),
-      toggleRowExpanded: (rowId, expanded) => {
-        if (!rowId) return
-
-        instance.setExpanded(old => {
-          const exists = old === true ? true : !!old?.[rowId]
-
-          let oldExpanded: ExpandedStateList = {}
-
-          if (old === true) {
-            Object.keys(instance.getRowModel().rowsById).forEach(rowId => {
-              oldExpanded[rowId] = true
-            })
-          } else {
-            oldExpanded = old
-          }
-
-          expanded = expanded ?? !exists
-
-          if (!exists && expanded) {
-            return {
-              ...oldExpanded,
-              [rowId]: true,
-            }
-          }
-
-          if (exists && !expanded) {
-            const { [rowId]: _, ...rest } = oldExpanded
-            return rest
-          }
-
-          return old
-        })
-      },
       toggleAllRowsExpanded: expanded => {
         if (expanded ?? !instance.getIsAllRowsExpanded()) {
           instance.setExpanded(true)
@@ -141,65 +104,13 @@ export const Expanding: TableFeature = {
           instance.setExpanded({})
         }
       },
-      resetExpanded: () => {
-        instance.setExpanded(instance.initialState?.expanded ?? {})
-      },
-      getIsRowExpanded: rowId => {
-        const row = instance.getPreExpandedRowModel().rowsById[rowId]
-
-        if (!row) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              `[Table] getIsRowExpanded: no row found with id ${rowId}`
-            )
-          }
-          throw new Error()
-        }
-
-        const expanded = instance.getState().expanded
-
-        return !!(
-          instance.options.getIsRowExpanded?.(row) ??
-          (expanded === true || expanded?.[rowId])
-        )
-      },
-      getRowCanExpand: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              `[Table] getRowCanExpand: no row found with id ${rowId}`
-            )
-          }
-          throw new Error()
-        }
-
-        return (
-          instance.options.getRowCanExpand?.(row) ??
-          instance.options.enableExpanded ??
-          instance.options.defaultCanExpand ??
-          !!row.subRows?.length
+      resetExpanded: defaultState => {
+        instance.setExpanded(
+          defaultState ? {} : instance.initialState?.expanded ?? {}
         )
       },
       getCanSomeRowsExpand: () => {
-        return Object.keys(instance.getRowModel().rowsById).some(id =>
-          instance.getRowCanExpand(id)
-        )
-      },
-      getToggleExpandedHandler: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          return
-        }
-
-        const canExpand = instance.getRowCanExpand(rowId)
-
-        return () => {
-          if (!canExpand) return
-          instance.toggleRowExpanded(rowId)
-        }
+        return instance.getRowModel().flatRows.some(row => row.getCanExpand())
       },
       getToggleAllRowsExpandedHandler: () => {
         return (e: unknown) => {
@@ -220,11 +131,7 @@ export const Expanding: TableFeature = {
         }
 
         // If any row is not expanded, return false
-        if (
-          Object.keys(instance.getRowModel().rowsById).some(
-            id => !instance.getIsRowExpanded(id)
-          )
-        ) {
+        if (instance.getRowModel().flatRows.some(row => row.getIsExpanded())) {
           return false
         }
 
@@ -273,12 +180,60 @@ export const Expanding: TableFeature = {
     instance: TableInstance<TGenerics>
   ): ExpandedRow => {
     return {
-      toggleExpanded: expanded =>
-        void instance.toggleRowExpanded(row.id, expanded),
-      getIsExpanded: () => instance.getIsRowExpanded(row.id),
-      getCanExpand: () => row.subRows && !!row.subRows.length,
-      getToggleExpandedHandler: () =>
-        instance.getToggleExpandedHandler(row.id)!,
+      toggleExpanded: expanded => {
+        instance.setExpanded(old => {
+          const exists = old === true ? true : !!old?.[row.id]
+
+          let oldExpanded: ExpandedStateList = {}
+
+          if (old === true) {
+            Object.keys(instance.getRowModel().rowsById).forEach(rowId => {
+              oldExpanded[rowId] = true
+            })
+          } else {
+            oldExpanded = old
+          }
+
+          expanded = expanded ?? !exists
+
+          if (!exists && expanded) {
+            return {
+              ...oldExpanded,
+              [row.id]: true,
+            }
+          }
+
+          if (exists && !expanded) {
+            const { [row.id]: _, ...rest } = oldExpanded
+            return rest
+          }
+
+          return old
+        })
+      },
+      getIsExpanded: () => {
+        const expanded = instance.getState().expanded
+
+        return !!(
+          instance.options.getIsRowExpanded?.(row) ??
+          (expanded === true || expanded?.[row.id])
+        )
+      },
+      getCanExpand: () => {
+        return (
+          (instance.options.getRowCanExpand?.(row) ?? true) &&
+          (instance.options.enableExpanding ?? true) &&
+          !!row.subRows?.length
+        )
+      },
+      getToggleExpandedHandler: () => {
+        const canExpand = row.getCanExpand()
+
+        return () => {
+          if (!canExpand) return
+          row.toggleExpanded()
+        }
+      },
     }
   },
 }