Implement sticky header, resizable and sortable columns for VDisk tablets table

Co-authored-by: Raubzeug <[email protected]>

Author: Copilot

src/containers/VDiskPage/VDiskTablets/VDiskTablets.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {useTable} from '@gravity-ui/table';
 import {skipToken} from '@reduxjs/toolkit/query';
+import type {SortingState} from '@tanstack/react-table';
 
 import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {Table} from '../../../components/Table/Table';
@@ -25,6 +26,9 @@ interface VDiskTabletsProps {
 
 export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTabletsProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const [sorting, setSorting] = React.useState<SortingState>([
+        {id: 'Size', desc: true}, // Default sort by size descending
+    ]);
 
     const params = nodeId && pDiskId && vDiskSlotId ? {nodeId, pDiskId, vDiskSlotId} : skipToken;
 
@@ -34,7 +38,7 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
 
     const loading = isFetching && currentData === undefined;
 
-    // Transform the actual API response structure into the expected flat table format
+    // Remove the manual sorting since we'll let the table handle it with enableSorting
     const tableData: VDiskBlobIndexItem[] = React.useMemo(() => {
         if (!currentData) {
             return [];
@@ -76,20 +80,18 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
         return flatData;
     }, [currentData]);
 
-    // Sort by size descending by default
-    const sortedData = React.useMemo(() => {
-        return [...tableData].sort((a, b) => {
-            const sizeA = Number(a.Size) || 0;
-            const sizeB = Number(b.Size) || 0;
-            return sizeB - sizeA;
-        });
-    }, [tableData]);
-
     const columns = React.useMemo(() => getColumns(), []);
 
     const table = useTable({
         columns,
-        data: sortedData,
+        data: tableData,
+        enableSorting: true,
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        onSortingChange: setSorting,
+        state: {
+            sorting,
+        },
     });
 
     if (error) {
@@ -106,7 +108,7 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
 
     return (
         <div className={vDiskTabletsCn(null, className)}>
-            <Table table={table} />
+            <Table table={table} stickyHeader width="max" />
         </div>
     );
 }

src/containers/VDiskPage/VDiskTablets/columns.tsx

@@ -24,7 +24,7 @@ function TabletIdCell({row}: CellContext<VDiskBlobIndexItem, unknown>) {
 function MetricsCell({row, column}: CellContext<VDiskBlobIndexItem, unknown>) {
     const item = row.original;
     const fieldName = column.id;
-    
+
     // Handle both PascalCase and camelCase field names
     let value;
     if (fieldName === 'ChannelId') {
@@ -34,7 +34,7 @@ function MetricsCell({row, column}: CellContext<VDiskBlobIndexItem, unknown>) {
     } else {
         value = item[fieldName];
     }
-    
+
     return <span className={b('metrics-cell')}>{value ?? '-'}</span>;
 }
 
@@ -51,28 +51,37 @@ export function getColumns() {
             accessorKey: 'TabletId',
             header: () => <ColumnHeader>{vDiskPageKeyset('tablet-id')}</ColumnHeader>,
             size: 150,
+            minSize: 100,
             cell: TabletIdCell,
+            enableSorting: true,
         },
         {
             accessorKey: 'ChannelId',
             header: () => <ColumnHeader>{vDiskPageKeyset('channel-id')}</ColumnHeader>,
             size: 100,
+            minSize: 80,
             cell: MetricsCell,
             meta: {align: 'right'},
+            enableSorting: true,
         },
         {
             accessorKey: 'Count',
             header: () => <ColumnHeader>{vDiskPageKeyset('count')}</ColumnHeader>,
             size: 100,
+            minSize: 80,
             cell: MetricsCell,
             meta: {align: 'right'},
+            enableSorting: true,
         },
         {
             accessorKey: 'Size',
             header: () => <ColumnHeader>{vDiskPageKeyset('size')}</ColumnHeader>,
             size: 120,
+            minSize: 100,
             cell: SizeCell,
             meta: {align: 'right'},
+            enableSorting: true,
+            sortingFn: 'basic', // Use basic sorting for numeric values
         },
     ];