@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
32 lines (31 loc) • 2.04 kB
TypeScript
import type { ReactTableHooks } from '../types/index.js';
/**
* Computes the projected column width after a resize drag.
*
* Uses the same percentage-based formula as react-table's `columnResizing` reducer:
* the drag delta is expressed as a percentage of the original column width, then
* applied multiplicatively. RTL inverts the delta direction.
*/
export declare function getProjectedWidth(rawDeltaX: number, originalWidth: number, isRtl: boolean): number;
/**
* UI5WCR custom column resizing plugin — a fork of react-table v7's useResizeColumns hook.
* Original source: https://github.com/TanStack/table/blob/v7/src/plugin-hooks/useResizeColumns.js
*
* This is a fork of react-table's `useResizeColumns` with the following changes:
* - Deferred resize: CSS transform feedback during drag (zero renders), single state dispatch on mouseup
* - RTL delta inversion inlined into the reducer (previously handled in `stateReducer.ts`)
* - Removed `columnWidth` from reducer state destructuring — uses per-header width via `getProjectedWidth`
* - Removed `ensurePluginOrder` check for `useAbsoluteLayout` (not used by AnalyticalTable)
* - Removed `getLeafHeaders` (AnalyticalTable does not support grouped column headers)
* - Moved `getHeaderProps` inline `position: relative` style to `.th` in `AnalyticalTable.module.css`
* - Added `e.preventDefault()` on mousedown to prevent text selection in Firefox during drag
* - Split mouse/touch into separate branches (touch needs `{ passive: false }` for `preventDefault()`)
* - Added 3px dead zone and `data-active-resizer` attribute for double-click compatibility
* - Removed `cursor: col-resize` style (AnalyticalTable provides its own resizer styling)
* - Clamped resize width to `minWidth`/`maxWidth` in both the visual drag and the reducer (original clamps to 0)
* - Fixed falsy `0` bug: replaced `||` with `??` in `useInstanceBeforeDimensions` width assignment
*/
export declare const useColumnResizing: {
(hooks: ReactTableHooks): void;
pluginName: string;
};