feat(TableColumnSetup): support sortable columns

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,

src/containers/Clusters/Clusters.tsx

@@ -211,7 +211,6 @@ export function Clusters() {
                         items={columnsToSelect}
                         showStatus
                         onUpdate={setColumns}
-                        sortable={false}
                     />
                 </Flex>
                 {clusters?.length ? (

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}

src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -70,7 +70,6 @@ export function NodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={

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}

src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx

@@ -41,7 +41,6 @@ export function StorageGroupsComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={

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}

src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -45,7 +45,6 @@ export function StorageNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={

src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -4,27 +4,27 @@ 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 {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 
-import {
-    PartitionsControls,
-    PartitionsTableColumnSetup,
-} from './PartitionsControls/PartitionsControls';
+import {PartitionsControls} from './PartitionsControls/PartitionsControls';
 import {PARTITIONS_COLUMNS_WIDTH_LS_KEY} from './columns';
 import i18n from './i18n';
 import {addHostToPartitions} from './utils';
+import {
+    PARTITIONS_COLUMNS_IDS,
+    PARTITIONS_COLUMNS_TITLES,
+    allPartitionsColumnsIds,
+    generalPartitionColumnsIds,
+} from './utils/constants';
 import type {PreparedPartitionDataWithHosts} from './utils/types';
 import {useGetPartitionsColumns} from './utils/useGetPartitionsColumns';
 
@@ -64,9 +64,15 @@ 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 = useGetPartitionsColumns(selectedConsumer);
 
-    const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
+    const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
+        columns,
+        'partitionsSelectedColumns',
+        PARTITIONS_COLUMNS_TITLES,
+        selectedConsumer ? allPartitionsColumnsIds : generalPartitionColumnsIds,
+        [PARTITIONS_COLUMNS_IDS.PARTITION_ID],
+    );
 
     const params = topicLoading
         ? skipToken
@@ -95,14 +101,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 +123,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 = () => {

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

src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts

@@ -1,28 +1,16 @@
 import React from 'react';
 
-import type {Column} from '@gravity-ui/react-data-table';
-
 import {allColumns, generalColumns} from '../columns';
 
-import {allPartitionsColumnsIds, generalPartitionColumnsIds} from './constants';
-import type {PreparedPartitionDataWithHosts} from './types';
-
 // 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[]>([]);
-
-    React.useEffect(() => {
+export const useGetPartitionsColumns = (selectedConsumer: string | undefined) => {
+    const columns = React.useMemo(() => {
         if (selectedConsumer) {
-            setColumns(allColumns);
-            setColumnsIdsForSelector(allPartitionsColumnsIds);
-        } else {
-            setColumns(generalColumns);
-            setColumnsIdsForSelector(generalPartitionColumnsIds);
+            return allColumns;
         }
+
+        return generalColumns;
     }, [selectedConsumer]);
 
-    return [columns, columnsIdsForSelector];
+    return columns;
 };

src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

@@ -78,7 +78,6 @@ export const RunningQueriesData = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     };

src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

@@ -133,7 +133,6 @@ export const TopQueriesData = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     };

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