@tanstack/react-table 8.0.0-alpha.9 → 8.0.0-beta.2

package/src/createTable.tsx

@@ -1,186 +0,0 @@
-import * as React from 'react'
-import { createTableInstance } from './core'
-import { CustomFilterTypes } from './features/Filters'
-import { CustomAggregationTypes } from './features/Grouping'
-import { CustomSortingTypes } from './features/Sorting'
-import {
-  TableInstance,
-  ColumnDef,
-  AccessorFn,
-  Options,
-  DefaultGenerics,
-  PartialGenerics,
-  _NonGenerated,
-} from './types'
-import { Overwrite, PartialKeys } from './utils'
-
-export type CreatTableFactory<TGenerics extends Partial<DefaultGenerics>> = <
-  TRow
->() => CreateTable<Overwrite<TGenerics, { Row: TRow }>>
-
-export type CreateTableOptions<
-  TFilterFns extends CustomFilterTypes<any>,
-  TSortingFns extends CustomSortingTypes<any>,
-  TAggregationFns extends CustomAggregationTypes<any>
-> = {
-  filterFns?: TFilterFns
-  sortingFns?: TSortingFns
-  aggregationFns?: TAggregationFns
-}
-
-export function createTableFactory<
-  TFilterFns extends CustomFilterTypes<any>,
-  TSortingFns extends CustomSortingTypes<any>,
-  TAggregationFns extends CustomAggregationTypes<any>
->(
-  opts: CreateTableOptions<TFilterFns, TSortingFns, TAggregationFns>
-): CreatTableFactory<
-  Overwrite<
-    PartialGenerics,
-    {
-      FilterFns: TFilterFns
-      SortingFns: TSortingFns
-      AggregationFns: TAggregationFns
-    }
-  >
-> {
-  return () => _createTable(undefined, undefined, opts)
-}
-
-export type CreateTable<TGenerics extends Partial<DefaultGenerics>> = {
-  createColumns: (columns: ColumnDef<TGenerics>[]) => ColumnDef<TGenerics>[]
-  createGroup: (
-    column: Overwrite<
-      | Overwrite<
-          _NonGenerated<ColumnDef<TGenerics>>,
-          {
-            header: string
-            id?: string
-          }
-        >
-      | Overwrite<
-          _NonGenerated<ColumnDef<TGenerics>>,
-          {
-            id: string
-            header?: string | ColumnDef<TGenerics>['header']
-          }
-        >,
-      { accessorFn?: never; accessorKey?: never }
-    >
-  ) => ColumnDef<TGenerics>
-  createDisplayColumn: (
-    column: PartialKeys<
-      _NonGenerated<ColumnDef<TGenerics>>,
-      'accessorFn' | 'accessorKey'
-    >
-  ) => ColumnDef<TGenerics>
-  createDataColumn: <
-    TAccessor extends AccessorFn<TGenerics['Row']> | keyof TGenerics['Row']
-  >(
-    accessor: TAccessor,
-    column: Overwrite<
-      TAccessor extends (...args: any[]) => any
-        ? // Accessor Fn
-          _NonGenerated<ColumnDef<TGenerics>>
-        : TAccessor extends keyof TGenerics['Row']
-        ? // Accessor Key
-          Overwrite<
-            _NonGenerated<ColumnDef<TGenerics>>,
-            {
-              id?: string
-            }
-          >
-        : never,
-      {
-        accessorFn?: never
-        accessorKey?: never
-      }
-    >
-  ) => ColumnDef<TGenerics>
-  useTable: (
-    options: PartialKeys<
-      Omit<Options<TGenerics>, keyof CreateTableOptions<any, any, any>>,
-      'state' | 'onStateChange'
-    >
-  ) => TableInstance<TGenerics>
-}
-
-export function createTable<TRow>() {
-  return _createTable<Overwrite<PartialGenerics, { Row: TRow }>>()
-}
-
-function _createTable<TGenerics extends PartialGenerics>(
-  _?: undefined,
-  __?: undefined,
-  opts?: CreateTableOptions<any, any, any>
-): CreateTable<TGenerics> {
-  return {
-    createColumns: columns => columns,
-    createDisplayColumn: column => column as any,
-    createGroup: column => column as any,
-    createDataColumn: (accessor, column): any => {
-      column = {
-        ...column,
-        id: column.id,
-      }
-
-      if (typeof accessor === 'string') {
-        return {
-          ...column,
-          id: column.id ?? accessor,
-          accessorKey: accessor,
-        }
-      }
-
-      if (typeof accessor === 'function') {
-        return {
-          ...column,
-          accessorFn: accessor,
-        }
-      }
-
-      throw new Error('Invalid accessor')
-    },
-    useTable: (
-      options: PartialKeys<
-        Omit<Options<TGenerics>, keyof CreateTableOptions<any, any, any>>,
-        'state' | 'onStateChange'
-      >
-    ): TableInstance<TGenerics> => {
-      // Compose in the generic options to the user options
-      const resolvedOptions = {
-        ...(opts ?? {}),
-        state: {}, // Dummy state
-        onStateChange: () => {}, // noop
-        ...options,
-      }
-
-      // Create a new table instance and store it in state
-      const [instance] = React.useState(() =>
-        createTableInstance<TGenerics>(resolvedOptions)
-      )
-
-      // By default, manage table state here using the instance's initial state
-      const [state, setState] = React.useState(() => instance.initialState)
-
-      // Compose the default state above with any user state. This will allow the user
-      // to only control a subset of the state if desired.
-      instance.setOptions(prev => ({
-        ...prev,
-        ...options,
-        state: {
-          ...state,
-          ...options.state,
-        },
-        // Similarly, we'll maintain both our internal state and any user-provided
-        // state.
-        onStateChange: updater => {
-          setState(updater)
-          options.onStateChange?.(updater)
-        },
-      }))
-
-      return instance
-    },
-  }
-}

package/src/features/ColumnSizing.ts

@@ -1,424 +0,0 @@
-import {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-} from 'react'
-import {
-  Column,
-  Getter,
-  Header,
-  OnChangeFn,
-  PartialGenerics,
-  PropGetterValue,
-  TableInstance,
-  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<TGenerics extends PartialGenerics> = {
-  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<ColumnResizerProps>>(
-    headerId: 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<TGenerics extends PartialGenerics> = {
-  getCanResize: () => boolean
-  getIsResizing: () => boolean
-  resetSize: () => void
-}
-
-export type ColumnSizingHeader<TGenerics extends PartialGenerics> = {
-  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<TGenerics extends PartialGenerics>(
-  instance: TableInstance<TGenerics>
-): ColumnSizingDefaultOptions {
-  return {
-    columnResizeMode: 'onEnd',
-    onColumnSizingChange: makeStateUpdater('columnSizing', instance),
-    onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', instance),
-  }
-}
-
-export function getInstance<TGenerics extends PartialGenerics>(
-  instance: TableInstance<TGenerics>
-): ColumnSizingInstance<TGenerics> {
-  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)
-
-      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)
-      const column = instance.getColumn(header.column.id)
-
-      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 header = headerId ? instance.getHeader(headerId) : undefined
-
-        const startSize = header ? header.getWidth() : column.getWidth()
-
-        const columnSizingStart: [string, number][] = header
-          ? header.getLeafHeaders().map(d => [d.column.id, d.getWidth()])
-          : [[column.id, column.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.round(
-                  Math.max(headerWidth + headerWidth * deltaPercentage, 0) * 100
-                ) / 100
-            })
-
-            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,
-          deltaOffset: 0,
-          deltaPercentage: 0,
-          columnSizingStart,
-          isResizingColumn: 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<TGenerics extends PartialGenerics>(
-  column: Column<TGenerics>,
-  instance: TableInstance<TGenerics>
-): ColumnSizingColumn<TGenerics> {
-  return {
-    getIsResizing: () => instance.getColumnIsResizing(column.id),
-    getCanResize: () => instance.getColumnCanResize(column.id),
-    resetSize: () => instance.resetColumnSize(column.id),
-  }
-}
-
-export function createHeader<TGenerics extends PartialGenerics>(
-  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),
-    getResizerProps: userProps =>
-      instance.getHeaderResizerProps(header.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'
-}