feat(TableColumnSetup): support sortable columns (#2908)

Raubzeug · web-flow · commit a2ace674d852 · 2025-09-23T16:12:11.000Z
diff --git a/src/components/PaginatedTable/TableChunk.tsx b/src/components/PaginatedTable/TableChunk.tsx
@@ -66,7 +66,8 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {noBatching} = usePaginatedTableState();
 
-    const columnsIds = columns.map((column) => column.name);
+    //sort ids to prevent refetch if only order was changed
+    const columnsIds = columns.map((column) => column.name).toSorted();
 
     const queryParams = {
         offset: id * chunkSize,
diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx
@@ -211,7 +211,6 @@ export function Clusters() {
                         items={columnsToSelect}
                         showStatus
                         onUpdate={setColumns}
-                        sortable={false}
                     />
                 </Flex>
                 {clusters?.length ? (
diff --git a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx
@@ -213,7 +213,6 @@ export function GroupedNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}
diff --git a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx
@@ -70,7 +70,6 @@ export function NodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={
diff --git a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx
@@ -183,7 +183,6 @@ export function GroupedStorageGroupsComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}
diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx
@@ -41,7 +41,6 @@ export function StorageGroupsComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={
diff --git a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx
@@ -184,7 +184,6 @@ export function GroupedStorageNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}
diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx
@@ -45,7 +45,6 @@ export function StorageNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={
diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx
@@ -4,24 +4,17 @@ import {skipToken} from '@reduxjs/toolkit/query';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import {TableColumnSetup} from '../../../../components/TableColumnSetup/TableColumnSetup';
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList';
 import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions';
 import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic';
 import {cn} from '../../../../utils/cn';
-import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants';
-import {
-    useAutoRefreshInterval,
-    useSetting,
-    useTypedDispatch,
-    useTypedSelector,
-} from '../../../../utils/hooks';
-
-import {
-    PartitionsControls,
-    PartitionsTableColumnSetup,
-} from './PartitionsControls/PartitionsControls';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {useAutoRefreshInterval, 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';
@@ -64,9 +57,7 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
     const nodesLoading = nodesIsFetching && nodesData === undefined;
     const nodeHostsMap = useTypedSelector((state) => selectNodesMap(state, database));
 
-    const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(PARTITIONS_HIDDEN_COLUMNS_KEY);
-
-    const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
+    const {columnsToShow, columnsToSelect, setColumns} = useGetPartitionsColumns(selectedConsumer);
 
     const params = topicLoading
         ? skipToken
@@ -95,14 +86,6 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
         }
     }, [dispatch, topicLoading, selectedConsumer, consumers]);
 
-    const columnsToShow = React.useMemo(() => {
-        return columns.filter((column) => !hiddenColumns.includes(column.name));
-    }, [columns, hiddenColumns]);
-
-    const hadleTableColumnsSetupChange = (newHiddenColumns: string[]) => {
-        setHiddenColumns(newHiddenColumns);
-    };
-
     const handleSelectedConsumerChange = (value?: string) => {
         dispatch(setSelectedConsumer(value));
     };
@@ -125,13 +108,7 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
     };
 
     const renderExtraControls = () => {
-        return (
-            <PartitionsTableColumnSetup
-                hiddenColumns={hiddenColumns}
-                onHiddenColumnsChange={hadleTableColumnsSetupChange}
-                initialColumnsIds={columnsIdsForSelector}
-            />
-        );
+        return <TableColumnSetup items={columnsToSelect} showStatus onUpdate={setColumns} />;
     };
 
     const renderContent = () => {
diff --git a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
 
-import type {SelectOption, TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit';
+import type {SelectOption} from '@gravity-ui/uikit';
 import {Select} from '@gravity-ui/uikit';
 import escapeRegExp from 'lodash/escapeRegExp';
 
 import {Search} from '../../../../../components/Search/Search';
-import {TableColumnSetup} from '../../../../../components/TableColumnSetup/TableColumnSetup';
-import type {ValueOf} from '../../../../../types/common';
 import {b} from '../Partitions';
 import i18n from '../i18n';
-import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES} from '../utils/constants';
 import type {PreparedPartitionDataWithHosts} from '../utils/types';
 
 interface PartitionsControlsProps {
@@ -132,61 +129,3 @@ export const PartitionsControls = ({
         </React.Fragment>
     );
 };
-
-interface PartitionsTableColumnSetupProps {
-    hiddenColumns: string[];
-    onHiddenColumnsChange: (newHiddenColumns: string[]) => void;
-    initialColumnsIds: string[];
-}
-
-export function PartitionsTableColumnSetup({
-    hiddenColumns,
-    onHiddenColumnsChange,
-    initialColumnsIds,
-}: PartitionsTableColumnSetupProps) {
-    const columnsToSelect = React.useMemo(() => {
-        const columns: TableColumnSetupItem[] = [];
-        for (const id of initialColumnsIds) {
-            const isId = id === PARTITIONS_COLUMNS_IDS.PARTITION_ID;
-            const column: TableColumnSetupItem = {
-                title: PARTITIONS_COLUMNS_TITLES[id as ValueOf<typeof PARTITIONS_COLUMNS_IDS>],
-                selected: Boolean(!hiddenColumns.includes(id)),
-                id: id,
-                required: isId,
-                sticky: isId ? 'start' : undefined,
-            };
-            if (isId) {
-                columns.unshift(column);
-            } else {
-                columns.push(column);
-            }
-        }
-        return columns;
-    }, [initialColumnsIds, hiddenColumns]);
-    const handleTableColumnsSetupChange: TableColumnSetupProps['onUpdate'] = (value) => {
-        const result = [...hiddenColumns];
-
-        // Process current set of columns
-        // This way we do not remove from hidden these columns, that are not displayed currently
-        // The reasons: set of columns differs for partitions with and without consumers
-        value.forEach((el) => {
-            if (!el.selected && !hiddenColumns.includes(el.id)) {
-                result.push(el.id);
-            } else if (el.selected && hiddenColumns.includes(el.id)) {
-                result.splice(hiddenColumns.indexOf(el.id));
-            }
-        });
-
-        onHiddenColumnsChange(result);
-    };
-    return (
-        <TableColumnSetup
-            key="TableColumnSetup"
-            popupWidth={242}
-            items={columnsToSelect}
-            showStatus
-            onUpdate={handleTableColumnsSetupChange}
-            sortable={false}
-        />
-    );
-}
diff --git a/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts b/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts
@@ -1,28 +1,62 @@
 import React from 'react';
 
-import type {Column} from '@gravity-ui/react-data-table';
-
+import {useSelectedColumns} from '../../../../../utils/hooks/useSelectedColumns';
 import {allColumns, generalColumns} from '../columns';
 
-import {allPartitionsColumnsIds, generalPartitionColumnsIds} from './constants';
-import type {PreparedPartitionDataWithHosts} from './types';
+import {
+    PARTITIONS_COLUMNS_IDS,
+    PARTITIONS_COLUMNS_TITLES,
+    allPartitionsColumnsIds,
+    generalPartitionColumnsIds,
+} from './constants';
 
 // Columns are different for partitions with consumers and without
-export const useGetPartitionsColumns = (
-    selectedConsumer: string | undefined,
-): [Column<PreparedPartitionDataWithHosts>[], string[]] => {
-    const [columns, setColumns] = React.useState<Column<PreparedPartitionDataWithHosts>[]>([]);
-    const [columnsIdsForSelector, setColumnsIdsForSelector] = React.useState<string[]>([]);
+export const useGetPartitionsColumns = (selectedConsumer: string | undefined) => {
+    const {
+        columnsToShow: allColumnsToShow,
+        columnsToSelect: allColumnsToSelect,
+        setColumns: setAllColumns,
+    } = useSelectedColumns(
+        allColumns,
+        'partitionsSelectedColumns',
+        PARTITIONS_COLUMNS_TITLES,
+        allPartitionsColumnsIds,
+        [PARTITIONS_COLUMNS_IDS.PARTITION_ID],
+    );
+    const {
+        columnsToShow: generalColumnsToShow,
+        columnsToSelect: generalColumnsToSelect,
+        setColumns: setGeneralColumns,
+    } = useSelectedColumns(
+        generalColumns,
+        'generalPartitionsSelectedColumns',
+        PARTITIONS_COLUMNS_TITLES,
+        generalPartitionColumnsIds,
+        [PARTITIONS_COLUMNS_IDS.PARTITION_ID],
+    );
 
-    React.useEffect(() => {
+    const columns = React.useMemo(() => {
         if (selectedConsumer) {
-            setColumns(allColumns);
-            setColumnsIdsForSelector(allPartitionsColumnsIds);
-        } else {
-            setColumns(generalColumns);
-            setColumnsIdsForSelector(generalPartitionColumnsIds);
+            return {
+                columnsToShow: allColumnsToShow,
+                columnsToSelect: allColumnsToSelect,
+                setColumns: setAllColumns,
+            };
         }
-    }, [selectedConsumer]);
 
-    return [columns, columnsIdsForSelector];
+        return {
+            columnsToShow: generalColumnsToShow,
+            columnsToSelect: generalColumnsToSelect,
+            setColumns: setGeneralColumns,
+        };
+    }, [
+        allColumnsToSelect,
+        allColumnsToShow,
+        generalColumnsToSelect,
+        generalColumnsToShow,
+        selectedConsumer,
+        setAllColumns,
+        setGeneralColumns,
+    ]);
+    return columns;
 };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx
@@ -78,7 +78,6 @@ export const RunningQueriesData = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
@@ -133,7 +133,6 @@ export const TopQueriesData = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     };
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx
@@ -278,7 +278,6 @@ export function TopicData({scrollContainerRef, path, database, databaseFullPath}
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     }, [columnsToSelect, setColumns]);
diff --git a/src/utils/hooks/useSelectedColumns.ts b/src/utils/hooks/useSelectedColumns.ts

Original file line number	Diff line number	Diff line change
`@@ -213,7 +213,6 @@ export function GroupedNodesComponent({`
`213`	`213`	`items={columnsToSelect}`
`214`	`214`	`showStatus`
`215`	`215`	`onUpdate={setColumns}`
`216`		`- sortable={false}`
`217`	`216`	`/>`
`218`	`217`	`}`
`219`	`218`	`error={error ? <ResponseError error={error} /> : null}`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,6 @@ export function NodesComponent({`
`70`	`70`	`items={columnsToSelect}`
`71`	`71`	`showStatus`
`72`	`72`	`onUpdate={setColumns}`
`73`		`- sortable={false}`
`74`	`73`	`/>`
`75`	`74`	`}`
`76`	`75`	`table={`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,6 @@ export function GroupedStorageGroupsComponent({`
`183`	`183`	`items={columnsToSelect}`
`184`	`184`	`showStatus`
`185`	`185`	`onUpdate={setColumns}`
`186`		`- sortable={false}`
`187`	`186`	`/>`
`188`	`187`	`}`
`189`	`188`	`error={error ? <ResponseError error={error} /> : null}`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@ export function StorageGroupsComponent({`
`41`	`41`	`items={columnsToSelect}`
`42`	`42`	`showStatus`
`43`	`43`	`onUpdate={setColumns}`
`44`		`- sortable={false}`
`45`	`44`	`/>`
`46`	`45`	`}`
`47`	`46`	`table={`
Original file line number	Diff line number	Diff line change
`@@ -184,7 +184,6 @@ export function GroupedStorageNodesComponent({`
`184`	`184`	`items={columnsToSelect}`
`185`	`185`	`showStatus`
`186`	`186`	`onUpdate={setColumns}`
`187`		`- sortable={false}`
`188`	`187`	`/>`
`189`	`188`	`}`
`190`	`189`	`error={error ? <ResponseError error={error} /> : null}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,6 @@ export function StorageNodesComponent({`
`45`	`45`	`items={columnsToSelect}`
`46`	`46`	`showStatus`
`47`	`47`	`onUpdate={setColumns}`
`48`		`- sortable={false}`
`49`	`48`	`/>`
`50`	`49`	`}`
`51`	`50`	`table={`