ydb-embedded-ui 6.1.0 → 6.2.0

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/NodeHostWrapper/NodeHostWrapper.js

@@ -20,5 +20,5 @@ 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" }) }))] }) }));
+    return (_jsxs(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, className: b('host') }), nodeRef && (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) }))] }));
 };

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,10 +1,4 @@
 .ydb-node-host-wrapper {
-    &__host-wrapper {
-        display: flex;
-
-        width: 330px;
-    }
-
     &__host {
         overflow: hidden;
     }

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);

package/dist/containers/Nodes/Nodes.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
 import { ASCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { EntitiesCount } from '../../components/EntitiesCount';
@@ -8,6 +7,7 @@ import { AccessDenied } from '../../components/Errors/403';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
 import { ProblemFilter } from '../../components/ProblemFilter';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { UptimeFilter } from '../../components/UptimeFIlter';
@@ -18,7 +18,7 @@ import { cn } from '../../utils/cn';
 import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
 import { useSetting, useTableSort, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { NodesUptimeFilterValues, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
-import { getNodesColumns } from './getNodesColumns';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
 import './Nodes.scss';
 const b = cn('ydb-nodes');
@@ -78,7 +78,7 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
                 return _jsx(Illustration, { name: "thumbsUp", width: "200" });
             }
         }
-        return (_jsx(DataTable, { theme: "yandex-cloud", data: nodes || [], columns: columns, settings: DEFAULT_TABLE_SETTINGS, sortOrder: sort, onSort: handleSort, emptyDataMessage: i18n('empty.default'), rowClassName: (row) => b('node', { unavailable: isUnavailableNode(row) }) }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: nodes || [], columns: columns, settings: DEFAULT_TABLE_SETTINGS, sortOrder: sort, onSort: handleSort, emptyDataMessage: i18n('empty.default'), rowClassName: (row) => b('node', { unavailable: isUnavailableNode(row) }) }));
     };
     if (error) {
         if (error.status === 403) {
@@ -86,5 +86,5 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         }
         return _jsx(ResponseError, { error: error });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, className: b('table'), children: renderTable() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, children: renderTable() })] }));
 };

package/dist/containers/Nodes/Nodes.scss

@@ -12,11 +12,6 @@
         margin-bottom: 15px;
     }
 
-    &__table {
-        @include table-styles;
-        @include table-sticky-styles;
-    }
-
     &__node_unavailable {
         opacity: 0.6;
     }

package/dist/containers/Nodes/VirtualNodes.js

@@ -7,13 +7,12 @@ import { Illustration } from '../../components/Illustration';
 import { ProblemFilter } from '../../components/ProblemFilter';
 import { Search } from '../../components/Search';
 import { UptimeFilter } from '../../components/UptimeFIlter';
-import { VirtualTable } from '../../components/VirtualTable';
+import { ResizeableVirtualTable } from '../../components/VirtualTable/ResizeableVirtualTable';
 import { ProblemFilterValues } from '../../store/reducers/settings/settings';
 import { cn } from '../../utils/cn';
-import { updateColumnsWidth, useTableResize } from '../../utils/hooks/useTableResize';
 import { NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
 import { getNodes } from './getNodes';
-import { getNodesColumns } from './getNodesColumns';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
 import './Nodes.scss';
 const b = cn('ydb-nodes');
@@ -21,7 +20,6 @@ export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) =>
     const [searchValue, setSearchValue] = React.useState('');
     const [problemFilter, setProblemFilter] = React.useState(ProblemFilterValues.ALL);
     const [uptimeFilter, setUptimeFilter] = React.useState(NodesUptimeFilterValues.All);
-    const [tableColumnsWidthSetup, setTableColumnsWidth] = useTableResize('nodesTableColumnsWidth');
     const filters = React.useMemo(() => {
         return [path, searchValue, problemFilter, uptimeFilter];
     }, [path, searchValue, problemFilter, uptimeFilter]);
@@ -59,8 +57,8 @@ export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) =>
     const rawColumns = getNodesColumns({
         getNodeRef: additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef,
     });
-    const columns = updateColumnsWidth(rawColumns, tableColumnsWidthSetup).map((column) => {
+    const columns = rawColumns.map((column) => {
         return Object.assign(Object.assign({}, column), { sortable: isSortableNodesProperty(column.name) });
     });
-    return (_jsx(VirtualTable, { parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters, getRowClassName: getRowClassName, onColumnsResize: setTableColumnsWidth }));
+    return (_jsx(ResizeableVirtualTable, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters, getRowClassName: getRowClassName }));
 };

package/dist/containers/Nodes/getNodesColumns.d.ts

@@ -2,6 +2,7 @@ import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
 import type { Column as VirtualTableColumn } from '../../components/VirtualTable';
 import type { NodesPreparedEntity } from '../../store/reducers/nodes/types';
 import type { GetNodeRefFunc } from '../../types/additionalProps';
+export declare const NODES_COLUMNS_WIDTH_LS_KEY = "nodesTableColumnsWidth";
 interface GetNodesColumnsProps {
     tabletsPath?: string;
     getNodeRef?: GetNodeRefFunc;