@tanstack/react-table 8.0.0-alpha.1 → 8.0.0-alpha.4

package/src/createTable.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react'
 import { Cell, Column, Row } from '.'
 import { createTableInstance } from './core'
-import { ReactTable, ColumnDef, AccessorFn, Options } from './types'
+import {
+  ReactTable,
+  ColumnDef,
+  AccessorFn,
+  Options,
+  Renderable,
+  Header,
+} from './types'
 import { Overwrite } from './utils'
 
 type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
-  RowType: <TTData>() => TableHelper<
+  RowType<TTData>(): TableHelper<
     TTData,
     TValue,
     TFilterFns,
@@ -36,13 +43,57 @@ type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   ) => ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[]
 
   createGroup: (
+    column: Overwrite<
+      ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>,
+      | {
+          __generated?: never
+          accessorFn?: never
+          accessorKey?: never
+          header: string
+          id?: string
+        }
+      | {
+          __generated?: never
+          accessorFn?: never
+          accessorKey?: never
+          id: string
+          header?:
+            | string
+            | Renderable<{
+                instance: ReactTable<
+                  TData,
+                  TValue,
+                  TFilterFns,
+                  TSortingFns,
+                  TAggregationFns
+                >
+                header: Header<
+                  TData,
+                  TValue,
+                  TFilterFns,
+                  TSortingFns,
+                  TAggregationFns
+                >
+                column: Column<
+                  TData,
+                  TValue,
+                  TFilterFns,
+                  TSortingFns,
+                  TAggregationFns
+                >
+              }>
+        }
+    >
+  ) => ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>
+
+  createDisplayColumn: (
     column: Overwrite<
       ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>,
       { __generated?: never; accessorFn?: never; accessorKey?: never }
     >
   ) => ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>
 
-  createColumn: <TAccessor extends AccessorFn<TData> | keyof TData>(
+  createDataColumn: <TAccessor extends AccessorFn<TData> | keyof TData>(
     accessor: TAccessor,
     column: TAccessor extends (...args: any[]) => any
       ? // Accessor Fn
@@ -71,7 +122,12 @@ type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
             TSortingFns,
             TAggregationFns
           >,
-          { __generated?: never; accessorFn?: never; accessorKey?: never }
+          {
+            __generated?: never
+            accessorFn?: never
+            accessorKey?: never
+            id?: string
+          }
         >
       : never
   ) => ColumnDef<
@@ -124,7 +180,15 @@ export function createTable<
     SortingFns: () => createTable(),
     AggregationFns: () => createTable(),
     createColumns: columns => columns,
-    createColumn: (accessor, column) => {
+    createDisplayColumn: column => ({
+      ...column,
+      __generated: true,
+    }),
+    createGroup: column => ({
+      ...column,
+      __generated: true,
+    }),
+    createDataColumn: (accessor, column) => {
       column = {
         ...column,
         id: column.id,
@@ -149,10 +213,6 @@ export function createTable<
 
       throw new Error('Invalid accessor')
     },
-    createGroup: column => ({
-      ...column,
-      __generated: true,
-    }),
     useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
       options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {

package/src/features/ColumnSizing.ts

@@ -0,0 +1,453 @@
+import React, {
+  ComponentProps,
+  MouseEvent as ReactMouseEvent,
+  PropsWithoutRef,
+  PropsWithRef,
+  TouchEvent as ReactTouchEvent,
+} from 'react'
+import {
+  Column,
+  Getter,
+  Header,
+  OnChangeFn,
+  PropGetterValue,
+  ReactTable,
+  Updater,
+} from '../types'
+import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+
+//
+
+export type ColumnSizing = Record<string, number>
+
+export type ColumnSizingInfoState = {
+  startOffset: null | number
+  startSize: null | number
+  deltaOffset: null | number
+  deltaPercentage: null | number
+  isResizingColumn: false | string
+  columnSizingStart: [string, number][]
+}
+
+export type ColumnSizingTableState = {
+  columnSizing: ColumnSizing
+  columnSizingInfo: ColumnSizingInfoState
+}
+
+export type ColumnResizeMode = 'onChange' | 'onEnd'
+
+export type ColumnSizingOptions = {
+  enableColumnResizing?: boolean
+  columnResizeMode?: ColumnResizeMode
+  onColumnSizingChange?: OnChangeFn<ColumnSizing>
+  onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>
+}
+
+export type ColumnSizingDefaultOptions = {
+  columnResizeMode: ColumnResizeMode
+  onColumnSizingChange: OnChangeFn<ColumnSizing>
+  onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>
+}
+
+export type ColumnResizerProps = {
+  title?: string
+  onMouseDown?: (e: ReactMouseEvent) => void
+  onTouchStart?: (e: ReactTouchEvent) => void
+  draggable?: boolean
+  role?: string
+}
+
+export type ColumnSizingInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  setColumnSizing: (updater: Updater<ColumnSizing>) => 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
+  getColumnResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
+    columnId: string,
+    userProps?: TGetter
+  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
+  getColumnIsResizing: (columnId: string) => boolean
+  getHeaderIsResizing: (headerId: string) => boolean
+}
+
+export type ColumnSizingColumnDef = {
+  enableResizing?: boolean
+  defaultCanResize?: boolean
+}
+
+export type ColumnSizingColumn<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  getCanResize: () => boolean
+  getIsResizing: () => boolean
+  getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
+    userProps?: TGetter
+  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
+  resetSize: () => void
+}
+
+//
+
+export const defaultColumnSizing = {
+  width: 150,
+  minWidth: 20,
+  maxWidth: Number.MAX_SAFE_INTEGER,
+}
+
+export function getInitialState(): ColumnSizingTableState {
+  return {
+    columnSizing: {},
+    columnSizingInfo: {
+      startOffset: null,
+      startSize: null,
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      columnSizingStart: [],
+    },
+  }
+}
+
+export function getDefaultOptions<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): ColumnSizingDefaultOptions {
+  return {
+    columnResizeMode: 'onEnd',
+    onColumnSizingChange: makeStateUpdater('columnSizing', instance),
+    onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', instance),
+  }
+}
+
+export function getInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): ColumnSizingInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> {
+  return {
+    setColumnSizing: updater =>
+      instance.options.onColumnSizingChange?.(
+        updater,
+        functionalUpdate(updater, instance.getState().columnSizing)
+      ),
+    setColumnSizingInfo: updater =>
+      instance.options.onColumnSizingInfoChange?.(
+        updater,
+        functionalUpdate(updater, instance.getState().columnSizingInfo)
+      ),
+    resetColumnSizing: () => {
+      instance.setColumnSizing(instance.initialState.columnSizing ?? {})
+    },
+    resetHeaderSizeInfo: () => {
+      instance.setColumnSizingInfo(instance.initialState.columnSizingInfo ?? {})
+    },
+    resetColumnSize: columnId => {
+      instance.setColumnSizing(({ [columnId]: _, ...rest }) => {
+        return rest
+      })
+    },
+    resetHeaderSize: headerId => {
+      const header = instance.getHeader(headerId)
+
+      if (!header) {
+        return
+      }
+
+      return instance.resetColumnSize(header.column.id)
+    },
+    getHeaderCanResize: headerId => {
+      const header = instance.getHeader(headerId)
+
+      if (!header) {
+        throw new Error()
+      }
+
+      return instance.getColumnCanResize(header.column.id)
+    },
+    getColumnCanResize: columnId => {
+      const column = instance.getColumn(columnId)
+
+      if (!column) {
+        throw new Error()
+      }
+
+      return (
+        column.enableResizing ??
+        instance.options.enableColumnResizing ??
+        column.defaultCanResize ??
+        true
+      )
+    },
+    getColumnIsResizing: columnId => {
+      const column = instance.getColumn(columnId)
+
+      if (!column) {
+        throw new Error()
+      }
+
+      return instance.getState().columnSizingInfo.isResizingColumn === columnId
+    },
+    getHeaderIsResizing: headerId => {
+      const header = instance.getHeader(headerId)
+
+      if (!header) {
+        throw new Error()
+      }
+
+      return instance.getColumnIsResizing(header.column.id)
+    },
+    getColumnResizerProps: (headerId, userProps) => {
+      const header = instance.getHeader(headerId)
+
+      if (!header) {
+        return
+      }
+
+      const column = instance.getColumn(header.column.id)
+
+      if (!column) {
+        return
+      }
+
+      const canResize = column.getCanResize()
+
+      const onResizeStart = (e: ReactMouseEvent | ReactTouchEvent) => {
+        if (isTouchStartEvent(e)) {
+          // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+          if (e.touches && e.touches.length > 1) {
+            return
+          }
+        }
+
+        const columnSizingStart: [string, number][] = header
+          .getLeafHeaders()
+          .map(d => [d.column.id, d.getWidth()])
+
+        const clientX = isTouchStartEvent(e)
+          ? Math.round(e.touches[0].clientX)
+          : e.clientX
+
+        const updateOffset = (
+          eventType: 'move' | 'end',
+          clientXPos?: number
+        ) => {
+          if (typeof clientXPos !== 'number') {
+            return
+          }
+
+          let newColumnSizing: ColumnSizing = {}
+
+          instance.setColumnSizingInfo(old => {
+            const deltaOffset = clientXPos - (old?.startOffset ?? 0)
+            const deltaPercentage = Math.max(
+              deltaOffset / (old?.startSize ?? 0),
+              -0.999999
+            )
+
+            old.columnSizingStart.forEach(([columnId, headerWidth]) => {
+              newColumnSizing[columnId] = Math.max(
+                headerWidth + headerWidth * deltaPercentage,
+                0
+              )
+            })
+
+            return {
+              ...old,
+              deltaOffset,
+              deltaPercentage,
+            }
+          })
+
+          if (
+            instance.options.columnResizeMode === 'onChange' ||
+            eventType === 'end'
+          ) {
+            instance.setColumnSizing(old => ({
+              ...old,
+              ...newColumnSizing,
+            }))
+          }
+        }
+
+        const onMove = (clientXPos?: number) => updateOffset('move', clientXPos)
+
+        const onEnd = (clientXPos?: number) => {
+          updateOffset('end', clientXPos)
+
+          instance.setColumnSizingInfo(old => ({
+            ...old,
+            isResizingColumn: false,
+            startOffset: null,
+            startSize: null,
+            deltaOffset: null,
+            deltaPercentage: null,
+            columnSizingStart: [],
+          }))
+        }
+
+        const mouseEvents = {
+          moveHandler: (e: MouseEvent) => onMove(e.clientX),
+          upHandler: (e: MouseEvent) => {
+            document.removeEventListener('mousemove', mouseEvents.moveHandler)
+            document.removeEventListener('mouseup', mouseEvents.upHandler)
+            onEnd(e.clientX)
+          },
+        }
+
+        const touchEvents = {
+          moveHandler: (e: TouchEvent) => {
+            if (e.cancelable) {
+              e.preventDefault()
+              e.stopPropagation()
+            }
+            onMove(e.touches[0].clientX)
+            return false
+          },
+          upHandler: (e: TouchEvent) => {
+            document.removeEventListener('touchmove', touchEvents.moveHandler)
+            document.removeEventListener('touchend', touchEvents.upHandler)
+            if (e.cancelable) {
+              e.preventDefault()
+              e.stopPropagation()
+            }
+            onEnd(e.touches[0].clientX)
+          },
+        }
+
+        const passiveIfSupported = passiveEventSupported()
+          ? { passive: false }
+          : false
+
+        if (isTouchStartEvent(e)) {
+          document.addEventListener(
+            'touchmove',
+            touchEvents.moveHandler,
+            passiveIfSupported
+          )
+          document.addEventListener(
+            'touchend',
+            touchEvents.upHandler,
+            passiveIfSupported
+          )
+        } else {
+          document.addEventListener(
+            'mousemove',
+            mouseEvents.moveHandler,
+            passiveIfSupported
+          )
+          document.addEventListener(
+            'mouseup',
+            mouseEvents.upHandler,
+            passiveIfSupported
+          )
+        }
+
+        instance.setColumnSizingInfo(old => ({
+          ...old,
+          startOffset: clientX,
+          startSize: header.getWidth(),
+          deltaOffset: 0,
+          deltaPercentage: 0,
+          columnSizingStart,
+          isResizingColumn: header.column.id,
+        }))
+      }
+
+      const initialProps: ColumnResizerProps = canResize
+        ? {
+            title: 'Toggle Grouping',
+            draggable: false,
+            role: 'separator',
+            onMouseDown: (e: ReactMouseEvent) => {
+              e.persist()
+              onResizeStart(e)
+            },
+            onTouchStart: (e: ReactTouchEvent) => {
+              e.persist()
+              onResizeStart(e)
+            },
+          }
+        : {}
+
+      return propGetter(initialProps, userProps)
+    },
+  }
+}
+
+export function createColumn<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): ColumnSizingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  return {
+    getIsResizing: () => instance.getColumnIsResizing(column.id),
+    getCanResize: () => instance.getColumnCanResize(column.id),
+    resetSize: () => instance.resetColumnSize(column.id),
+    getResizerProps: userProps =>
+      instance.getColumnResizerProps(column.id, userProps),
+  }
+}
+
+let passiveSupported: boolean | null = null
+export function passiveEventSupported() {
+  if (typeof passiveSupported === 'boolean') return passiveSupported
+
+  let supported = false
+  try {
+    const options = {
+      get passive() {
+        supported = true
+        return false
+      },
+    }
+
+    const noop = () => {}
+
+    window.addEventListener('test', noop, options)
+    window.removeEventListener('test', noop)
+  } catch (err) {
+    supported = false
+  }
+  passiveSupported = supported
+  return passiveSupported
+}
+
+function isTouchStartEvent(
+  e: ReactTouchEvent | ReactMouseEvent
+): e is ReactTouchEvent {
+  return e.type === 'touchstart'
+}

package/src/features/Expanding.ts

@@ -43,14 +43,7 @@ export type ExpandedOptions<
       TSortingFns,
       TAggregationFns
     >,
-    expandedState: ExpandedState,
-    groupedRowModel: RowModel<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
+    rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   ) => RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   expandSubRows?: boolean
   defaultCanExpand?: boolean
@@ -75,6 +68,7 @@ export type ExpandedInstance<
   TSortingFns,
   TAggregationFns
 > = {
+  _notifyExpandedReset: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
   toggleRowExpanded: (rowId: string, expanded?: boolean) => void
   toggleAllRowsExpanded: (expanded?: boolean) => void
@@ -170,7 +164,26 @@ export function getInstance<
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): ExpandedInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  let registered = false
+
   return {
+    _notifyExpandedReset: () => {
+      if (!registered) {
+        registered = true
+        return
+      }
+
+      if (instance.options.autoResetAll === false) {
+        return
+      }
+
+      if (
+        instance.options.autoResetAll === true ||
+        instance.options.autoResetExpanded
+      ) {
+        instance.resetExpanded()
+      }
+    },
     setExpanded: updater =>
       instance.options.onExpandedChange?.(
         updater,
@@ -344,10 +357,13 @@ export function getInstance<
         if (process.env.NODE_ENV !== 'production' && instance.options.debug)
           console.info('Expanding...')
 
-        return expandRowsFn(instance, expanded, rowModel)
+        return expandRowsFn(instance, rowModel)
       },
-      'getExpandedRowModel',
-      instance.options.debug
+      {
+        key: 'getExpandedRowModel',
+        debug: instance.options.debug,
+        onChange: () => instance._notifyPageIndexReset(),
+      }
     ),
 
     getPreExpandedRows: () => instance.getGroupedRowModel().rows,