ydb-embedded-ui 6.1.0 → 6.2.1

package/dist/components/DateRange/DateRange.scss

@@ -1,11 +1,18 @@
 .date-range {
     &__input {
         min-width: 190px;
+        height: 28px;
         padding: 5px 8px;
 
         color: var(--g-color-text-primary);
         border: 1px solid var(--g-color-line-generic);
         border-radius: var(--g-border-radius-m);
+        outline: none;
         background: transparent;
     }
+
+    &__input:focus,
+    &__input:focus-visible {
+        border: 1px solid var(--g-color-line-generic-hover);
+    }
 }

package/dist/components/EntityStatus/EntityStatus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EFlag } from '../../types/api/enums';
 import type { StatusIconMode, StatusIconSize } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
@@ -15,6 +16,7 @@ interface EntityStatusProps {
     hasClipboardButton?: boolean;
     clipboardButtonAlwaysVisible?: boolean;
     className?: string;
+    additionalControls?: React.ReactNode;
 }
-export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, additionalControls, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link as UIKitLink } from '@gravity-ui/uikit';
-import { Link } from 'react-router-dom';
 import { EFlag } from '../../types/api/enums';
 import { cn } from '../../utils/cn';
 import { ClipboardButton } from '../ClipboardButton';
+import { InternalLink } from '../InternalLink/InternalLink';
 import { StatusIcon } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
 const b = cn('entity-status');
-export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, }) {
+export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, additionalControls, }) {
     const renderIcon = () => {
         if (!showStatus) {
             return null;
@@ -22,11 +22,11 @@ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, icon
             if (externalLink) {
                 return (_jsx(UIKitLink, { className: b('name'), href: path, children: name }));
             }
-            return (_jsx(Link, { className: b('name'), to: path, children: name }));
+            return (_jsx(InternalLink, { className: b('name'), to: path, children: name }));
         }
         return name && _jsx("span", { className: b('name'), children: name });
     };
     return (_jsxs("div", { className: b(null, className), title: name, children: [iconPath ? renderStatusLink(iconPath) : renderIcon(), label && (_jsx("span", { title: label, className: b('label', { size, state: status.toLowerCase() }), children: label })), _jsx("span", { className: b('link', { 'with-left-trim': withLeftTrim }), children: renderLink() }), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
                     visible: clipboardButtonAlwaysVisible,
-                }) }))] }));
+                }) })), additionalControls] }));
 }

package/dist/components/EntityStatus/EntityStatus.scss

@@ -14,7 +14,9 @@
     }
 
     &__clipboard-button {
+        display: flex;
         visibility: hidden;
+        flex-shrink: 0;
 
         margin-left: 8px;
 
@@ -25,16 +27,6 @@
         }
     }
 
-    a {
-        text-decoration: none;
-
-        color: var(--g-color-text-link);
-    }
-
-    a:hover {
-        color: var(--g-color-text-link-hover);
-    }
-
     &__label {
         margin-right: 2px;
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
 import { cn } from '../../utils/cn';
@@ -20,5 +20,6 @@ export const NodeHostWrapper = ({ node, getNodeRef }) => {
             tenantName: node.TenantName,
         })
         : undefined;
-    return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsxs("div", { className: b('host-wrapper'), children: [_jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, className: b('host') }), nodeRef && (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) }))] }) }));
+    const additionalControls = nodeRef ? (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) })) : null;
+    return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, additionalControls: additionalControls }) }));
 };

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,16 +1,7 @@
 .ydb-node-host-wrapper {
-    &__host-wrapper {
-        display: flex;
-
-        width: 330px;
-    }
-
-    &__host {
-        overflow: hidden;
-    }
-
     &__external-button {
         display: none;
+        flex-shrink: 0;
 
         margin-left: 4px;
     }

package/dist/components/QueryResultTable/QueryResultTable.d.ts

@@ -1,8 +1,8 @@
-import type { DataTableProps } from '@gravity-ui/react-data-table';
 import type { ColumnType, KeyValueRow } from '../../types/api/query';
+import type { ResizeableDataTableProps } from '../ResizeableDataTable/ResizeableDataTable';
 import './QueryResultTable.scss';
 export declare const b: import("@bem-react/classname").ClassNameFormatter;
-interface QueryResultTableProps extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
+interface QueryResultTableProps extends Omit<ResizeableDataTableProps<KeyValueRow>, 'data' | 'columns'> {
     data?: KeyValueRow[];
     columns?: ColumnType[];
 }

package/dist/components/QueryResultTable/QueryResultTable.js

@@ -6,6 +6,7 @@ import { cn } from '../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { getColumnType, prepareQueryResponse } from '../../utils/query';
 import { isNumeric } from '../../utils/utils';
+import { ResizeableDataTable } from '../ResizeableDataTable/ResizeableDataTable';
 import { Cell } from './Cell';
 import i18n from './i18n';
 import './QueryResultTable.scss';
@@ -62,7 +63,7 @@ export const QueryResultTable = (props) => {
     if (!columns.length) {
         return _jsx("div", { className: b('message'), children: i18n('empty') });
     }
-    return (_jsx(DataTable, Object.assign({ theme: "yandex-cloud", data: data, columns: columns, settings: settings, 
+    return (_jsx(ResizeableDataTable, Object.assign({ data: data, columns: columns, settings: settings, 
         // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
         rowKey: getRowIndex }, restProps)));
 };

package/dist/components/QueryResultTable/QueryResultTable.scss

@@ -2,6 +2,7 @@
 
 .ydb-query-result-table {
     &__cell {
+        width: 100%;
         @include cell-container;
     }
 

package/dist/components/ResizeableDataTable/ResizeableDataTable.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableProps } from '@gravity-ui/react-data-table';
+import './ResizeableDataTable.scss';
+export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'theme' | 'onResize'> {
+    columnsWidthLSKey?: string;
+    wrapperClassName?: string;
+}
+export declare function ResizeableDataTable<T>({ columnsWidthLSKey, columns, settings, wrapperClassName, ...props }: ResizeableDataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ResizeableDataTable/ResizeableDataTable.js

@@ -0,0 +1,14 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable, { updateColumnsWidth } from '@gravity-ui/react-data-table';
+import { cn } from '../../utils/cn';
+import { useTableResize } from '../../utils/hooks/useTableResize';
+import './ResizeableDataTable.scss';
+const b = cn('ydb-resizeable-data-table');
+export function ResizeableDataTable(_a) {
+    var { columnsWidthLSKey, columns, settings, wrapperClassName } = _a, props = __rest(_a, ["columnsWidthLSKey", "columns", "settings", "wrapperClassName"]);
+    const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
+    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+    const newSettings = Object.assign(Object.assign({}, settings), { defaultResizeable: true });
+    return (_jsx("div", { className: b(null, wrapperClassName), children: _jsx(DataTable, Object.assign({ theme: "yandex-cloud", columns: updatedColumns, onResize: setTableColumnsWidth, settings: newSettings }, props)) }));
+}

package/dist/components/ResizeableDataTable/ResizeableDataTable.scss

@@ -0,0 +1,8 @@
+.ydb-resizeable-data-table {
+    display: flex;
+
+    width: max-content;
+
+    // padding for easier resize of the last column
+    padding-right: 20px;
+}

package/dist/components/VirtualTable/ResizeHandler.d.ts

@@ -0,0 +1,8 @@
+interface ResizeHandlerProps {
+    maxWidth?: number;
+    minWidth?: number;
+    getCurrentColumnWidth: () => number | undefined;
+    onResize?: (width: number) => void;
+}
+export declare function ResizeHandler({ minWidth, maxWidth, getCurrentColumnWidth, onResize, }: ResizeHandlerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VirtualTable/ResizeHandler.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { b } from './shared';
+import { calculateColumnWidth, rafThrottle } from './utils';
+export function ResizeHandler({ minWidth, maxWidth, getCurrentColumnWidth, onResize, }) {
+    const elementRef = React.useRef(null);
+    const [resizing, setResizing] = React.useState(false);
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return undefined;
+        }
+        let mouseXPosition;
+        let initialColumnWidth;
+        let currentColumnWidth;
+        const onMouseMove = rafThrottle((e) => {
+            restrictMouseEvent(e);
+            if (typeof mouseXPosition !== 'number' || typeof initialColumnWidth !== 'number') {
+                return;
+            }
+            const xDiff = e.clientX - mouseXPosition;
+            const newWidth = calculateColumnWidth(initialColumnWidth + xDiff, minWidth, maxWidth);
+            if (newWidth === currentColumnWidth) {
+                return;
+            }
+            currentColumnWidth = newWidth;
+            onResize === null || onResize === void 0 ? void 0 : onResize(currentColumnWidth);
+        });
+        const onMouseUp = (e) => {
+            restrictMouseEvent(e);
+            if (currentColumnWidth !== undefined) {
+                onResize === null || onResize === void 0 ? void 0 : onResize(currentColumnWidth);
+            }
+            setResizing(false);
+            mouseXPosition = undefined;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        const onMouseDown = (e) => {
+            initialColumnWidth = getCurrentColumnWidth();
+            restrictMouseEvent(e);
+            mouseXPosition = e.clientX;
+            setResizing(true);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        };
+        element.addEventListener('mousedown', onMouseDown);
+        return () => {
+            element.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [onResize, minWidth, maxWidth, getCurrentColumnWidth]);
+    return (_jsx("span", { ref: elementRef, className: b('resize-handler', { resizing }), 
+        // Prevent sort trigger on resize
+        onClick: (e) => restrictMouseEvent(e) }));
+}
+// Prevent sort trigger and text selection on resize
+function restrictMouseEvent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}

package/dist/components/VirtualTable/ResizeableVirtualTable.d.ts

@@ -0,0 +1,6 @@
+import type { VirtualTableProps } from './VirtualTable';
+interface ResizeableVirtualTableProps<T> extends Omit<VirtualTableProps<T>, 'onColumnsResize'> {
+    columnsWidthLSKey: string;
+}
+export declare function ResizeableVirtualTable<T>({ columnsWidthLSKey, columns, ...props }: ResizeableVirtualTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VirtualTable/ResizeableVirtualTable.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTableResize } from '../../utils/hooks/useTableResize';
+import { VirtualTable } from './VirtualTable';
+function updateColumnsWidth(columns, columnsWidthSetup) {
+    return columns.map((column) => {
+        var _a;
+        return Object.assign(Object.assign({}, column), { width: (_a = columnsWidthSetup[column.name]) !== null && _a !== void 0 ? _a : column.width });
+    });
+}
+export function ResizeableVirtualTable(_a) {
+    var { columnsWidthLSKey, columns } = _a, props = __rest(_a, ["columnsWidthLSKey", "columns"]);
+    const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
+    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+    return (_jsx(VirtualTable, Object.assign({ columns: updatedColumns, onColumnsResize: setTableColumnsWidth }, props)));
+}

package/dist/components/VirtualTable/TableHead.d.ts

@@ -1,5 +1,4 @@
-import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize';
-import type { Column, OnSort, SortOrderType } from './types';
+import type { Column, HandleTableColumnsResize, OnSort, SortOrderType } from './types';
 interface TableHeadCellProps<T> {
     column: Column<T>;
     resizeable?: boolean;
@@ -9,8 +8,9 @@ interface TableHeadCellProps<T> {
     rowHeight: number;
     onCellMount?: (element: Element) => void;
     onCellUnMount?: (element: Element) => void;
+    onColumnsResize?: HandleTableColumnsResize;
 }
-export declare const TableHeadCell: <T>({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeadCell: <T>({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, onColumnsResize, }: TableHeadCellProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface TableHeadProps<T> {
     columns: Column<T>[];
     onSort?: OnSort;

package/dist/components/VirtualTable/TableHead.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ResizeHandler } from './ResizeHandler';
 import { ASCENDING, DEFAULT_RESIZEABLE, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING, } from './constants';
 import { b } from './shared';
-const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
 const SortIcon = ({ order }) => {
     return (_jsx("svg", { className: b('sort-icon', { desc: order === DESCENDING }), viewBox: "0 0 10 6", width: "10", height: "6", children: _jsx("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" }) }));
@@ -15,7 +15,7 @@ const ColumnSortIcon = ({ sortOrder, sortable, defaultSortOrder }) => {
         return null;
     }
 };
-export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
+export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, onColumnsResize, }) => {
     var _a;
     const cellWrapperRef = React.useRef(null);
     React.useEffect(() => {
@@ -29,40 +29,25 @@ export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder,
             }
         };
     }, [onCellMount, onCellUnMount]);
+    const getCurrentColumnWidth = React.useCallback(() => {
+        var _a;
+        return (_a = cellWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+    }, []);
+    const handleResize = React.useCallback((newWidth) => {
+        onColumnsResize === null || onColumnsResize === void 0 ? void 0 : onColumnsResize(column.name, newWidth);
+    }, [onColumnsResize, column.name]);
     const content = (_a = column.header) !== null && _a !== void 0 ? _a : column.name;
-    return (_jsx("th", { children: _jsx("div", { ref: cellWrapperRef, className: b('head-cell-wrapper', { resizeable }), style: {
+    return (_jsx("th", { children: _jsxs("div", { ref: cellWrapperRef, className: b('head-cell-wrapper'), style: {
                 height: `${rowHeight}px`,
                 width: `${column.width}px`,
-            }, [COLUMN_NAME_HTML_ATTRIBUTE]: column.name, children: _jsxs("div", { className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
-                    if (column.sortable) {
-                        onSort === null || onSort === void 0 ? void 0 : onSort(column.name);
-                    }
-                }, children: [_jsx("div", { className: b('head-cell-content'), children: content }), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] }) }) }));
+            }, children: [_jsxs("div", { className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
+                        if (column.sortable) {
+                            onSort === null || onSort === void 0 ? void 0 : onSort(column.name);
+                        }
+                    }, children: [_jsx("div", { className: b('head-cell-content'), children: content }), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] }), resizeable ? (_jsx(ResizeHandler, { maxWidth: column.resizeMaxWidth, minWidth: column.resizeMinWidth, getCurrentColumnWidth: getCurrentColumnWidth, onResize: handleResize })) : null] }) }));
 };
 export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder = DEFAULT_SORT_ORDER, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, }) => {
     const [sortParams, setSortParams] = React.useState({});
-    const isTableResizeable = Boolean(onColumnsResize);
-    const resizeObserver = React.useMemo(() => {
-        if (!isTableResizeable) {
-            return undefined;
-        }
-        return new ResizeObserver((entries) => {
-            const columnsWidth = {};
-            entries.forEach((entry) => {
-                var _a;
-                // @ts-expect-error ignore custrom property usage
-                const id = (_a = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]) === null || _a === void 0 ? void 0 : _a.value;
-                columnsWidth[id] = entry.contentRect.width;
-            });
-            onColumnsResize === null || onColumnsResize === void 0 ? void 0 : onColumnsResize(columnsWidth);
-        });
-    }, [onColumnsResize, isTableResizeable]);
-    const handleCellMount = React.useCallback((element) => {
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(element);
-    }, [resizeObserver]);
-    const handleCellUnMount = React.useCallback((element) => {
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(element);
-    }, [resizeObserver]);
     const handleSort = (columnId) => {
         let newSortParams = {};
         // Order is changed in following order:
@@ -100,7 +85,7 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
                     var _a;
                     const sortOrder = sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
                     const resizeable = onColumnsResize && ((_a = column.resizeable) !== null && _a !== void 0 ? _a : DEFAULT_RESIZEABLE);
-                    return (_jsx(TableHeadCell, { column: column, resizeable: resizeable, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
+                    return (_jsx(TableHeadCell, { column: column, resizeable: resizeable, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onColumnsResize: onColumnsResize }, column.name));
                 }) }) }));
     };
     return (_jsxs(React.Fragment, { children: [renderTableColGroups(), renderTableHead()] }));

package/dist/components/VirtualTable/VirtualTable.d.ts

@@ -1,7 +1,6 @@
-import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize';
-import type { Column, FetchData, GetRowClassName, RenderControls, RenderEmptyDataMessage, RenderErrorMessage, SortParams } from './types';
+import type { Column, FetchData, GetRowClassName, HandleTableColumnsResize, RenderControls, RenderEmptyDataMessage, RenderErrorMessage, SortParams } from './types';
 import './VirtualTable.scss';
-interface VirtualTableProps<T> {
+export interface VirtualTableProps<T> {
     limit: number;
     fetchData: FetchData<T>;
     columns: Column<T>[];
@@ -16,4 +15,3 @@ interface VirtualTableProps<T> {
     dependencyArray?: unknown[];
 }
 export declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/VirtualTable/VirtualTable.scss

@@ -60,14 +60,12 @@
     }
 
     &__head-cell-wrapper {
+        position: relative;
+
         display: flex;
         overflow-x: hidden;
 
         border-bottom: $cell-border;
-
-        &_resizeable {
-            resize: horizontal;
-        }
     }
 
     &__head-cell {
@@ -145,4 +143,26 @@
             }
         }
     }
+
+    &__resize-handler {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        visibility: hidden;
+
+        width: 6px;
+        height: 100%;
+
+        cursor: col-resize;
+
+        background-color: var(--g-color-base-generic);
+
+        &_resizing {
+            visibility: visible;
+        }
+    }
+    &__head-cell-wrapper:hover > &__resize-handler {
+        visibility: visible;
+    }
 }

package/dist/components/VirtualTable/types.d.ts

@@ -18,6 +18,7 @@ export type SortParams = {
     sortOrder?: SortOrderType;
 };
 export type OnSort = (params: SortParams) => void;
+export type HandleTableColumnsResize = (columnId: string, width: number) => void;
 export interface Column<T> {
     name: string;
     header?: React.ReactNode;
@@ -29,6 +30,8 @@ export interface Column<T> {
         index: number;
     }) => React.ReactNode;
     width: number;
+    resizeMaxWidth?: number;
+    resizeMinWidth?: number;
     align: AlignType;
 }
 export interface VirtualTableData<T> {

package/dist/components/VirtualTable/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function rafThrottle<Fn extends (...args: any[]) => any>(fn: Fn): (...args: Parameters<Fn>) => void;
+export declare function calculateColumnWidth(newWidth: number, minWidth?: number, maxWidth?: number): number;

package/dist/components/VirtualTable/utils.js

@@ -0,0 +1,21 @@
+// invoke passed function at most once per animation frame
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function rafThrottle(fn) {
+    let rafId = null;
+    let latestArgs;
+    return function throttled(...args) {
+        // call throttled function with latest args
+        latestArgs = args;
+        if (typeof rafId === 'number') {
+            return;
+        }
+        rafId = requestAnimationFrame(() => {
+            fn(...latestArgs);
+            rafId = null;
+        });
+    };
+}
+// 40px minWidth so sort icon won't overlap wrapped column title
+export function calculateColumnWidth(newWidth, minWidth = 40, maxWidth = Infinity) {
+    return Math.max(minWidth, Math.min(newWidth, maxWidth));
+}

package/dist/containers/ClusterModeGuard/ClusterModeGuard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { useTypedSelector } from '../../lib';
+import { useTypedSelector } from '../../utils/hooks';
 export function ClusterModeGuard({ children, mode }) {
     const shouldRender = useTypedSelector((state) => mode === 'single' ? state.singleClusterMode : !state.singleClusterMode);
     return shouldRender ? _jsx(React.Fragment, { children: children }) : null;

package/dist/containers/Clusters/Clusters.js

@@ -5,6 +5,7 @@ import { Select, TableColumnSetup } from '@gravity-ui/uikit';
 import { Helmet } from 'react-helmet-async';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { Loader } from '../../components/Loader';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../components/Search';
 import { changeClustersFilters, clustersApi } from '../../store/reducers/clusters/clusters';
 import { aggregateClustersInfo, filterClusters, selectClusterNameFilter, selectServiceFilter, selectStatusFilter, selectVersionFilter, } from '../../store/reducers/clusters/selectors';
@@ -12,7 +13,7 @@ import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/co
 import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getMinorVersion } from '../../utils/versions';
 import { ClustersStatistics } from './ClustersStatistics';
-import { CLUSTERS_COLUMNS } from './columns';
+import { CLUSTERS_COLUMNS, CLUSTERS_COLUMNS_WIDTH_LS_KEY } from './columns';
 import { CLUSTER_STATUSES, COLUMNS_NAMES, COLUMNS_TITLES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY, } from './constants';
 import i18n from './i18n';
 import { b } from './shared';
@@ -69,7 +70,7 @@ export function Clusters() {
     if (query.isLoading) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", { className: b('controls'), children: [_jsx("div", { className: b('control', { wide: true }), children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: setColumns, sortable: false }, "TableColumnSetup") })] }), query.isError ? _jsx(ResponseError, { error: query.error, className: b('error') }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(DataTable, { theme: "yandex-cloud", data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
+    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", { className: b('controls'), children: [_jsx("div", { className: b('control', { wide: true }), children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: setColumns, sortable: false }, "TableColumnSetup") })] }), query.isError ? _jsx(ResponseError, { error: query.error, className: b('error') }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CLUSTERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
                             columnId: COLUMNS_NAMES.TITLE,
                             order: DataTable.ASCENDING,
                         } }) }) })] }));

package/dist/containers/Clusters/Clusters.scss

@@ -151,8 +151,13 @@
     &__table-content {
         overflow: auto;
 
+        height: 100%;
+    }
+
+    &__table {
         @include mixins.freeze-nth-column(1);
     }
+
     &__balancer-cell {
         display: flex;
         flex-direction: row;

package/dist/containers/Clusters/columns.d.ts

@@ -1,3 +1,4 @@
 import type { Column } from '@gravity-ui/react-data-table';
 import type { PreparedCluster } from '../../store/reducers/clusters/types';
+export declare const CLUSTERS_COLUMNS_WIDTH_LS_KEY = "clustersTableColumnsWidth";
 export declare const CLUSTERS_COLUMNS: Column<PreparedCluster>[];

package/dist/containers/Clusters/columns.js

@@ -11,6 +11,7 @@ import { clusterTabsIds, getClusterPath } from '../Cluster/utils';
 import { COLUMNS_NAMES, COLUMNS_TITLES } from './constants';
 import i18n from './i18n';
 import { b } from './shared';
+export const CLUSTERS_COLUMNS_WIDTH_LS_KEY = 'clustersTableColumnsWidth';
 const EMPTY_CELL = _jsx("span", { className: b('empty-cell'), children: "\u2014" });
 export const CLUSTERS_COLUMNS = [
     {
@@ -83,7 +84,7 @@ export const CLUSTERS_COLUMNS = [
     {
         name: COLUMNS_NAMES.NODES,
         header: COLUMNS_TITLES[COLUMNS_NAMES.NODES],
-        width: 150,
+        resizeMinWidth: 140,
         defaultOrder: DataTable.DESCENDING,
         sortAccessor: ({ cluster = {} }) => {
             const { NodesTotal = 0 } = cluster;
@@ -100,7 +101,7 @@ export const CLUSTERS_COLUMNS = [
     {
         name: COLUMNS_NAMES.LOAD,
         header: COLUMNS_TITLES[COLUMNS_NAMES.LOAD],
-        width: 150,
+        resizeMinWidth: 140,
         defaultOrder: DataTable.DESCENDING,
         sortAccessor: ({ cluster }) => {
             return cluster === null || cluster === void 0 ? void 0 : cluster.NumberOfCpus;
@@ -116,7 +117,7 @@ export const CLUSTERS_COLUMNS = [
     {
         name: COLUMNS_NAMES.STORAGE,
         header: COLUMNS_TITLES[COLUMNS_NAMES.STORAGE],
-        width: 150,
+        resizeMinWidth: 140,
         defaultOrder: DataTable.DESCENDING,
         sortAccessor: ({ cluster }) => {
             return Number(cluster === null || cluster === void 0 ? void 0 : cluster.StorageTotal);