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

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 {

package/src/features/withColumnResizing.oldts

@@ -1,281 +0,0 @@
-import React, {
-  ComponentProps,
-  MouseEvent as ReactMouseEvent,
-  PropsWithoutRef,
-  PropsWithRef,
-  TouchEvent as ReactTouchEvent,
-} from 'react'
-
-import { getLeafHeaders, makeStateUpdater } from '../utils'
-
-import { withColumnResizing as name, withColumnVisibility } from '../Constants'
-import {
-  ColumnId,
-  ColumnResizing,
-  ReduceColumn,
-  ReduceHeader,
-  Header,
-  MakeInstance,
-  GetDefaultOptions,
-} from '../types'
-
-let passiveSupported: boolean | null = null
-
-export function passiveEventSupported() {
-  // memoize support to avoid adding multiple test events
-  if (typeof passiveSupported === 'boolean') return passiveSupported
-
-  let supported = false
-  try {
-    const options = {
-      get passive() {
-        supported = true
-        return false
-      },
-    }
-
-    window.addEventListener('test', noop, options)
-    window.removeEventListener('test', noop)
-  } catch (err) {
-    supported = false
-  }
-  passiveSupported = supported
-  return passiveSupported
-}
-
-const getDefaultOptions: GetDefaultOptions = options => {
-  return {
-    onColumnResizingChange: React.useCallback(
-      makeStateUpdater('columnResizing'),
-      []
-    ),
-    ...options,
-    initialState: {
-      columnResizing: {
-        columnWidths: {},
-      },
-      ...options.initialState,
-    },
-  }
-}
-
-const extendInstance: MakeInstance = instance => {
-  instance.setColumnResizing = React.useCallback(
-    updater => instance.options.onColumnResizingChange?.(updater, instance),
-    [instance]
-  )
-
-  instance.getColumnCanResize = React.useCallback(
-    columnId => {
-      const column = instance.allColumns.find(d => d.id === columnId)
-
-      if (!column) return false
-
-      return (
-        (column.disableResizing ? false : undefined) ??
-        (instance.options?.disableResizing ? false : undefined) ??
-        column.defaultCanResize ??
-        true
-      )
-    },
-    [instance.allColumns, instance.options.disableResizing]
-  )
-
-  instance.getColumnWidth = React.useCallback(
-    columnId => {
-      if (!columnId) return 0
-      const { allColumns } = instance
-      const column = allColumns.find(d => d.id === columnId)
-      const columnWidths = instance.state.columnResizing?.columnWidths
-
-      if (!column) return 0
-
-      return Math.min(
-        Math.max(
-          column?.minWidth ?? 0,
-          (columnWidths?.[columnId] ?? 0) || (column.width ?? 0)
-        ),
-        column.maxWidth ?? 0
-      )
-    },
-    [instance]
-  )
-
-  const isResizingColumn = instance.state.columnResizing?.isResizingColumn
-  instance.getColumnIsResizing = React.useCallback(
-    columnId => {
-      return isResizingColumn === columnId
-    },
-    [isResizingColumn]
-  )
-
-  return instance
-}
-
-const reduceColumn: ReduceColumn = (column, { instance }) => {
-  column.getIsResizing = () => instance.getColumnIsResizing(column.id)
-  column.getCanResize = () => instance.getColumnCanResize(column.id)
-
-  return column
-}
-
-const reduceHeader: ReduceHeader = (header, { instance }) => {
-  header.getIsResizing = () =>
-    header?.column?.getIsResizing ? header.column.getIsResizing() : true
-  header.getCanResize = () =>
-    header?.column?.getCanResize ? header.column.getCanResize() : true
-
-  function isTouchStartEvent(
-    e: ReactTouchEvent | ReactMouseEvent
-  ): e is ReactTouchEvent {
-    return e.type === 'touchstart'
-  }
-
-  header.getResizerProps = (props = {}) => {
-    const onResizeStart = (
-      e: ReactMouseEvent | ReactTouchEvent,
-      header: Header
-    ) => {
-      if (isTouchStartEvent(e)) {
-        // lets not respond to multiple touches (e.g. 2 or 3 fingers)
-        if (e.touches && e.touches.length > 1) {
-          return
-        }
-      }
-      const headersToResize = getLeafHeaders(header)
-      const headerIdWidths: [ColumnId, number][] = headersToResize.map(d => [
-        d.id,
-        d.getWidth(),
-      ])
-
-      const clientX = isTouchStartEvent(e)
-        ? Math.round(e.touches[0].clientX)
-        : e.clientX
-
-      const onMove = (clientXPos?: number) => {
-        if (typeof clientXPos !== 'number') {
-          return
-        }
-
-        return instance.setColumnResizing(old => {
-          const deltaX = clientXPos - (old?.startX ?? 0)
-          const percentageDeltaX = Math.max(
-            deltaX / (old?.columnWidth ?? 0),
-            -0.999999
-          )
-
-          const newColumnWidths: ColumnResizing['columnWidths'] = {}
-          ;(old?.headerIdWidths ?? []).forEach(([headerId, headerWidth]) => {
-            newColumnWidths[headerId] = Math.max(
-              headerWidth + headerWidth * percentageDeltaX,
-              0
-            )
-          })
-
-          return {
-            ...old,
-            columnWidths: {
-              ...(old?.columnWidths ?? {}),
-              ...newColumnWidths,
-            },
-          }
-        })
-      }
-
-      const onEnd = () =>
-        instance.setColumnResizing(old => ({
-          ...old,
-          startX: null,
-          isResizingColumn: false,
-        }))
-
-      const mouseEvents = {
-        moveHandler: (e: MouseEvent) => onMove(e.clientX),
-        upHandler: () => {
-          document.removeEventListener('mousemove', mouseEvents.moveHandler)
-          document.removeEventListener('mouseup', mouseEvents.upHandler)
-          onEnd()
-        },
-      }
-
-      const touchEvents = {
-        moveHandler: (e: TouchEvent) => {
-          if (e.cancelable) {
-            e.preventDefault()
-            e.stopPropagation()
-          }
-          onMove(e.touches[0].clientX)
-          return false
-        },
-        upHandler: () => {
-          document.removeEventListener('touchmove', touchEvents.moveHandler)
-          document.removeEventListener('touchend', touchEvents.upHandler)
-          onEnd()
-        },
-      }
-
-      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.setColumnResizing(old => ({
-        ...old,
-        startX: clientX,
-        headerIdWidths,
-        columnWidth: header.getWidth(),
-        isResizingColumn: header.id,
-      }))
-    }
-
-    return {
-      onMouseDown: (e: ReactMouseEvent) => {
-        e.persist()
-        onResizeStart(e, header)
-      },
-      onTouchStart: (e: ReactTouchEvent) => {
-        e.persist()
-        onResizeStart(e, header)
-      },
-      draggable: false,
-      role: 'separator',
-      ...props,
-    }
-  }
-
-  return header
-}
-
-export const withColumnResizing = {
-  name,
-  after: [withColumnVisibility],
-  plugs: {
-    getDefaultOptions,
-    extendInstance,
-    reduceColumn,
-    reduceHeader,
-  },
-}