ydb-platform · Raubzeug · Sep 18, 2025 · Sep 18, 2025
@@ -8,6 +8,7 @@ import type {PaginatedTableState} from './types';
 
 export interface PaginatedTableWithLayoutProps {
     controls?: React.ReactNode;
+    extraControls?: React.ReactNode;
     table: React.ReactNode;
     tableWrapperProps?: Omit<TableWrapperProps, 'children'>;
     error?: React.ReactNode;
@@ -42,12 +43,22 @@ const TableWrapper = ({
     );
 };
 
-const ControlsSection = ({controls}: {controls?: React.ReactNode}) => {
-    if (!controls) {
+const ControlsSection = ({
+    controls,
+    extraControls,
+}: {
+    controls?: React.ReactNode;
+    extraControls?: React.ReactNode;
+}) => {
+    if (!controls && !extraControls) {
         return null;
     }
 
-    return <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>;
+    return (
+        <TableWithControlsLayout.Controls renderExtraControls={() => extraControls}>
+            {controls}
+        </TableWithControlsLayout.Controls>
+    );
 };
 
 const ErrorSection = ({error}: {error?: React.ReactNode}) => {
@@ -60,6 +71,7 @@ const ErrorSection = ({error}: {error?: React.ReactNode}) => {
 
 export const PaginatedTableWithLayout = ({
     controls,
+    extraControls,
     table,
     tableWrapperProps,
     error,
@@ -70,7 +82,7 @@ export const PaginatedTableWithLayout = ({
     return (
         <PaginatedTableProvider initialState={initialState} noBatching={noBatching}>
             <TableWithControlsLayout fullHeight={fullHeight}>
-                <ControlsSection controls={controls} />
+                <ControlsSection controls={controls} extraControls={extraControls} />
                 <ErrorSection error={error} />
                 <TableWrapper table={table} tableWrapperProps={tableWrapperProps} />
             </TableWithControlsLayout>

@@ -0,0 +1,33 @@
+import {Gear} from '@gravity-ui/icons';
+import type {TableColumnSetupProps as TableColumnSetupPropsUikit} from '@gravity-ui/uikit';
+import {Button, Icon, TableColumnSetup as TableColumnSetupUikit, Text} from '@gravity-ui/uikit';
+
+interface TableColumnSetupProps extends Omit<TableColumnSetupPropsUikit, 'renderSwitcher'> {}
+
+export function TableColumnSetup(props: TableColumnSetupProps) {
+    const {items, showStatus, disabled} = props;
+    const renderStatus = () => {
+        if (!showStatus) {
+            return null;
+        }
+        const selected = items.reduce((acc, cur) => (cur.selected ? acc + 1 : acc), 0);
+        const all = items.length;
+        const status = (
+            <Text color="secondary">
+                {selected}/{all}
+            </Text>
+        );
+
+        return status;
+    };
+    const renderSwitcher: TableColumnSetupPropsUikit['renderSwitcher'] = (switcherProps) => {
+        return (
+            <Button disabled={disabled} onClick={switcherProps.onClick}>
+                <Icon data={Gear} />
+                {renderStatus()}
+            </Button>
+        );
+    };
+
+    return <TableColumnSetupUikit {...props} renderSwitcher={renderSwitcher} />;
+}
@@ -16,6 +16,8 @@
     &__controls-wrapper {
         z-index: 3;
 
+        align-items: center;
+
         box-sizing: border-box;
         width: 100%;
 
@@ -32,6 +34,13 @@
         @include mixins.sticky-top();
     }
 
+    &__extra-controls {
+        position: sticky;
+        right: var(--extra-controls-right, 0);
+
+        margin: 0 0 0 auto;
+    }
+
     &__table {
         position: relative;
         z-index: 2;

@@ -39,14 +39,9 @@ TableWithControlsLayout.Controls = function TableControls({
     className,
 }: TableWithControlsLayoutItemProps) {
     return (
-        <Flex
-            justifyContent="space-between"
-            alignItems="center"
-            className={b('controls-wrapper')}
-            gap={2}
-        >
+        <Flex justifyContent="space-between" className={b('controls-wrapper')} gap={2}>
             <div className={b('controls', className)}>{children}</div>
-            {renderExtraControls?.()}
+            <div className={b('extra-controls')}>{renderExtraControls?.()}</div>
         </Flex>
     );
 };

@@ -3,6 +3,8 @@
 .ydb-cluster {
     --cluster-side-padding: var(--g-spacing-5);
     --sticky-tabs-height: 40px;
+    --extra-controls-right: calc(var(--cluster-side-padding) * 2);
+
     position: relative;
 
     overflow: auto;

@@ -39,6 +39,9 @@
             width: 320px;
         }
     }
+    &__column-setup {
+        margin-left: auto;
+    }
     &__empty-cell {
         color: var(--g-color-text-secondary);
     }

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Magnifier} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import {Flex, Icon, Select, TableColumnSetup, Text} from '@gravity-ui/uikit';
+import {Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
@@ -11,6 +11,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {Loader} from '../../components/Loader';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../components/Search';
+import {TableColumnSetup} from '../../components/TableColumnSetup/TableColumnSetup';
 import {
     useDeleteClusterFeatureAvailable,
     useEditClusterFeatureAvailable,
@@ -203,16 +204,15 @@ export function Clusters() {
                             width="max"
                         />
                     </div>
-                    <div className={b('control')}>
-                        <TableColumnSetup
-                            key="TableColumnSetup"
-                            popupWidth={242}
-                            items={columnsToSelect}
-                            showStatus
-                            onUpdate={setColumns}
-                            sortable={false}
-                        />
-                    </div>
+                    <TableColumnSetup
+                        className={b('column-setup')}
+                        key="TableColumnSetup"
+                        popupWidth={242}
+                        items={columnsToSelect}
+                        showStatus
+                        onUpdate={setColumns}
+                        sortable={false}
+                    />
                 </Flex>
                 {clusters?.length ? (
                     <Text color="secondary">

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import type {TableColumnSetupItem} from '@gravity-ui/uikit';
-import {Select, TableColumnSetup, Text} from '@gravity-ui/uikit';
+import {Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount';
 import {ProblemFilter} from '../../../components/ProblemFilter';
@@ -26,9 +25,6 @@ interface NodesControlsProps {
 
     withPeerRoleFilter?: boolean;
 
-    columnsToSelect: TableColumnSetupItem[];
-    handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void;
-
     entitiesCountCurrent: number;
     entitiesCountTotal?: number;
     entitiesLoading: boolean;
@@ -40,9 +36,6 @@ export function NodesControls({
 
     withPeerRoleFilter,
 
-    columnsToSelect,
-    handleSelectedColumnsUpdate,
-
     entitiesCountCurrent,
     entitiesCountTotal,
     entitiesLoading,
@@ -91,13 +84,7 @@ export function NodesControls({
                     <PeerRoleFilter value={peerRoleFilter} onChange={handlePeerRoleFilterChange} />
                 </React.Fragment>
             ) : null}
-            <TableColumnSetup
-                popupWidth={200}
-                items={columnsToSelect}
-                showStatus
-                onUpdate={handleSelectedColumnsUpdate}
-                sortable={false}
-            />
+
             {withGroupBySelect ? (
                 <React.Fragment>
                     <Text variant="body-2">{i18n('controls_group-by-placeholder')}</Text>

@@ -5,6 +5,7 @@ import {isNil} from 'lodash';
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import type {Column} from '../../../components/PaginatedTable';
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
+import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
 import {nodesApi} from '../../../store/reducers/nodes/nodes';
@@ -200,14 +201,21 @@ export function GroupedNodesComponent({
                 <NodesControls
                     groupByParams={groupByParams}
                     withPeerRoleFilter={withPeerRoleFilter}
-                    columnsToSelect={columnsToSelect}
-                    handleSelectedColumnsUpdate={setColumns}
                     entitiesCountCurrent={found}
                     entitiesCountTotal={total}
                     entitiesLoading={isLoading}
                     withGroupBySelect
                 />
             }
+            extraControls={
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
+                />
+            }
             error={error ? <ResponseError error={error} /> : null}
             table={renderGroups()}
             tableWrapperProps={{

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type {Column} from '../../../components/PaginatedTable';
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
+import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
 import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
@@ -61,8 +62,15 @@ export function NodesComponent({
                     withGroupBySelect={viewerNodesHandlerHasGrouping}
                     groupByParams={groupByParams}
                     withPeerRoleFilter={withPeerRoleFilter}
-                    columnsToSelect={columnsToSelect}
-                    handleSelectedColumnsUpdate={setColumns}
+                />
+            }
+            extraControls={
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
                 />
             }
             table={

@@ -1,5 +1,3 @@
-import type {TableColumnSetupItem} from '@gravity-ui/uikit';
-
 import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {NodesControls} from '../NodesControls/NodesControls';
@@ -8,16 +6,12 @@ interface NodesControlsWithTableStateProps {
     withGroupBySelect: boolean;
     groupByParams: NodesGroupByField[];
     withPeerRoleFilter?: boolean;
-    columnsToSelect: TableColumnSetupItem[];
-    handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void;
 }
 
 export function NodesControlsWithTableState({
     withGroupBySelect,
     groupByParams,
     withPeerRoleFilter,
-    columnsToSelect,
-    handleSelectedColumnsUpdate,
 }: NodesControlsWithTableStateProps) {
     const {tableState} = usePaginatedTableState();
 
@@ -26,8 +20,6 @@ export function NodesControlsWithTableState({
             withGroupBySelect={withGroupBySelect}
             groupByParams={groupByParams}
             withPeerRoleFilter={withPeerRoleFilter}
-            columnsToSelect={columnsToSelect}
-            handleSelectedColumnsUpdate={handleSelectedColumnsUpdate}
             entitiesCountCurrent={tableState.foundEntities}
             entitiesCountTotal={tableState.totalEntities}
             entitiesLoading={tableState.isInitialLoad}

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ResponseError} from '../../../components/Errors/ResponseError/ResponseError';
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
+import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {storageApi} from '../../../store/reducers/storage/storage';
 import type {GroupsGroupByField} from '../../../types/api/storage';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
@@ -174,8 +175,15 @@ export function GroupedStorageGroupsComponent({
                     entitiesCountCurrent={found}
                     entitiesCountTotal={total}
                     entitiesLoading={isLoading}
-                    columnsToSelect={columnsToSelect}
-                    handleSelectedColumnsUpdate={setColumns}
+                />
+            }
+            extraControls={
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}

@@ -1,4 +1,5 @@
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
+import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {useStorageGroupsHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {PaginatedStorageProps} from '../PaginatedStorage';
@@ -32,8 +33,15 @@ export function StorageGroupsComponent({
                 <StorageGroupsControlsWithTableState
                     withTypeSelector
                     withGroupBySelect={storageGroupsHandlerHasGrouping}
-                    columnsToSelect={columnsToSelect}
-                    handleSelectedColumnsUpdate={setColumns}
+                />
+            }
+            extraControls={
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
                 />
             }
             table={