Refactor VDisk tablets table to use project patterns with ResizeableDataTable

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

Author: Copilot

src/containers/VDiskPage/VDiskTablets/VDiskTablets.tsx

@@ -1,21 +1,29 @@
 import React from 'react';
 
-import {useTable} from '@gravity-ui/table';
+import type {Column} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-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';
+import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import {vDiskApi} from '../../../store/reducers/vdisk/vdisk';
 import type {VDiskBlobIndexItem} from '../../../types/api/vdiskBlobIndex';
 import {cn} from '../../../utils/cn';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
 
 import {getColumns} from './columns';
+import {vDiskPageKeyset} from '../i18n';
 
 import './VDiskTablets.scss';
 
 const vDiskTabletsCn = cn('ydb-vdisk-tablets');
+const VDISK_TABLETS_COLUMNS_WIDTH_LS_KEY = 'vdiskTabletsColumnsWidth';
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+    highlightRows: true,
+    stickyHead: DataTable.MOVING,
+};
 
 interface VDiskTabletsProps {
     nodeId?: string | number;
@@ -26,9 +34,6 @@ 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;
 
@@ -38,19 +43,14 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
 
     const loading = isFetching && currentData === undefined;
 
-    // Remove the manual sorting since we'll let the table handle it with enableSorting
     const tableData: VDiskBlobIndexItem[] = React.useMemo(() => {
         if (!currentData) {
             return [];
         }
 
-        // Debug: Log the actual response structure
-        console.info('VDisk BlobIndexStat Response:', currentData);
-
         // Check if we have the expected structure: {stat: {tablets: [...]}}
         const stat = currentData.stat;
         if (!stat || !Array.isArray(stat.tablets)) {
-            console.info('No stat.tablets array found in response');
             return [];
         }
 
@@ -76,24 +76,11 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
             });
         });
 
-        console.info('Transformed data:', flatData);
         return flatData;
     }, [currentData]);
 
     const columns = React.useMemo(() => getColumns(), []);
 
-    const table = useTable({
-        columns,
-        data: tableData,
-        enableSorting: true,
-        enableColumnResizing: true,
-        columnResizeMode: 'onChange',
-        onSortingChange: setSorting,
-        state: {
-            sorting,
-        },
-    });
-
     if (error) {
         return (
             <div className={vDiskTabletsCn('error', className)}>
@@ -108,7 +95,17 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
 
     return (
         <div className={vDiskTabletsCn(null, className)}>
-            <Table table={table} stickyHeader width="max" />
+            <ResizeableDataTable
+                columnsWidthLSKey={VDISK_TABLETS_COLUMNS_WIDTH_LS_KEY}
+                data={tableData}
+                columns={columns}
+                settings={TABLE_SETTINGS}
+                loading={loading}
+                initialSortOrder={{
+                    columnId: vDiskPageKeyset('size'),
+                    order: DataTable.DESCENDING,
+                }}
+            />
         </div>
     );
 }

src/containers/VDiskPage/VDiskTablets/columns.tsx

@@ -1,89 +1,47 @@
-import type {CellContext, ColumnDef} from '@tanstack/react-table';
+import type {Column} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import {InternalLink} from '../../../components/InternalLink/InternalLink';
-import {ColumnHeader} from '../../../components/Table/Table';
 import {getTabletPagePath} from '../../../routes';
 import type {VDiskBlobIndexItem} from '../../../types/api/vdiskBlobIndex';
-import {cn} from '../../../utils/cn';
 import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
 import {vDiskPageKeyset} from '../i18n';
 
-const b = cn('ydb-vdisk-tablets');
-
-function TabletIdCell({row}: CellContext<VDiskBlobIndexItem, unknown>) {
-    const item = row.original;
-    const tabletId = item.TabletId || item.tabletId;
-
-    if (!tabletId) {
-        return <span>-</span>;
-    }
-
-    return <InternalLink to={getTabletPagePath(String(tabletId))}>{tabletId}</InternalLink>;
-}
-
-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') {
-        value = item.ChannelId ?? item.channelId;
-    } else if (fieldName === 'Count') {
-        value = item.Count ?? item.count;
-    } else {
-        value = item[fieldName];
-    }
-
-    return <span className={b('metrics-cell')}>{value ?? '-'}</span>;
-}
-
-function SizeCell({row}: CellContext<VDiskBlobIndexItem, unknown>) {
-    const item = row.original;
-    const size = item.Size ?? item.size;
-    const numericSize = Number(size) || 0;
-    return <span className={b('size-cell')}>{formatBytes(numericSize)}</span>;
-}
-
-export function getColumns() {
-    const columns: ColumnDef<VDiskBlobIndexItem>[] = [
+export function getColumns(): Column<VDiskBlobIndexItem>[] {
+    return [
         {
-            accessorKey: 'TabletId',
-            header: () => <ColumnHeader>{vDiskPageKeyset('tablet-id')}</ColumnHeader>,
-            size: 150,
-            minSize: 100,
-            cell: TabletIdCell,
-            enableSorting: true,
+            name: vDiskPageKeyset('tablet-id'),
+            render: ({row}) => {
+                const tabletId = row.TabletId;
+                if (!tabletId) {
+                    return <span>-</span>;
+                }
+                return <InternalLink to={getTabletPagePath(String(tabletId))}>{tabletId}</InternalLink>;
+            },
+            width: 150,
         },
         {
-            accessorKey: 'ChannelId',
-            header: () => <ColumnHeader>{vDiskPageKeyset('channel-id')}</ColumnHeader>,
-            size: 100,
-            minSize: 80,
-            cell: MetricsCell,
-            meta: {align: 'right'},
-            enableSorting: true,
+            name: vDiskPageKeyset('channel-id'),
+            align: DataTable.RIGHT,
+            render: ({row}) => row.ChannelId ?? '-',
+            width: 100,
         },
         {
-            accessorKey: 'Count',
-            header: () => <ColumnHeader>{vDiskPageKeyset('count')}</ColumnHeader>,
-            size: 100,
-            minSize: 80,
-            cell: MetricsCell,
-            meta: {align: 'right'},
-            enableSorting: true,
+            name: vDiskPageKeyset('count'),
+            align: DataTable.RIGHT,
+            render: ({row}) => row.Count ?? '-',
+            width: 100,
         },
         {
-            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
+            name: vDiskPageKeyset('size'),
+            align: DataTable.RIGHT,
+            render: ({row}) => {
+                const size = row.Size;
+                const numericSize = Number(size) || 0;
+                return formatBytes(numericSize);
+            },
+            width: 120,
+            sortAccessor: (row) => row.Size || 0,
         },
     ];
-
-    return columns;
 }