@tanstack/react-table 8.0.0-alpha.8 → 8.0.0-alpha.83

package/src/createTable.tsx

@@ -1,244 +0,0 @@
-import * as React from 'react'
-import { useSyncExternalStore } from 'use-sync-external-store/shim'
-import { Cell, Column, Row } from '.'
-import { createTableInstance } from './core'
-import {
-  ReactTable,
-  ColumnDef,
-  AccessorFn,
-  Options,
-  Renderable,
-  Header,
-} from './types'
-import { Overwrite } from './utils'
-
-export type TableHelper<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
-> = {
-  RowType<TTData>(): TableHelper<
-    TTData,
-    TValue,
-    TFilterFns,
-    TSortingFns,
-    TAggregationFns
-  >
-
-  FilterFns: <TTFilterFns>(
-    filterFns: TTFilterFns
-  ) => TableHelper<TData, TValue, TTFilterFns, TSortingFns, TAggregationFns>
-
-  SortingFns: <TTSortingFns>(
-    sortingFns: TTSortingFns
-  ) => TableHelper<TData, TValue, TFilterFns, TTSortingFns, TAggregationFns>
-
-  AggregationFns: <TTAggregationFns>(
-    aggregationFns: TTAggregationFns
-  ) => TableHelper<TData, TValue, TFilterFns, TSortingFns, TTAggregationFns>
-
-  createColumns: (
-    columns: ColumnDef<
-      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>
-
-  createDataColumn: <TAccessor extends AccessorFn<TData> | keyof TData>(
-    accessor: TAccessor,
-    column: TAccessor extends (...args: any[]) => any
-      ? // Accessor Fn
-        Overwrite<
-          ColumnDef<
-            TData,
-            ReturnType<TAccessor>,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          {
-            __generated?: never
-            accessorFn?: never
-            accessorKey?: never
-            id: string
-          }
-        >
-      : TAccessor extends keyof TData
-      ? // Accessor Key
-        Overwrite<
-          ColumnDef<
-            TData,
-            TData[TAccessor],
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          {
-            __generated?: never
-            accessorFn?: never
-            accessorKey?: never
-            id?: string
-          }
-        >
-      : never
-  ) => ColumnDef<
-    TData,
-    TAccessor extends (...args: any[]) => any
-      ? ReturnType<TAccessor>
-      : TAccessor extends keyof TData
-      ? TData[TAccessor]
-      : never,
-    TFilterFns,
-    TSortingFns,
-    TAggregationFns
-  >
-
-  useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
-    options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-  ) => ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-
-  types: {
-    instance: ReactTable<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
-    columnDef: ColumnDef<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
-    column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-    row: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-    cell: Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-  }
-}
-
-export function createTable<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
->(): TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
-  return {
-    RowType: () => createTable(),
-    FilterFns: () => createTable(),
-    SortingFns: () => createTable(),
-    AggregationFns: () => createTable(),
-    createColumns: columns => columns,
-    createDisplayColumn: column => ({
-      ...column,
-      __generated: true,
-    }),
-    createGroup: column => ({
-      ...column,
-      __generated: true,
-    }),
-    createDataColumn: (accessor, column) => {
-      column = {
-        ...column,
-        id: column.id,
-      }
-
-      if (typeof accessor === 'string') {
-        return {
-          ...column,
-          id: column.id ?? accessor,
-          accessorKey: accessor,
-          __generated: true,
-        }
-      }
-
-      if (typeof accessor === 'function') {
-        return {
-          ...column,
-          accessorFn: accessor,
-          __generated: true,
-        }
-      }
-
-      throw new Error('Invalid accessor')
-    },
-    useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
-      options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-    ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
-      const [instance] = React.useState(() =>
-        createTableInstance<
-          TData,
-          TValue,
-          TFilterFns,
-          TSortingFns,
-          TAggregationFns
-        >(options)
-      )
-
-      useSyncExternalStore(instance.subscribe, () => instance.internalState)
-
-      instance.updateOptions(options)
-
-      return instance
-    },
-    types: undefined as any,
-  } as TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-}

package/src/features/ColumnSizing.ts

@@ -1,453 +0,0 @@
-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'
-}