ydb-embedded-ui 6.1.0 → 6.2.1

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;

package/dist/containers/Nodes/getNodesColumns.js

@@ -9,6 +9,7 @@ import { UsageLabel } from '../../components/UsageLabel/UsageLabel';
 import { getLoadSeverityForNode } from '../../store/reducers/nodes/utils';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 import { formatBytesToGigabyte, formatStorageValuesToGb, } from '../../utils/dataFormatters/dataFormatters';
+export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
     Host: 'Host',
@@ -102,6 +103,7 @@ const cpuColumn = {
     render: ({ row }) => (row.PoolStats ? _jsx(PoolsGraph, { pools: row.PoolStats }) : '—'),
     align: DataTable.LEFT,
     width: 80,
+    resizeMinWidth: 60,
     sortable: false,
 };
 const loadAverageColumn = {
@@ -112,11 +114,13 @@ const loadAverageColumn = {
     render: ({ row }) => row.LoadAverage && row.LoadAverage.length > 0 ? (_jsx(ProgressViewer, { value: row.LoadAverage[0], percents: true, colorizeProgress: true, capacity: 100 })) : ('—'),
     align: DataTable.LEFT,
     width: 140,
+    resizeMinWidth: 140,
     sortable: false,
 };
 const getTabletsColumn = (tabletsPath) => ({
     name: NODES_COLUMNS_IDS.Tablets,
-    width: 430,
+    width: 500,
+    resizeMinWidth: 500,
     render: ({ row }) => {
         return row.Tablets ? (_jsx(TabletsStatistic, { path: tabletsPath !== null && tabletsPath !== void 0 ? tabletsPath : row.TenantName, nodeIds: [row.NodeId], tablets: row.Tablets })) : ('—');
     },
@@ -129,6 +133,7 @@ const topNodesLoadAverageColumn = {
     render: ({ row }) => row.LoadAverage && row.LoadAverage.length > 0 ? (_jsx(UsageLabel, { value: row.LoadAverage[0].toFixed(), theme: getLoadSeverityForNode(row.LoadAverage[0]) })) : ('—'),
     align: DataTable.LEFT,
     width: 80,
+    resizeMinWidth: 70,
     sortable: false,
 };
 const topNodesMemoryColumn = {
@@ -137,6 +142,7 @@ const topNodesMemoryColumn = {
     render: ({ row }) => (_jsx(ProgressViewer, { value: row.MemoryUsed, capacity: row.MemoryLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.LEFT,
     width: 140,
+    resizeMinWidth: 140,
     sortable: false,
 };
 const sharedCacheUsageColumn = {
@@ -145,6 +151,7 @@ const sharedCacheUsageColumn = {
     render: ({ row }) => (_jsx(ProgressViewer, { value: row.SharedCacheUsed, capacity: row.SharedCacheLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.LEFT,
     width: 140,
+    resizeMinWidth: 140,
     sortable: false,
 };
 const memoryUsedInAllocColumn = {
@@ -153,6 +160,7 @@ const memoryUsedInAllocColumn = {
     render: ({ row }) => (_jsx(ProgressViewer, { value: row.MemoryUsedInAlloc, capacity: row.MemoryLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.LEFT,
     width: 140,
+    resizeMinWidth: 140,
     sortable: false,
 };
 const sessionsColumn = {

package/dist/containers/PDiskPage/PDiskGroups.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { getPDiskStorageColumns } from '../Storage/StorageGroups/getStorageGroupsColumns';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getPDiskStorageColumns, } from '../Storage/StorageGroups/getStorageGroupsColumns';
 import { pDiskPageKeyset } from './i18n';
 import { pdiskPageCn } from './shared';
 export function PDiskGroups({ data, nodesMap, loading }) {
@@ -14,7 +14,7 @@ export function PDiskGroups({ data, nodesMap, loading }) {
         if (loading) {
             return _jsx(TableSkeleton, {});
         }
-        return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
     };
     return (_jsxs(React.Fragment, { children: [_jsx("div", { className: pdiskPageCn('groups-title'), children: pDiskPageKeyset('groups') }), _jsx("div", { children: renderContent() })] }));
 }

package/dist/containers/Storage/Storage.scss

@@ -10,10 +10,6 @@
             // stylelint-disable-next-line declaration-no-important
             height: var(--g-text-body-2-line-height) !important;
         }
-
-        table {
-            min-width: 100%;
-        }
     }
 
     .entity-status {

package/dist/containers/Storage/StorageGroups/StorageGroups.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { StorageGroupsEmptyDataMessage } from './StorageGroupsEmptyDataMessage';
-import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getPreparedStorageGroupsColumns, } from './getStorageGroupsColumns';
 import i18n from './i18n';
 import './StorageGroups.scss';
 export function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }) {
@@ -13,5 +13,5 @@ export function StorageGroups({ data, tableSettings, visibleEntities, nodes, onS
     if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) {
         return (_jsx(StorageGroupsEmptyDataMessage, { onShowAll: onShowAll, visibleEntities: visibleEntities }));
     }
-    return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: columns, settings: tableSettings, emptyDataMessage: i18n('empty.default'), sortOrder: sort, onSort: handleSort }, visibleEntities));
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, data: data, columns: columns, settings: tableSettings, emptyDataMessage: i18n('empty.default'), sortOrder: sort, onSort: handleSort }, visibleEntities));
 }

package/dist/containers/Storage/StorageGroups/VirtualStorageGroups.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { VirtualTable } from '../../../components/VirtualTable';
+import { ResizeableVirtualTable } from '../../../components/VirtualTable/ResizeableVirtualTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { StorageGroupsEmptyDataMessage } from './StorageGroupsEmptyDataMessage';
 import { getStorageGroups } from './getGroups';
-import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getPreparedStorageGroupsColumns, } from './getStorageGroupsColumns';
 import i18n from './i18n';
 export const VirtualStorageGroups = ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
     const filters = React.useMemo(() => {
@@ -31,5 +31,5 @@ export const VirtualStorageGroups = ({ searchValue, visibleEntities, tenant, nod
         }
         return i18n('empty.default');
     };
-    return (_jsx(VirtualTable, { parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters }));
+    return (_jsx(ResizeableVirtualTable, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters }));
 };

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.d.ts

@@ -4,6 +4,7 @@ import type { Column as VirtualTableColumn } from '../../../components/VirtualTa
 import type { PreparedStorageGroup, VisibleEntities } from '../../../store/reducers/storage/types';
 import type { NodesMap } from '../../../types/store/nodesList';
 import './StorageGroups.scss';
+export declare const STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY = "storageGroupsColumnsWidth";
 type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
 export declare const GROUPS_COLUMNS_IDS: {
     readonly PoolName: "PoolName";
@@ -38,6 +39,8 @@ export declare const getPreparedStorageGroupsColumns: (nodesMap: NodesMap | unde
         headerData?: boolean | undefined;
     }) => React.ReactNode);
     width: number;
+    resizeMaxWidth?: number | undefined;
+    resizeMinWidth?: number | undefined;
     align: "center" | "left" | "right";
     headerTitle?: string | undefined;
     accessor?: string | ((row: PreparedStorageGroup) => any) | undefined;

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.js

@@ -17,6 +17,7 @@ import i18n from './i18n';
 import shieldIcon from '../../../assets/icons/shield.svg';
 import './StorageGroups.scss';
 const b = cn('global-storage-groups');
+export const STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY = 'storageGroupsColumnsWidth';
 export const GROUPS_COLUMNS_IDS = {
     PoolName: 'PoolName',
     MediaType: 'MediaType',
@@ -46,6 +47,7 @@ const typeColumn = {
     name: GROUPS_COLUMNS_IDS.MediaType,
     header: 'Type',
     width: 100,
+    resizeMinWidth: 100,
     align: DataTable.LEFT,
     render: ({ row }) => (_jsxs(React.Fragment, { children: [_jsx(Label, { children: row.MediaType || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, { content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate, children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) }))] })),
     sortable: false,
@@ -70,6 +72,7 @@ const usageColumn = {
     name: GROUPS_COLUMNS_IDS.Usage,
     header: 'Usage',
     width: 100,
+    resizeMinWidth: 70,
     render: ({ row }) => {
         // without a limit the usage can be evaluated as 0,
         // but the absence of a value is more clear
@@ -149,7 +152,7 @@ const writeColumn = {
     },
     align: DataTable.RIGHT,
 };
-const getVdiscksColumn = (nodes) => ({
+const getVDisksColumn = (nodes) => ({
     name: GROUPS_COLUMNS_IDS.VDisks,
     className: b('vdisks-column'),
     header: 'VDisks',
@@ -161,6 +164,7 @@ const getVdiscksColumn = (nodes) => ({
     },
     align: DataTable.CENTER,
     width: 900,
+    resizeable: false,
 });
 export const getStorageTopGroupsColumns = () => {
     return [groupIdColumn, typeColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
@@ -174,7 +178,7 @@ export const getPDiskStorageColumns = (nodes) => {
         groupIdColumn,
         usageColumn,
         usedColumn,
-        getVdiscksColumn(nodes),
+        getVDisksColumn(nodes),
     ];
 };
 const getStorageGroupsColumns = (nodes) => {
@@ -190,7 +194,7 @@ const getStorageGroupsColumns = (nodes) => {
         usedSpaceFlagColumn,
         readColumn,
         writeColumn,
-        getVdiscksColumn(nodes),
+        getVDisksColumn(nodes),
     ];
 };
 const filterStorageGroupsColumns = (columns, visibleEntities) => {

package/dist/containers/Storage/StorageNodes/StorageNodes.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { NodesUptimeFilterValues } from '../../../utils/nodes';
 import { StorageNodesEmptyDataMessage } from './StorageNodesEmptyDataMessage';
-import { getPreparedStorageNodesColumns } from './getStorageNodesColumns';
+import { STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, getPreparedStorageNodesColumns, } from './getStorageNodesColumns';
 import i18n from './i18n';
 import { getRowUnavailableClassName } from './shared';
 import './StorageNodes.scss';
@@ -14,5 +14,5 @@ export function StorageNodes({ data, tableSettings, visibleEntities, onShowAll,
             nodesUptimeFilter !== NodesUptimeFilterValues.All)) {
         return (_jsx(StorageNodesEmptyDataMessage, { visibleEntities: visibleEntities, nodesUptimeFilter: nodesUptimeFilter, onShowAll: onShowAll }));
     }
-    return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: columns, settings: Object.assign(Object.assign({}, tableSettings), { dynamicRenderType: 'variable' }), emptyDataMessage: i18n('empty.default'), rowClassName: getRowUnavailableClassName, sortOrder: sort, onSort: handleSort }, visibleEntities));
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, data: data, columns: columns, settings: Object.assign(Object.assign({}, tableSettings), { dynamicRenderType: 'variable' }), emptyDataMessage: i18n('empty.default'), rowClassName: getRowUnavailableClassName, sortOrder: sort, onSort: handleSort }, visibleEntities));
 }

package/dist/containers/Storage/StorageNodes/VirtualStorageNodes.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { VirtualTable } from '../../../components/VirtualTable';
+import { ResizeableVirtualTable } from '../../../components/VirtualTable/ResizeableVirtualTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { NodesUptimeFilterValues, getUptimeParamValue } from '../../../utils/nodes';
 import { StorageNodesEmptyDataMessage } from './StorageNodesEmptyDataMessage';
 import { getStorageNodes } from './getNodes';
-import { getPreparedStorageNodesColumns } from './getStorageNodesColumns';
+import { STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, getPreparedStorageNodesColumns, } from './getStorageNodesColumns';
 import i18n from './i18n';
 import { getRowUnavailableClassName } from './shared';
 export const VirtualStorageNodes = ({ searchValue, visibleEntities, nodesUptimeFilter, tenant, additionalNodesProps, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
@@ -34,5 +34,5 @@ export const VirtualStorageNodes = ({ searchValue, visibleEntities, nodesUptimeF
         }
         return i18n('empty.default');
     };
-    return (_jsx(VirtualTable, { parentContainer: parentContainer, columns: columns, fetchData: fetchData, rowHeight: 50, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, getRowClassName: getRowUnavailableClassName, dependencyArray: filters }));
+    return (_jsx(ResizeableVirtualTable, { columnsWidthLSKey: STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, rowHeight: 50, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, getRowClassName: getRowUnavailableClassName, dependencyArray: filters }));
 };

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.d.ts

@@ -2,6 +2,7 @@
 import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
 import type { PreparedStorageNode, VisibleEntities } from '../../../store/reducers/storage/types';
 import type { AdditionalNodesProps } from '../../../types/additionalProps';
+export declare const STORAGE_NODES_COLUMNS_WIDTH_LS_KEY = "storageNodesColumnsWidth";
 export declare const STORAGE_NODES_COLUMNS_IDS: {
     readonly NodeId: "NodeId";
     readonly Host: "Host";
@@ -28,6 +29,8 @@ export declare const getPreparedStorageNodesColumns: (additionalNodesProps: Addi
         headerData?: boolean | undefined;
     }) => import("react").ReactNode);
     width: number;
+    resizeMaxWidth?: number | undefined;
+    resizeMinWidth?: number | undefined;
     align: "center" | "left" | "right";
     headerTitle?: string | undefined;
     accessor?: string | ((row: PreparedStorageNode) => any) | undefined;

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.js

@@ -6,6 +6,7 @@ import { EMPTY_DATA_PLACEHOLDER } from '../../../utils/constants';
 import { isSortableNodesProperty } from '../../../utils/nodes';
 import { PDisk } from '../PDisk/PDisk';
 import { b } from './shared';
+export const STORAGE_NODES_COLUMNS_WIDTH_LS_KEY = 'storageNodesColumnsWidth';
 export const STORAGE_NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
     Host: 'Host',
@@ -79,6 +80,7 @@ const getStorageNodesColumns = (additionalNodesProps) => {
             align: DataTable.CENTER,
             sortable: false,
             width: 900,
+            resizeable: false,
         },
     ];
     return columns;

package/dist/containers/Tablet/Tablet.scss

@@ -93,8 +93,4 @@
 
         @include body-2-typography();
     }
-
-    &__host {
-        width: 300px;
-    }
 }

package/dist/containers/Tablet/TabletTable/TabletTable.js

@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { InternalLink } from '../../../components/InternalLink/InternalLink';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import { calcUptime } from '../../../utils/dataFormatters/dataFormatters';
 import { getDefaultNodePath } from '../../Node/NodePages';
-import { b } from '../Tablet';
+const TABLET_COLUMNS_WIDTH_LS_KEY = 'tabletTableColumnsWidth';
 const columns = [
     {
         name: 'Generation',
@@ -40,11 +41,12 @@ const columns = [
     {
         name: 'Node FQDN',
         sortable: false,
+        width: 300,
         render: ({ row }) => {
             if (!row.fqdn) {
                 return _jsx("span", { children: "\u2014" });
             }
-            return (_jsx("div", { className: b('host'), children: _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true }) }));
+            return _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true });
         },
     },
 ];
@@ -52,7 +54,7 @@ const TABLE_SETTINGS = {
     displayIndices: false,
 };
 export const TabletTable = ({ history }) => {
-    return (_jsx(DataTable, { theme: "yandex-cloud", data: history, columns: columns, settings: TABLE_SETTINGS, initialSortOrder: {
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TABLET_COLUMNS_WIDTH_LS_KEY, data: history, columns: columns, settings: TABLE_SETTINGS, initialSortOrder: {
             columnId: 'Generation',
             order: DataTable.DESCENDING,
         } }));

package/dist/containers/Tenant/Acl/Acl.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import { Loader } from '../../../components/Loader';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import { getSchemaAcl, setAclWasNotLoaded } from '../../../store/reducers/schemaAcl/schemaAcl';
 import { cn } from '../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
@@ -10,6 +10,7 @@ import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import i18n from '../i18n';
 import './Acl.scss';
 const b = cn('ydb-acl');
+const ACL_COLUMNS_WIDTH_LS_KEY = 'aclTableColumnsWidth';
 const TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false, stickyTop: 36 });
 const prepareLogin = (value) => {
     if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
@@ -73,7 +74,7 @@ export const Acl = () => {
         if (!acl || !acl.length) {
             return null;
         }
-        return (_jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: acl, settings: TABLE_SETTINGS }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: ACL_COLUMNS_WIDTH_LS_KEY, columns: columns, data: acl, settings: TABLE_SETTINGS }));
     };
     const renderOwner = () => {
         if (!owner) {

package/dist/containers/Tenant/Acl/Acl.scss

@@ -1,12 +1,6 @@
 @import '../../../styles/mixins.scss';
 
 .ydb-acl {
-    display: flex;
-    overflow: auto;
-    flex-grow: 1;
-
-    @include query-data-table;
-
     &__result {
         align-self: flex-start;
     }

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
 import escapeRegExp from 'lodash/escapeRegExp';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { Loader } from '../../../../components/Loader';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../../../components/Search';
 import { selectPreparedConsumersData, selectPreparedTopicStats, topicApi, } from '../../../../store/reducers/topic';
 import { cn } from '../../../../utils/cn';
@@ -11,7 +11,7 @@ import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
 import { useTypedSelector } from '../../../../utils/hooks';
 import { isCdcStreamEntityType } from '../../utils/schema';
 import { ConsumersTopicStats } from './TopicStats';
-import { columns } from './columns';
+import { CONSUMERS_COLUMNS_WIDTH_LS_KEY, columns } from './columns';
 import i18n from './i18n';
 import './Consumers.scss';
 const b = cn('ydb-diagnostics-consumers');
@@ -44,5 +44,5 @@ export const Consumers = ({ path, type }) => {
     if (!consumers || !consumers.length) {
         return _jsx("div", { children: i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`) });
     }
-    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(DataTable, { theme: "yandex-cloud", data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) }) })] }));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CONSUMERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) }) })] }));
 };

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.scss

@@ -25,7 +25,9 @@
         overflow: auto;
 
         height: 100%;
+    }
 
+    &__table {
         @include freeze-nth-column(1);
     }
 }

package/dist/containers/Tenant/Diagnostics/Consumers/columns/columns.d.ts

@@ -1,4 +1,5 @@
 import type { Column } from '@gravity-ui/react-data-table';
 import type { IPreparedConsumerData } from '../../../../../types/store/topic';
 import './Columns.scss';
+export declare const CONSUMERS_COLUMNS_WIDTH_LS_KEY = "consumersColumnsWidth";
 export declare const columns: Column<IPreparedConsumerData>[];

package/dist/containers/Tenant/Diagnostics/Consumers/columns/columns.js

@@ -12,6 +12,7 @@ import { ReadLagsHeader } from '../Headers';
 import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES, CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS, CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES, } from '../utils/constants';
 import './Columns.scss';
 const b = cn('ydb-diagnostics-consumers-columns');
+export const CONSUMERS_COLUMNS_WIDTH_LS_KEY = 'consumersColumnsWidth';
 export const columns = [
     {
         name: CONSUMERS_COLUMNS_IDS.CONSUMER,
@@ -31,6 +32,7 @@ export const columns = [
         name: CONSUMERS_COLUMNS_IDS.READ_SPEED,
         header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_SPEED],
         align: DataTable.RIGHT,
+        resizeMinWidth: 140,
         sortAccessor: (row) => row.readSpeed.perMinute,
         render: ({ row }) => _jsx(SpeedMultiMeter, { data: row.readSpeed }),
     },

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -3,6 +3,7 @@ import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { Icon } from '../../../../components/Icon';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
@@ -93,8 +94,8 @@ export function HotKeys({ path }) {
     if (!data) {
         return _jsx("div", { children: i18n('no-data') });
     }
-    return (_jsx("div", { className: b('table-content'), children: _jsx(DataTable, { columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, theme: "yandex-cloud", initialSortOrder: {
-                columnId: tableColumnsIds.accessSample,
-                order: DataTable.DESCENDING,
-            } }) }));
+    return (_jsx(ResizeableDataTable, { wrapperClassName: b('table'), columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, initialSortOrder: {
+            columnId: tableColumnsIds.accessSample,
+            order: DataTable.DESCENDING,
+        } }));
 }

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss

@@ -1,11 +1,7 @@
 @import '../../../../styles/mixins.scss';
 
 .ydb-hot-keys {
-    &__table-content {
-        overflow: auto;
-
-        width: 100%;
-        height: 100%;
+    &__table {
         @include freeze-nth-column(1);
     }
 

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import DataTable from '@gravity-ui/react-data-table';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
 import { nodesListApi, selectNodesMap } from '../../../../store/reducers/nodesList';
 import { partitionsApi, setSelectedConsumer } from '../../../../store/reducers/partitions/partitions';
@@ -11,6 +11,7 @@ import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY } from '../../../../utils/constants';
 import { useSetting, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { PartitionsControls } from './PartitionsControls/PartitionsControls';
+import { PARTITIONS_COLUMNS_WIDTH_LS_KEY } from './columns';
 import i18n from './i18n';
 import { addHostToPartitions } from './utils';
 import { useGetPartitionsColumns } from './utils/useGetPartitionsColumns';
@@ -64,14 +65,17 @@ export const Partitions = ({ path }) => {
     };
     const loading = topicLoading || nodesLoading || partitionsLoading;
     const error = nodesError || topicError || partitionsError;
-    const getContent = () => {
+    const renderControls = () => {
+        return (_jsx(PartitionsControls, { consumers: consumers, selectedConsumer: selectedConsumer, onSelectedConsumerChange: handleSelectedConsumerChange, selectDisabled: Boolean(error) || loading, partitions: partitionsWithHosts, onSearchChange: setPartitionsToRender, hiddenColumns: hiddenColumns, onHiddenColumnsChange: hadleTableColumnsSetupChange, initialColumnsIds: columnsIdsForSelector }));
+    };
+    const renderContent = () => {
         if (loading) {
             return _jsx(TableSkeleton, { className: b('loader') });
         }
         if (error) {
             return _jsx(ResponseError, { error: error });
         }
-        return (_jsx(DataTable, { theme: "yandex-cloud", data: partitionsToRender, columns: columnsToShow, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: PARTITIONS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: partitionsToRender, columns: columnsToShow, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }));
     };
-    return (_jsxs("div", { className: b(), children: [_jsx(PartitionsControls, { consumers: consumers, selectedConsumer: selectedConsumer, onSelectedConsumerChange: handleSelectedConsumerChange, selectDisabled: Boolean(error) || loading, partitions: partitionsWithHosts, onSearchChange: setPartitionsToRender, hiddenColumns: hiddenColumns, onHiddenColumnsChange: hadleTableColumnsSetupChange, initialColumnsIds: columnsIdsForSelector }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: getContent() }) })] }));
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('controls'), children: renderControls() }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: renderContent() }) })] }));
 };

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.scss

@@ -39,7 +39,9 @@
         overflow: auto;
 
         height: 100%;
+    }
 
+    &__table {
         @include freeze-nth-column(1);
     }
 }