@snack-uikit/table 0.8.9 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.9.0 (2024-01-16)
+
+
+### Features
+
+* **FF-4093:** table columns resizing ([8cae511](https://github.com/cloud-ru-tech/snack-uikit/commit/8cae5116f73f079ce3087099253390f2e79034fe))
+
+
+
+
+
 ## 0.8.9 (2023-12-29)
 
 

package/README.md

@@ -6,11 +6,7 @@
 [Changelog](./CHANGELOG.md)
 
 ## TODO:
-  - resize columns
-  - export data
-  - loading state
   - multiple row selection with Shift key pressed
-  - try to make the table independent of height
 
 
 ## Примечание
@@ -139,6 +135,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
 | size | `number` | - | Размер ячейки |
 | header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
+| enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## Table.getRowActionsColumnDef
 Вспомогательная функция для создания ячейки с дополнительными действиями у строки
 ### Props

package/dist/components/Table/Table.js

@@ -70,6 +70,8 @@ export function Table(_a) {
         pageCount,
         defaultColumn: {
             enableSorting: false,
+            enableResizing: false,
+            minSize: 40,
         },
         globalFilterFn: fuzzyFilter,
         onGlobalFilterChange,
@@ -78,6 +80,7 @@ export function Table(_a) {
         enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
         enableFilters: true,
         getFilteredRowModel: getFilteredRowModel(),
+        enableColumnResizing: true,
         enableSorting: true,
         manualSorting: false,
         enableMultiSort: false,
@@ -111,10 +114,33 @@ export function Table(_a) {
             return;
         }
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
+    const columnSizeVars = useMemo(() => {
+        const originalColumnDefs = table._getColumnDefs();
+        const headers = table.getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
+            const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
+            const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+            let size = initSize;
+            if (header.column.getCanResize()) {
+                const currentSize = header.getSize();
+                const colDefSize = header.column.columnDef.size;
+                size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+            }
+            colSizes[`--table-column-${header.id}-size`] = size;
+            colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
+        }
+        return colSizes;
+        /* effect must be called only on columnSizingInfo.isResizingColumn changes
+          to reduce unnecessary recalculations */
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [table.getState().columnSizingInfo.isResizingColumn]);
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;
-    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/helperComponents/Cells/Cell.d.ts

@@ -3,7 +3,16 @@ import { DataAttributes } from '../types';
 export type CellProps = {
     children: ReactNode;
     onClick?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
     className?: string;
     style?: CSSProperties;
+    role?: 'cell' | 'columnheader';
 } & DataAttributes;
-export declare function Cell({ onClick, className, style, children, ...attributes }: CellProps): import("react/jsx-runtime").JSX.Element;
+export declare const Cell: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    onClick?: MouseEventHandler | undefined;
+    onMouseUp?: MouseEventHandler | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    role?: "cell" | "columnheader" | undefined;
+} & DataAttributes & import("react").RefAttributes<HTMLDivElement>>;

package/dist/helperComponents/Cells/Cell.js

@@ -11,10 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
+import { forwardRef } from 'react';
 import styles from './styles.module.css';
-export function Cell(_a) {
-    var { onClick, className, style, children } = _a, attributes = __rest(_a, ["onClick", "className", "style", "children"]);
+export const Cell = forwardRef((_a, ref) => {
+    var { onClick, onMouseUp, className, style, children, role = 'cell' } = _a, attributes = __rest(_a, ["onClick", "onMouseUp", "className", "style", "children", "role"]);
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    _jsx("div", Object.assign({ role: 'cell', onClick: onClick, className: cn(styles.tableCell, className), style: style }, attributes, { children: children })));
-}
+    _jsx("div", Object.assign({ role: role, onClick: onClick, onMouseUp: onMouseUp, className: cn(styles.tableCell, className), style: style, ref: ref }, attributes, { children: children })));
+});

package/dist/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -1,17 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
+import { useRef } from 'react';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { TEST_IDS } from '../../../constants';
 import { useCellSizes } from '../../hooks';
 import { Cell } from '../Cell';
 import { getSortingIcon } from './helpers';
+import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.css';
 export function HeaderCell({ header, className }) {
+    const cellRef = useRef(null);
     const isSortable = header.column.getCanSort();
+    const isResizable = header.column.getCanResize();
+    const isResizing = isResizable && header.column.getIsResizing();
     const sortDirection = isSortable && (header.column.getIsSorted() || undefined);
     const sortIcon = getSortingIcon(sortDirection);
+    const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
+    const isSomeColumnResizing = columnSizingInfo.isResizingColumn;
     const columnDef = header.column.columnDef;
     const style = useCellSizes(header);
-    return (_jsxs(Cell, { style: style, onClick: header.column.getToggleSortingHandler(), "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderSortIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }));
+    const sortingHandler = (e) => {
+        var _a;
+        if (isSomeColumnResizing)
+            return;
+        return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
+    };
+    return (_jsxs(Cell, { style: style, onMouseUp: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-resizing": isResizing || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/helperComponents/Cells/HeaderCell/ResizeHandle.d.ts

@@ -0,0 +1,8 @@
+import { Header } from '@tanstack/react-table';
+import { RefObject } from 'react';
+type ResizeHandleProps<TData> = {
+    header: Header<TData, unknown>;
+    cellRef: RefObject<HTMLDivElement>;
+};
+export declare function ResizeHandle<TData>({ header, cellRef }: ResizeHandleProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/Cells/HeaderCell/ResizeHandle.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import styles from './styles.module.css';
+function getResizeIndicatorOffset({ header, cellRef }) {
+    var _a;
+    const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
+    const { minSize, maxSize } = header.column.columnDef;
+    const { startSize, deltaOffset } = columnSizingInfo;
+    let offset = 0;
+    if (startSize !== null && deltaOffset !== null) {
+        const divElementSize = ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        const initSize = Math.max(startSize, divElementSize);
+        const limit = deltaOffset < 0 ? minSize : maxSize;
+        let deltaLimit = 0;
+        if (limit !== undefined && deltaOffset !== 0) {
+            deltaLimit = deltaOffset < 0 ? -(initSize - limit) : limit - initSize;
+            offset = deltaOffset < 0 ? Math.max(deltaOffset, deltaLimit) : Math.min(Math.abs(deltaOffset), deltaLimit);
+        }
+    }
+    return offset;
+}
+export function ResizeHandle({ header, cellRef }) {
+    const isResizing = header.column.getIsResizing();
+    const resizeHandler = header.getResizeHandler();
+    const offset = isResizing ? getResizeIndicatorOffset({ header, cellRef }) : 0;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.tableHeaderIcon, styles.tableHeaderResizeHandle), "data-resizing": isResizing || undefined, onMouseDown: resizeHandler, onTouchStart: resizeHandler }), isResizing && (_jsx("div", { className: styles.tableHeaderResizeIndicator, style: {
+                    transform: `translateX(${offset}px)`,
+                } }))] }));
+}

package/dist/helperComponents/Cells/HeaderCell/styles.module.css

@@ -1,8 +1,34 @@
+.tableHeaderResizeHandle{
+  cursor:ew-resize;
+  position:absolute;
+  z-index:1;
+  top:0;
+  right:0;
+  transform:translateX(50%);
+  width:var(--dimension-1m, 8px);
+  height:100%;
+  opacity:0;
+}
+.tableHeaderResizeHandle::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:50%;
+  transform:translateX(-50%);
+  width:var(--border-width-table, 1px);
+  height:100%;
+  background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.tableHeaderResizeHandle[data-resizing]{
+  opacity:0;
+}
+
 .tableHeaderCell{
   padding:var(--space-table-cell-padding, 8px);
   position:relative;
   display:flex;
   align-items:center;
+  justify-content:space-between;
   box-sizing:border-box;
   width:100%;
   background-color:inherit;
@@ -15,9 +41,12 @@
   left:50%;
   transform:translateX(-50%);
   width:calc(100% - var(--space-table-head-separator-padding, 8px) * 2);
-  height:1px;
+  height:var(--border-width-table, 1px);
   background-color:var(--sys-neutral-decor-default, #dedede);
 }
+.tableHeaderCell:hover .tableHeaderResizeHandle:not([data-resizing]){
+  opacity:1;
+}
 .tableHeaderCell[data-sortable]{
   cursor:pointer;
 }
@@ -32,6 +61,19 @@
 .tableHeaderCell[data-no-padding]::after{
   width:100%;
 }
+.tableHeaderCell[data-resizing]{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+}
+
+.tableHeaderCellMain{
+  overflow:auto;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+}
 
 .tableHeaderCellName{
   height:var(--size-table-head-name-layout, 24px);
@@ -42,12 +84,32 @@
   color:var(--sys-neutral-text-light, #898989);
 }
 
-.tableHeaderSortIcon{
+.tableHeaderIcon{
   display:flex;
   box-sizing:border-box;
   color:var(--sys-neutral-text-light, #898989);
 }
-.tableHeaderSortIcon svg{
+.tableHeaderIcon svg{
   width:var(--dimension-2m, 16px) !important;
   height:var(--dimension-2m, 16px) !important;
+}
+
+.tableHeaderResizeIndicator{
+  cursor:col-resize;
+  position:absolute;
+  z-index:2;
+  top:0;
+  right:0;
+  width:1px;
+  height:100%;
+  background-color:var(--sys-neutral-decor-activated, #b8b8b8);
+}
+.tableHeaderResizeIndicator::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  transform:translateX(-50%);
+  width:calc(100% + var(--dimension-4m, 32px));
+  height:100%;
 }

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.js

@@ -33,6 +33,7 @@ export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {
         },
         noBodyCellPadding: true,
         cellClassName: styles.rowActionsCell,
+        enableResizing: false,
         cell: cell => _jsx(RowActionsCell, { row: cell.row, actions: actionsGenerator(cell) }),
     };
 }

package/dist/helperComponents/Cells/SelectionCell/SelectionCell.js

@@ -30,6 +30,7 @@ export function getSelectionCellColumnDef() {
         noBodyCellPadding: true,
         size: 40,
         headerClassName: styles.selectionCellHeader,
+        enableResizing: false,
         cell: ({ row, table }) => {
             const disabled = !row.getCanSelect();
             if (disabled)

package/dist/helperComponents/Cells/StatusCell/StatusCell.d.ts

@@ -15,6 +15,7 @@ type StatusColumnDef = BaseStatusColumnDef & {
     renderDescription?: never;
     size?: never;
     header?: never;
+    enableResizing?: never;
 };
 type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
     /** Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса */
@@ -23,7 +24,9 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
     size: number;
     /** Заголовок колонки */
     header?: ColumnDefinition<TData>['header'];
+    /** Включение/выключение ресайза колонки */
+    enableResizing?: boolean;
 };
 export type StatusColumnDefinitionProps<TData> = StatusColumnDef | StatusColumnDefWithDescription<TData>;
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;
+export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, enableResizing, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/StatusCell/StatusCell.js

@@ -10,7 +10,7 @@ function StatusCell({ appearance, label }) {
     return (_jsxs("div", { className: styles.statusCell, "data-no-label": !label || undefined, children: [_jsx("div", { "data-appearance": isLoading ? undefined : appearance, className: styles.statusCellIndicator, "data-loading": isLoading || undefined, "data-test-id": TEST_IDS.statusIndicator }), label && (_jsx("div", { className: styles.statusCellLabel, "data-test-id": TEST_IDS.statusLabel, children: _jsx(Typography.LightLabelS, { children: _jsx(TruncateString, { text: label }) }) }))] }));
 }
 /** Вспомогательная функция для создания ячейки со статусом */
-export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, }) {
+export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, enableResizing, }) {
     const hasDescription = Boolean(renderDescription);
     return {
         id: 'snack_predefined_statusColumn',
@@ -26,6 +26,7 @@ export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance,
         accessorKey,
         enableSorting,
         header: hasDescription ? header : undefined,
+        enableResizing: enableResizing !== null && enableResizing !== void 0 ? enableResizing : hasDescription,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         accessorFn: (row) => renderDescription && Object.hasOwn(row, accessorKey)
             ? renderDescription(row[accessorKey])

package/dist/helperComponents/Rows/HeaderRow.js

@@ -7,5 +7,5 @@ import { Row } from './Row';
 import styles from './styles.module.css';
 export function HeaderRow() {
     const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
-    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, role: 'rowheader', children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))] }));
+    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))] }));
 }

package/dist/helperComponents/Rows/Row.d.ts

@@ -4,7 +4,6 @@ type RowProps = {
     children: ReactNode;
     onClick?(e: MouseEvent<HTMLDivElement>): void;
     className?: string;
-    role?: 'rowheader' | 'row';
 } & DataAttributes;
-export declare function Row({ onClick, role, children, className, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ onClick, children, className, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/helperComponents/Rows/Row.js

@@ -13,6 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import styles from './styles.module.css';
 export function Row(_a) {
-    var { onClick, role = 'row', children, className } = _a, attributes = __rest(_a, ["onClick", "role", "children", "className"]);
-    return (_jsx("div", Object.assign({ onClick: onClick, className: cn(styles.tableRow, className), role: role }, attributes, { children: children })));
+    var { onClick, children, className } = _a, attributes = __rest(_a, ["onClick", "children", "className"]);
+    return (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    _jsx("div", Object.assign({ onClick: onClick, className: cn(styles.tableRow, className), role: 'row' }, attributes, { children: children })));
 }

package/dist/helperComponents/hooks.d.ts

@@ -18,11 +18,8 @@ export declare function useRowCells<TData>(row: Row<TData>): {
     unpinned: Cell<TData, unknown>[];
 };
 export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>): {
-    width: number;
-    minWidth?: undefined;
-    maxWidth?: undefined;
-} | {
     minWidth: number | undefined;
-    width: number | undefined;
+    width: string;
     maxWidth: number | undefined;
+    flexShrink: string;
 };

package/dist/helperComponents/hooks.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useTableContext } from './contexts';
-import { getColumnId } from './helpers';
 function hasHeaders(groups) {
     return groups.some(group => group.headers.length);
 }
@@ -47,21 +46,15 @@ export function useRowCells(row) {
     }, [row, pinEnabled, columnDefs]);
 }
 export function useCellSizes(element) {
-    return useMemo(() => {
-        const column = element.column;
-        if (column.getIsPinned()) {
-            return {
-                width: column.getSize(),
-            };
-        }
-        const originalColumnDef = element
-            .getContext()
-            .table._getColumnDefs()
-            .find(col => getColumnId(col) === column.id);
-        return {
-            minWidth: (originalColumnDef === null || originalColumnDef === void 0 ? void 0 : originalColumnDef.size) || (originalColumnDef === null || originalColumnDef === void 0 ? void 0 : originalColumnDef.minSize) || column.columnDef.minSize,
-            width: originalColumnDef === null || originalColumnDef === void 0 ? void 0 : originalColumnDef.size,
-            maxWidth: (originalColumnDef === null || originalColumnDef === void 0 ? void 0 : originalColumnDef.maxSize) || column.columnDef.maxSize,
-        };
-    }, [element]);
+    const column = element.column;
+    const minWidth = column.columnDef.minSize;
+    const maxWidth = column.columnDef.maxSize;
+    const width = `var(--table-column-${column.id}-size)`;
+    const flexShrink = `var(--table-column-${column.id}-flex)`;
+    return useMemo(() => ({
+        minWidth,
+        width,
+        maxWidth,
+        flexShrink,
+    }), [flexShrink, maxWidth, minWidth, width]);
 }

package/dist/types.d.ts

@@ -6,7 +6,7 @@ import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
 import { Except } from './helperComponents';
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
-type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableResizing' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
+type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
     /** Заголовок колонки */
     header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
     /** Позиционирование контента ячейки в теле таблицы */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.8.9",
+  "version": "0.9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -46,10 +46,10 @@
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-table": "8.11.6",
     "classnames": "2.3.2",
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "39d8bb34b33858ad9fb3e401309e386e5b0f3d28"
+  "gitHead": "b8ffb981d1933d3798b28e05095f25538768ffd4"
 }

package/src/components/Table/Table.tsx

@@ -243,6 +243,8 @@ export function Table<TData extends object>({
 
     defaultColumn: {
       enableSorting: false,
+      enableResizing: false,
+      minSize: 40,
     },
 
     globalFilterFn: fuzzyFilter,
@@ -255,6 +257,8 @@ export function Table<TData extends object>({
     enableFilters: true,
     getFilteredRowModel: getFilteredRowModel(),
 
+    enableColumnResizing: true,
+
     enableSorting: true,
     manualSorting: false,
     enableMultiSort: false,
@@ -296,6 +300,36 @@ export function Table<TData extends object>({
     }
   }, [loading, rowSelectionProp?.multiRow, table]);
 
+  const columnSizeVars = useMemo(() => {
+    const originalColumnDefs = table._getColumnDefs();
+    const headers = table.getFlatHeaders();
+    const colSizes: { [key: string]: string } = {};
+
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
+      const originalColumnDefSize = originalColDef?.size;
+      const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+
+      let size = initSize;
+
+      if (header.column.getCanResize()) {
+        const currentSize = header.getSize();
+        const colDefSize = header.column.columnDef.size;
+
+        size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+      }
+
+      colSizes[`--table-column-${header.id}-size`] = size;
+      colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
+    }
+
+    return colSizes;
+    /* effect must be called only on columnSizingInfo.isResizingColumn changes
+      to reduce unnecessary recalculations */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table.getState().columnSizingInfo.isResizingColumn]);
+
   const tableRows = table.getRowModel().rows;
   const loadingTableRows = loadingTable.getRowModel().rows;
   const tablePagination = table.getState().pagination;
@@ -336,7 +370,7 @@ export function Table<TData extends object>({
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
           <Scroll size='s' className={styles.table}>
-            <div className={styles.tableContent}>
+            <div className={styles.tableContent} style={columnSizeVars}>
               <TableContext.Provider value={{ table }}>
                 {loading ? (
                   <SkeletonContextProvider loading>

package/src/helperComponents/Cells/Cell.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { CSSProperties, forwardRef, MouseEventHandler, ReactNode } from 'react';
 
 import { DataAttributes } from '../types';
 import styles from './styles.module.scss';
@@ -7,15 +7,25 @@ import styles from './styles.module.scss';
 export type CellProps = {
   children: ReactNode;
   onClick?: MouseEventHandler;
+  onMouseUp?: MouseEventHandler;
   className?: string;
   style?: CSSProperties;
+  role?: 'cell' | 'columnheader';
 } & DataAttributes;
 
-export function Cell({ onClick, className, style, children, ...attributes }: CellProps) {
-  return (
+export const Cell = forwardRef<HTMLDivElement, CellProps>(
+  ({ onClick, onMouseUp, className, style, children, role = 'cell', ...attributes }, ref) => (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div role='cell' onClick={onClick} className={cn(styles.tableCell, className)} style={style} {...attributes}>
+    <div
+      role={role}
+      onClick={onClick}
+      onMouseUp={onMouseUp}
+      className={cn(styles.tableCell, className)}
+      style={style}
+      ref={ref}
+      {...attributes}
+    >
       {children}
     </div>
-  );
-}
+  ),
+);

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -1,5 +1,6 @@
 import { flexRender, Header } from '@tanstack/react-table';
 import cn from 'classnames';
+import { MouseEvent, useRef } from 'react';
 
 import { TruncateString } from '@snack-uikit/truncate-string';
 
@@ -8,6 +9,7 @@ import { ColumnDefinition } from '../../../types';
 import { useCellSizes } from '../../hooks';
 import { Cell, CellProps } from '../Cell';
 import { getSortingIcon } from './helpers';
+import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.scss';
 
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
@@ -15,39 +17,59 @@ type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' |
 };
 
 export function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>) {
+  const cellRef = useRef<HTMLDivElement>(null);
   const isSortable = header.column.getCanSort();
+  const isResizable = header.column.getCanResize();
+  const isResizing = isResizable && header.column.getIsResizing();
+
   const sortDirection = isSortable && (header.column.getIsSorted() || undefined);
   const sortIcon = getSortingIcon(sortDirection);
 
+  const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
+  const isSomeColumnResizing = columnSizingInfo.isResizingColumn;
+
   const columnDef: ColumnDefinition<TData> = header.column.columnDef;
 
   const style = useCellSizes(header);
 
+  const sortingHandler = (e: MouseEvent<HTMLDivElement>) => {
+    if (isSomeColumnResizing) return;
+
+    return header.column.getToggleSortingHandler()?.(e);
+  };
+
   return (
     <Cell
       style={style}
-      onClick={header.column.getToggleSortingHandler()}
+      onMouseUp={sortingHandler}
       data-sortable={isSortable || undefined}
       data-no-padding={columnDef.noHeaderCellPadding || undefined}
       data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
       data-test-id={TEST_IDS.headerCell}
+      data-resizing={isResizing || undefined}
+      role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
+      ref={cellRef}
     >
-      {columnDef.header && (
-        <div className={styles.tableHeaderCellName}>
-          <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
-        </div>
-      )}
-
-      {Boolean(sortIcon) && (
-        <div
-          className={styles.tableHeaderSortIcon}
-          data-sort-direction={sortDirection}
-          data-test-id={TEST_IDS.headerSortIndicator}
-        >
-          {sortIcon}
-        </div>
-      )}
+      <div className={styles.tableHeaderCellMain}>
+        {columnDef.header && (
+          <div className={styles.tableHeaderCellName}>
+            <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
+          </div>
+        )}
+
+        {Boolean(sortIcon) && (
+          <div
+            className={styles.tableHeaderIcon}
+            data-sort-direction={sortDirection}
+            data-test-id={TEST_IDS.headerSortIndicator}
+          >
+            {sortIcon}
+          </div>
+        )}
+      </div>
+
+      {Boolean(isResizable) && <ResizeHandle header={header} cellRef={cellRef} />}
     </Cell>
   );
 }

package/src/helperComponents/Cells/HeaderCell/ResizeHandle.tsx

@@ -0,0 +1,63 @@
+import { Header } from '@tanstack/react-table';
+import cn from 'classnames';
+import { RefObject } from 'react';
+
+import styles from './styles.module.scss';
+
+type ResizeHandleProps<TData> = {
+  header: Header<TData, unknown>;
+  cellRef: RefObject<HTMLDivElement>;
+};
+
+function getResizeIndicatorOffset<TData>({ header, cellRef }: ResizeHandleProps<TData>) {
+  const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
+
+  const { minSize, maxSize } = header.column.columnDef;
+  const { startSize, deltaOffset } = columnSizingInfo;
+
+  let offset = 0;
+
+  if (startSize !== null && deltaOffset !== null) {
+    const divElementSize = cellRef.current?.offsetWidth || 0;
+    const initSize = Math.max(startSize, divElementSize);
+
+    const limit = deltaOffset < 0 ? minSize : maxSize;
+    let deltaLimit = 0;
+
+    if (limit !== undefined && deltaOffset !== 0) {
+      deltaLimit = deltaOffset < 0 ? -(initSize - limit) : limit - initSize;
+
+      offset = deltaOffset < 0 ? Math.max(deltaOffset, deltaLimit) : Math.min(Math.abs(deltaOffset), deltaLimit);
+    }
+  }
+
+  return offset;
+}
+
+export function ResizeHandle<TData>({ header, cellRef }: ResizeHandleProps<TData>) {
+  const isResizing = header.column.getIsResizing();
+  const resizeHandler = header.getResizeHandler();
+
+  const offset = isResizing ? getResizeIndicatorOffset({ header, cellRef }) : 0;
+
+  return (
+    <>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className={cn(styles.tableHeaderIcon, styles.tableHeaderResizeHandle)}
+        data-resizing={isResizing || undefined}
+        onMouseDown={resizeHandler}
+        onTouchStart={resizeHandler}
+      />
+
+      {isResizing && (
+        <div
+          className={styles.tableHeaderResizeIndicator}
+          style={{
+            transform: `translateX(${offset}px)`,
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -1,6 +1,39 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
+.tableHeaderResizeHandle {
+  cursor: ew-resize;
+
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  transform: translateX(50%);
+
+  width: $dimension-1m;
+  height: 100%;
+
+  opacity: 0;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
+    width: $border-width-table;
+    height: 100%;
+
+    background-color: $sys-neutral-decor-hovered;
+  }
+
+  &[data-resizing] {
+    opacity: 0;
+  }
+}
+
 .tableHeaderCell {
   @include composite-var($table-head-column);
 
@@ -8,6 +41,7 @@
 
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   box-sizing: border-box;
   width: 100%;
@@ -24,11 +58,17 @@
     transform: translateX(-50%);
 
     width: calc(100% - $space-table-head-separator-padding * 2);
-    height: 1px;
+    height: $border-width-table;
 
     background-color: $sys-neutral-decor-default;
   }
 
+  &:hover {
+    .tableHeaderResizeHandle:not([data-resizing]) {
+      opacity: 1;
+    }
+  }
+
   &[data-sortable] {
     cursor: pointer;
   }
@@ -48,6 +88,19 @@
       width: 100%;
     }
   }
+
+  &[data-resizing] {
+    user-select: none;
+  }
+}
+
+.tableHeaderCellMain {
+  overflow: auto;
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  min-width: 0;
 }
 
 .tableHeaderCellName {
@@ -62,7 +115,7 @@
   color: simple-var($sys-neutral-text-light);
 }
 
-.tableHeaderSortIcon {
+.tableHeaderIcon {
   display: flex;
   box-sizing: border-box;
   color: simple-var($sys-neutral-text-light);
@@ -72,3 +125,29 @@
     height: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+
+.tableHeaderResizeIndicator {
+  cursor: col-resize;
+
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+
+  width: 1px;
+  height: 100%;
+
+  background-color: $sys-neutral-decor-activated;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-50%);
+
+    width: calc(100% + $dimension-4m);
+    height: 100%;
+  }
+}

package/src/helperComponents/Cells/RowActionsCell/RowActionsCell.tsx

@@ -116,6 +116,7 @@ export function getRowActionsColumnDef<TData>({
     },
     noBodyCellPadding: true,
     cellClassName: styles.rowActionsCell,
+    enableResizing: false,
     cell: cell => <RowActionsCell row={cell.row} actions={actionsGenerator(cell)} />,
   };
 }

package/src/helperComponents/Cells/SelectionCell/SelectionCell.tsx

@@ -34,6 +34,7 @@ export function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData> {
     noBodyCellPadding: true,
     size: 40,
     headerClassName: styles.selectionCellHeader,
+    enableResizing: false,
     cell: ({ row, table }) => {
       const disabled = !row.getCanSelect();
 

package/src/helperComponents/Cells/StatusCell/StatusCell.tsx

@@ -29,6 +29,7 @@ type StatusColumnDef = BaseStatusColumnDef & {
   renderDescription?: never;
   size?: never;
   header?: never;
+  enableResizing?: never;
 };
 
 type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
@@ -38,6 +39,8 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
   size: number;
   /** Заголовок колонки */
   header?: ColumnDefinition<TData>['header'];
+  /** Включение/выключение ресайза колонки */
+  enableResizing?: boolean;
 };
 
 export type StatusColumnDefinitionProps<TData> = StatusColumnDef | StatusColumnDefWithDescription<TData>;
@@ -73,6 +76,7 @@ export function getStatusColumnDef<TData>({
   renderDescription,
   size,
   enableSorting,
+  enableResizing,
 }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData> {
   const hasDescription = Boolean(renderDescription);
 
@@ -90,6 +94,7 @@ export function getStatusColumnDef<TData>({
     accessorKey,
     enableSorting,
     header: hasDescription ? header : undefined,
+    enableResizing: enableResizing ?? hasDescription,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     accessorFn: (row: any) =>
       renderDescription && Object.hasOwn(row as object, accessorKey)

package/src/helperComponents/Rows/HeaderRow.tsx

@@ -9,7 +9,7 @@ export function HeaderRow() {
   const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
 
   return (
-    <Row className={styles.tableHeader} data-test-id={TEST_IDS.headerRow} role='rowheader'>
+    <Row className={styles.tableHeader} data-test-id={TEST_IDS.headerRow}>
       {leftPinned && (
         <PinnedCells position={COLUMN_PIN_POSITION.Left}>
           {leftPinned.map(headerGroup =>

package/src/helperComponents/Rows/Row.tsx

@@ -8,12 +8,12 @@ type RowProps = {
   children: ReactNode;
   onClick?(e: MouseEvent<HTMLDivElement>): void;
   className?: string;
-  role?: 'rowheader' | 'row';
 } & DataAttributes;
 
-export function Row({ onClick, role = 'row', children, className, ...attributes }: RowProps) {
+export function Row({ onClick, children, className, ...attributes }: RowProps) {
   return (
-    <div onClick={onClick} className={cn(styles.tableRow, className)} role={role} {...attributes}>
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    <div onClick={onClick} className={cn(styles.tableRow, className)} role='row' {...attributes}>
       {children}
     </div>
   );

package/src/helperComponents/hooks.ts

@@ -2,7 +2,6 @@ import { Cell, Header, HeaderGroup, Row } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
 import { useTableContext } from './contexts';
-import { getColumnId } from './helpers';
 
 function hasHeaders<TData>(groups: HeaderGroup<TData>[]) {
   return groups.some(group => group.headers.length);
@@ -61,24 +60,20 @@ export function useRowCells<TData>(row: Row<TData>) {
 }
 
 export function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>) {
-  return useMemo(() => {
-    const column = element.column;
-
-    if (column.getIsPinned()) {
-      return {
-        width: column.getSize(),
-      };
-    }
-
-    const originalColumnDef = element
-      .getContext()
-      .table._getColumnDefs()
-      .find(col => getColumnId(col) === column.id);
-
-    return {
-      minWidth: originalColumnDef?.size || originalColumnDef?.minSize || column.columnDef.minSize,
-      width: originalColumnDef?.size,
-      maxWidth: originalColumnDef?.maxSize || column.columnDef.maxSize,
-    };
-  }, [element]);
+  const column = element.column;
+
+  const minWidth = column.columnDef.minSize;
+  const maxWidth = column.columnDef.maxSize;
+  const width = `var(--table-column-${column.id}-size)`;
+  const flexShrink = `var(--table-column-${column.id}-flex)`;
+
+  return useMemo(
+    () => ({
+      minWidth,
+      width,
+      maxWidth,
+      flexShrink,
+    }),
+    [flexShrink, maxWidth, minWidth, width],
+  );
 }

package/src/types.ts

@@ -25,7 +25,6 @@ type BaseColumnDefinition<TData> = Except<
   | 'footer'
   | 'enablePinning'
   | 'enableGrouping'
-  | 'enableResizing'
   | 'enableColumnFilter'
   | 'filterFn'
   | 'enableGlobalFilter'