@tanstack/react-table 0.0.1-alpha.8 → 8.0.0-alpha.2

package/src/features/ColumnSizing.ts

@@ -0,0 +1,482 @@
+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 HeaderResizerProps = {
+  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
+  getHeaderResizerProps: <TGetter extends Getter<HeaderResizerProps>>(
+    columnId: string,
+    userProps?: TGetter
+  ) => undefined | PropGetterValue<HeaderResizerProps, 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
+  resetSize: () => void
+}
+
+export type ColumnSizingHeader<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  getCanResize: () => boolean
+  getIsResizing: () => boolean
+  getResizerProps: <TGetter extends Getter<HeaderResizerProps>>(
+    userProps?: TGetter
+  ) => undefined | PropGetterValue<HeaderResizerProps, 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)
+    },
+    getHeaderResizerProps: (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: HeaderResizerProps = 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),
+  }
+}
+
+export function createHeader<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  header: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): ColumnSizingHeader<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  return {
+    getIsResizing: () => instance.getHeaderIsResizing(header.id),
+    getCanResize: () => instance.getHeaderCanResize(header.id),
+    getResizerProps: userProps =>
+      instance.getHeaderResizerProps(header.id, userProps),
+    resetSize: () => instance.resetHeaderSize(header.id),
+  }
+}
+
+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/Filters.ts

@@ -438,7 +438,7 @@ export function getInstance<
     setColumnFilters: (updater: Updater<ColumnFiltersState>) => {
       const leafColumns = instance.getAllLeafColumns()
 
-      const updateFn = (old?: ColumnFiltersState) => {
+      const updateFn = (old: ColumnFiltersState) => {
         return functionalUpdate(updater, old)?.filter(filter => {
           const column = leafColumns.find(d => d.id === filter.id)
 

package/src/features/Headers.ts

@@ -1,6 +1,7 @@
 import {
   Cell,
   Column,
+  CoreHeader,
   FooterGroupProps,
   FooterProps,
   Getter,
@@ -14,6 +15,8 @@ import {
 } from '../types'
 import { propGetter, memo, flexRender } from '../utils'
 
+import * as ColumnSizing from './ColumnSizing'
+
 export type HeadersRow<
   TData,
   TValue,
@@ -319,7 +322,7 @@ export function getInstance<
     ) => {
       const id = options.id ?? column.id
 
-      let header: Header<
+      let header: CoreHeader<
         TData,
         TValue,
         TFilterFns,
@@ -338,7 +341,7 @@ export function getInstance<
           let sum = 0
 
           const recurse = (
-            header: Header<
+            header: CoreHeader<
               TData,
               TValue,
               TFilterFns,
@@ -364,7 +367,7 @@ export function getInstance<
           TSortingFns,
           TAggregationFns
         >[] => {
-          const leafHeaders: Header<
+          const leafHeaders: CoreHeader<
             TData,
             TValue,
             TFilterFns,
@@ -373,7 +376,13 @@ export function getInstance<
           >[] = []
 
           const recurseHeader = (
-            h: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+            h: CoreHeader<
+              TData,
+              TValue,
+              TFilterFns,
+              TSortingFns,
+              TAggregationFns
+            >
           ) => {
             if (h.subHeaders && h.subHeaders.length) {
               h.subHeaders.map(recurseHeader)
@@ -382,7 +391,14 @@ export function getInstance<
           }
 
           recurseHeader(header)
-          return leafHeaders
+
+          return leafHeaders as Header<
+            TData,
+            TValue,
+            TFilterFns,
+            TSortingFns,
+            TAggregationFns
+          >[]
         },
         getHeaderProps: userProps =>
           instance.getHeaderProps(header.id, userProps)!,
@@ -392,7 +408,28 @@ export function getInstance<
         renderFooter: () => flexRender(column.footer, { header, column }),
       }
 
-      return header
+      header = Object.assign(
+        header,
+        ColumnSizing.createHeader(
+          header as Header<
+            TData,
+            TValue,
+            TFilterFns,
+            TSortingFns,
+            TAggregationFns
+          >,
+          instance
+        )
+      )
+
+      // Yes, we have to convert instance to uknown, because we know more than the compiler here.
+      return header as Header<
+        TData,
+        TValue,
+        TFilterFns,
+        TSortingFns,
+        TAggregationFns
+      >
     },
 
     // Header Groups

package/src/types.ts

@@ -56,6 +56,14 @@ import {
   ExpandedTableState,
 } from './features/Expanding'
 import { Overwrite } from './utils'
+import {
+  ColumnSizingColumn,
+  ColumnSizingColumnDef,
+  ColumnSizingHeader,
+  ColumnSizingInstance,
+  ColumnSizingOptions,
+  ColumnSizingTableState,
+} from './features/ColumnSizing'
 
 // declare global {
 //   const process.env.NODE_ENV !== 'production': boolean
@@ -81,6 +89,13 @@ export type ReactTable<
   FiltersInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
   SortingInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
   GroupingInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+  ColumnSizingInstance<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  > &
   ExpandedInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 
 export type Renderable<TProps> =
@@ -98,9 +113,10 @@ export type Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
     FiltersOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     SortingOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     GroupingOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
-    ExpandedOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+    ExpandedOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+    ColumnSizingOptions
 
-export type Updater<T> = T | ((old?: T) => T)
+export type Updater<T> = T | ((old: T) => T)
 export type OnChangeFn<T> = (updaterOrValue: Updater<T>, value: T) => void
 
 export type TableState = VisibilityTableState &
@@ -109,7 +125,8 @@ export type TableState = VisibilityTableState &
   FiltersTableState &
   SortingTableState &
   ExpandedTableState &
-  GroupingTableState
+  GroupingTableState &
+  ColumnSizingTableState
 
 export type Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
   CoreRow<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
@@ -139,7 +156,8 @@ export type ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
     ColumnPinningColumnDef &
     FiltersColumnDef<TFilterFns> &
     SortingColumnDef<TSortingFns> &
-    GroupingColumnDef<TAggregationFns>
+    GroupingColumnDef<TAggregationFns> &
+    ColumnSizingColumnDef
 
 export type Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
   ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
@@ -148,7 +166,8 @@ export type Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
     ColumnPinningColumn &
     FiltersColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     SortingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
-    GroupingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+    GroupingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+    ColumnSizingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 
 export type Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   id: string
@@ -161,7 +180,17 @@ export type Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   renderCell: () => React.ReactNode
 }
 
-export type Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
+export type Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
+  CoreHeader<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+    ColumnSizingHeader<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+
+export type CoreHeader<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
   id: string
   depth: number
   column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>

package/src/utils.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Getter, NoInfer, PropGetterValue, Renderable } from './types'
+import {
+  Getter,
+  NoInfer,
+  PropGetterValue,
+  Renderable,
+  TableState,
+} from './types'
 
 export type IsAny<T> = 0 extends 1 & T ? true : false
 export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
@@ -26,7 +32,7 @@ export function noop() {
   //
 }
 
-export function makeStateUpdater(key: string, instance: unknown) {
+export function makeStateUpdater(key: keyof TableState, instance: unknown) {
   return (updater: Updater<any, any>) => {
     ;(instance as any).setState(<TTableState,>(old: TTableState) => {
       return {