fix(VirtualTable): make table resizeable by default (#772)

Author: artemmufazalov

src/components/VirtualTable/TableHead.tsx

@@ -6,7 +6,13 @@ import type {
 } from '../../utils/hooks/useTableResize';
 
 import type {Column, OnSort, SortOrderType, SortParams} from './types';
-import {ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING} from './constants';
+import {
+    ASCENDING,
+    DEFAULT_RESIZEABLE,
+    DEFAULT_SORT_ORDER,
+    DEFAULT_TABLE_ROW_HEIGHT,
+    DESCENDING,
+} from './constants';
 import {b} from './shared';
 
 const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
@@ -45,6 +51,7 @@ const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconP
 
 interface TableHeadCellProps<T> {
     column: Column<T>;
+    resizeable?: boolean;
     sortOrder?: SortOrderType;
     defaultSortOrder: SortOrderType;
     onSort?: (columnName: string) => void;
@@ -55,6 +62,7 @@ interface TableHeadCellProps<T> {
 
 export const TableHeadCell = <T,>({
     column,
+    resizeable,
     sortOrder,
     defaultSortOrder,
     onSort,
@@ -82,9 +90,7 @@ export const TableHeadCell = <T,>({
         <th>
             <div
                 ref={cellWrapperRef}
-                className={b('head-cell-wrapper', {
-                    resizeable: column.resizeable,
-                })}
+                className={b('head-cell-wrapper', {resizeable})}
                 style={{
                     height: `${rowHeight}px`,
                     width: `${column.width}px`,
@@ -213,10 +219,14 @@ export const TableHead = <T,>({
                         const sortOrder =
                             sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
 
+                        const resizeable =
+                            onColumnsResize && (column.resizeable ?? DEFAULT_RESIZEABLE);
+
                         return (
                             <TableHeadCell
                                 key={column.name}
                                 column={column}
+                                resizeable={resizeable}
                                 sortOrder={sortOrder}
                                 defaultSortOrder={defaultSortOrder}
                                 onSort={handleSort}

src/components/VirtualTable/constants.ts

@@ -3,6 +3,7 @@ export const CENTER = 'center';
 export const RIGHT = 'right';
 
 export const DEFAULT_ALIGN = LEFT;
+export const DEFAULT_RESIZEABLE = true;
 
 export const ASCENDING = 1;
 export const DESCENDING = -1;

src/containers/Nodes/getNodesColumns.tsx

@@ -90,7 +90,6 @@ const versionColumn: NodesColumn = {
         return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
     },
     sortable: false,
-    resizeable: true,
 };
 
 const uptimeColumn: NodesColumn = {

src/utils/hooks/useTableResize.ts

@@ -1,6 +1,6 @@
 import {useCallback, useState} from 'react';
 import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
-import type {Column as VirtualTableColumn} from '../../components/VirtualTable';
+import {DEFAULT_RESIZEABLE, type Column as VirtualTableColumn} from '../../components/VirtualTable';
 import {settingsManager} from '../../services/settings';
 
 export type Column<T> = VirtualTableColumn<T> & DataTableColumn<T>;
@@ -14,7 +14,9 @@ export const updateColumnsWidth = <T>(
     columnsWidthSetup: TableColumnsWidthSetup,
 ) => {
     return columns.map((column) => {
-        if (!column.resizeable) {
+        const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
+
+        if (!resizeable) {
             return column;
         }
         return {...column, width: columnsWidthSetup[column.name] ?? column.width};