chore: split column sizing and resizing features

Author: KevinVandy

packages/table-core/src/core/table.ts

@@ -28,6 +28,7 @@ import { ColumnFiltering } from '../features/column-filtering/ColumnFiltering'
 import { ColumnGrouping } from '../features/column-grouping/ColumnGrouping'
 import { ColumnOrdering } from '../features/column-ordering/ColumnOrdering'
 import { ColumnPinning } from '../features/column-pinning/ColumnPinning'
+import { ColumnResizing } from '../features/column-resizing/ColumnResizing'
 import { ColumnSizing } from '../features/column-sizing/ColumnSizing'
 import { ColumnVisibility } from '../features/column-visibility/ColumnVisibility'
 import { GlobalFaceting } from '../features/global-faceting/GlobalFaceting'
@@ -54,6 +55,7 @@ const builtInFeatures = [
   RowPinning,
   RowSelection,
   ColumnSizing,
+  ColumnResizing,
 ] as const
 
 //

packages/table-core/src/features/column-resizing/ColumnResizing.ts

@@ -0,0 +1,59 @@
+import { RowData, Column, Header, Table, TableFeature } from '../../types'
+import { makeStateUpdater } from '../../utils'
+import {
+  ColumnResizingDefaultOptions,
+  ColumnResizingTableState,
+} from './ColumnResizing.types'
+import {
+  column_getCanResize,
+  column_getIsResizing,
+  getDefaultColumnSizingInfoState,
+  header_getResizeHandler,
+  table_resetHeaderSizeInfo,
+  table_setColumnSizingInfo,
+} from './ColumnResizing.utils'
+
+export const ColumnResizing: TableFeature = {
+  _getInitialState: (state): ColumnResizingTableState => {
+    return {
+      columnSizing: {},
+      columnSizingInfo: getDefaultColumnSizingInfoState(),
+      ...state,
+    }
+  },
+
+  _getDefaultOptions: <TData extends RowData>(
+    table: Table<TData>
+  ): ColumnResizingDefaultOptions => {
+    return {
+      columnResizeMode: 'onEnd',
+      columnResizeDirection: 'ltr',
+      onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', table),
+    }
+  },
+
+  _createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
+    table: Table<TData>
+  ): void => {
+    column.getCanResize = () => column_getCanResize(table, column)
+
+    column.getIsResizing = () => column_getIsResizing(table, column)
+  },
+
+  _createHeader: <TData extends RowData, TValue>(
+    header: Header<TData, TValue>,
+    table: Table<TData>
+  ): void => {
+    header.getResizeHandler = _contextDocument =>
+      header_getResizeHandler(header, table, _contextDocument)
+  },
+
+  _createTable: <TData extends RowData>(table: Table<TData>): void => {
+    table.setColumnSizingInfo = updater =>
+      table_setColumnSizingInfo(table, updater)
+
+    table.resetHeaderSizeInfo = defaultState =>
+      table_resetHeaderSizeInfo(table, defaultState)
+  },
+}

packages/table-core/src/features/column-resizing/ColumnResizing.types.ts

@@ -0,0 +1,102 @@
+import { OnChangeFn, Updater } from '../../types'
+
+export interface ColumnResizingTableState {
+  columnSizingInfo: ColumnResizingInfoState
+}
+
+export interface ColumnResizingInfoState {
+  columnSizingStart: [string, number][]
+  deltaOffset: null | number
+  deltaPercentage: null | number
+  isResizingColumn: false | string
+  startOffset: null | number
+  startSize: null | number
+}
+
+export type ColumnResizeMode = 'onChange' | 'onEnd'
+
+export type ColumnResizeDirection = 'ltr' | 'rtl'
+
+export interface ColumnResizingOptions {
+  /**
+   * Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#columnresizemode)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  columnResizeMode?: ColumnResizeMode
+  /**
+   * Enables or disables column resizing for the column.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#enablecolumnresizing)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  enableColumnResizing?: boolean
+  /**
+   * Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#columnResizeDirection)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  columnResizeDirection?: ColumnResizeDirection
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnSizingInfo` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizingInfo` from your own managed state.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#oncolumnsizinginfochange)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  onColumnSizingInfoChange?: OnChangeFn<ColumnResizingInfoState>
+}
+
+export type ColumnResizingDefaultOptions = Pick<
+  ColumnResizingOptions,
+  'columnResizeMode' | 'onColumnSizingInfoChange' | 'columnResizeDirection'
+>
+
+export interface ColumnResizingInstance {
+  /**
+   * Resets column sizing info to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#resetheadersizeinfo)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  resetHeaderSizeInfo: (defaultState?: boolean) => void
+  /**
+   * Sets the column sizing info state using an updater function or a value. This will trigger the underlying `onColumnSizingInfoChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#setcolumnsizinginfo)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  setColumnSizingInfo: (updater: Updater<ColumnResizingInfoState>) => void
+}
+
+export interface ColumnResizingColumnDef {
+  /**
+   * Enables or disables column resizing for the column.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#enableresizing)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  enableResizing?: boolean
+}
+
+export interface ColumnResizingColumn {
+  /**
+   * Returns `true` if the column can be resized.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#getcanresize)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  getCanResize: () => boolean
+  /**
+   * Returns `true` if the column is currently being resized.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#getisresizing)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  getIsResizing: () => boolean
+}
+
+export interface ColumnResizingHeader {
+  /**
+   * Returns an event handler function that can be used to resize the header. It can be used as an:
+   * - `onMouseDown` handler
+   * - `onTouchStart` handler
+   *
+   * The dragging and release events are automatically handled for you.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#getresizehandler)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  getResizeHandler: (context?: Document) => (event: unknown) => void
+}