feat: make tables resizeable

package.json

@@ -19,7 +19,7 @@
     "@gravity-ui/icons": "^2.9.1",
     "@gravity-ui/navigation": "^2.7.0",
     "@gravity-ui/paranoid": "^1.4.1",
-    "@gravity-ui/react-data-table": "^2.0.1",
+    "@gravity-ui/react-data-table": "^2.1.1",
     "@gravity-ui/uikit": "^6.10.2",
     "@gravity-ui/websql-autocomplete": "^8.1.0",
     "@reduxjs/toolkit": "^2.2.3",

src/components/DateRange/DateRange.scss

@@ -1,11 +1,18 @@
 .date-range {
     &__input {
         min-width: 190px;
+        height: 28px;
         padding: 5px 8px;
 
         color: var(--g-color-text-primary);
         border: 1px solid var(--g-color-line-generic);
         border-radius: var(--g-border-radius-m);
+        outline: none;
         background: transparent;
     }
+
+    &__input:focus,
+    &__input:focus-visible {
+        border: 1px solid var(--g-color-line-generic-hover);
+    }
 }

src/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,10 +1,4 @@
 .ydb-node-host-wrapper {
-    &__host-wrapper {
-        display: flex;
-
-        width: 330px;
-    }
-
     &__host {
         overflow: hidden;
     }

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -39,25 +39,18 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
             placement={['top', 'bottom']}
             behavior={PopoverBehavior.Immediate}
         >
-            <div className={b('host-wrapper')}>
-                <EntityStatus
-                    name={node.Host}
-                    status={node.SystemState}
-                    path={nodePath}
-                    hasClipboardButton
-                    className={b('host')}
-                />
-                {nodeRef && (
-                    <Button
-                        size="s"
-                        href={nodeRef}
-                        className={b('external-button')}
-                        target="_blank"
-                    >
-                        <Icon name="external" />
-                    </Button>
-                )}
-            </div>
+            <EntityStatus
+                name={node.Host}
+                status={node.SystemState}
+                path={nodePath}
+                hasClipboardButton
+                className={b('host')}
+            />
+            {nodeRef && (
+                <Button size="s" href={nodeRef} className={b('external-button')} target="_blank">
+                    <Icon name="external" />
+                </Button>
+            )}
         </CellWithPopover>
     );
 };

src/components/QueryResultTable/QueryResultTable.scss

@@ -2,6 +2,7 @@
 
 .ydb-query-result-table {
     &__cell {
+        width: 100%;
         @include cell-container;
     }
 

src/components/QueryResultTable/QueryResultTable.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
 import DataTable from '@gravity-ui/react-data-table';
-import type {Column, DataTableProps, Settings} from '@gravity-ui/react-data-table';
+import type {Column, Settings} from '@gravity-ui/react-data-table';
 
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getColumnType, prepareQueryResponse} from '../../utils/query';
 import {isNumeric} from '../../utils/utils';
+import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable';
+import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable';
 
 import {Cell} from './Cell';
 import i18n from './i18n';
@@ -70,7 +72,7 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
 const getRowIndex = (_: unknown, index: number) => index;
 
 interface QueryResultTableProps
-    extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
+    extends Omit<ResizeableDataTableProps<KeyValueRow>, 'data' | 'columns'> {
     data?: KeyValueRow[];
     columns?: ColumnType[];
 }
@@ -101,8 +103,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
     }
 
     return (
-        <DataTable
-            theme="yandex-cloud"
+        <ResizeableDataTable
             data={data}
             columns={columns}
             settings={settings}

src/components/ResizeableDataTable/ResizeableDataTable.scss

@@ -0,0 +1,8 @@
+.ydb-resizeable-data-table {
+    display: flex;
+
+    width: max-content;
+
+    // padding for easier resize of the last column
+    padding-right: 20px;
+}

src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -0,0 +1,43 @@
+import type {DataTableProps, Settings} from '@gravity-ui/react-data-table';
+import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
+
+import {cn} from '../../utils/cn';
+import {useTableResize} from '../../utils/hooks/useTableResize';
+
+import './ResizeableDataTable.scss';
+
+const b = cn('ydb-resizeable-data-table');
+
+export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'theme' | 'onResize'> {
+    columnsWidthLSKey?: string;
+    wrapperClassName?: string;
+}
+
+export function ResizeableDataTable<T>({
+    columnsWidthLSKey,
+    columns,
+    settings,
+    wrapperClassName,
+    ...props
+}: ResizeableDataTableProps<T>) {
+    const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
+
+    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+
+    const newSettings: Settings = {
+        ...settings,
+        defaultResizeable: true,
+    };
+
+    return (
+        <div className={b(null, wrapperClassName)}>
+            <DataTable
+                theme="yandex-cloud"
+                columns={updatedColumns}
+                onResize={setTableColumnsWidth}
+                settings={newSettings}
+                {...props}
+            />
+        </div>
+    );
+}

src/components/VirtualTable/ResizeHandler.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import {b} from './shared';
+import {calculateColumnWidth, rafThrottle} from './utils';
+
+interface ResizeHandlerProps {
+    maxWidth?: number;
+    minWidth?: number;
+    getCurrentColumnWidth: () => number | undefined;
+    onResize?: (width: number) => void;
+}
+
+export function ResizeHandler({
+    minWidth,
+    maxWidth,
+    getCurrentColumnWidth,
+    onResize,
+}: ResizeHandlerProps) {
+    const elementRef = React.useRef<HTMLElement>(null);
+
+    const [resizing, setResizing] = React.useState(false);
+
+    React.useEffect(() => {
+        const element = elementRef.current;
+
+        if (!element) {
+            return undefined;
+        }
+
+        let mouseXPosition: number | undefined;
+        let initialColumnWidth: number | undefined;
+        let currentColumnWidth: number | undefined;
+
+        const onMouseMove = rafThrottle((e: MouseEvent) => {
+            restrictMouseEvent(e);
+
+            if (typeof mouseXPosition !== 'number' || typeof initialColumnWidth !== 'number') {
+                return;
+            }
+
+            const xDiff = e.clientX - mouseXPosition;
+
+            const newWidth = calculateColumnWidth(initialColumnWidth + xDiff, minWidth, maxWidth);
+
+            if (newWidth === currentColumnWidth) {
+                return;
+            }
+
+            currentColumnWidth = newWidth;
+
+            onResize?.(currentColumnWidth);
+        });
+
+        const onMouseUp = (e: MouseEvent) => {
+            restrictMouseEvent(e);
+
+            if (currentColumnWidth !== undefined) {
+                onResize?.(currentColumnWidth);
+            }
+
+            setResizing(false);
+            mouseXPosition = undefined;
+
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+            initialColumnWidth = getCurrentColumnWidth();
+
+            restrictMouseEvent(e);
+
+            mouseXPosition = e.clientX;
+
+            setResizing(true);
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        };
+
+        element.addEventListener('mousedown', onMouseDown);
+
+        return () => {
+            element.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [onResize, minWidth, maxWidth, getCurrentColumnWidth]);
+
+    return (
+        <span
+            ref={elementRef}
+            className={b('resize-handler', {resizing})}
+            // Prevent sort trigger on resize
+            onClick={(e) => restrictMouseEvent(e)}
+        />
+    );
+}
+
+// Prevent sort trigger and text selection on resize
+function restrictMouseEvent<
+    T extends {preventDefault: VoidFunction; stopPropagation: VoidFunction},
+>(e: T) {
+    e.preventDefault();
+    e.stopPropagation();
+}

src/components/VirtualTable/ResizeableVirtualTable.tsx

@@ -0,0 +1,31 @@
+import type {ColumnWidthByName} from '@gravity-ui/react-data-table';
+
+import {useTableResize} from '../../utils/hooks/useTableResize';
+
+import type {VirtualTableProps} from './VirtualTable';
+import {VirtualTable} from './VirtualTable';
+import type {Column} from './types';
+
+function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWidthByName) {
+    return columns.map((column) => {
+        return {...column, width: columnsWidthSetup[column.name] ?? column.width};
+    });
+}
+
+interface ResizeableVirtualTableProps<T> extends Omit<VirtualTableProps<T>, 'onColumnsResize'> {
+    columnsWidthLSKey: string;
+}
+
+export function ResizeableVirtualTable<T>({
+    columnsWidthLSKey,
+    columns,
+    ...props
+}: ResizeableVirtualTableProps<T>) {
+    const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
+
+    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+
+    return (
+        <VirtualTable columns={updatedColumns} onColumnsResize={setTableColumnsWidth} {...props} />
+    );
+}