feat: add wrapper for gravity-ui/table

package.json

@@ -22,7 +22,7 @@
     "@gravity-ui/navigation": "^2.16.0",
     "@gravity-ui/paranoid": "^2.0.1",
     "@gravity-ui/react-data-table": "^2.1.1",
-    "@gravity-ui/table": "^0.5.0",
+    "@gravity-ui/table": "^1.7.0",
     "@gravity-ui/uikit": "^6.33.0",
     "@gravity-ui/websql-autocomplete": "^12.1.2",
     "@hookform/resolvers": "^3.9.0",

src/components/Table/Table.scss

@@ -0,0 +1,60 @@
+@use '../../styles/mixins.scss';
+
+.ydb-table {
+    $block: &;
+    --ydb-table-cell-height: 40px;
+    &__table-header-content {
+        display: inline-flex;
+        align-items: center;
+
+        width: 100%;
+        height: 100%;
+        padding: var(--g-spacing-1) var(--g-spacing-2);
+
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+    &__table {
+        table-layout: fixed;
+        border-spacing: 0px;
+        border-collapse: collapse;
+        tr {
+            &:hover {
+                background-color: var(--g-color-base-simple-hover) !important;
+            }
+        }
+        tr:nth-of-type(2n + 1) {
+            background-color: var(--g-color-base-generic-ultralight);
+        }
+    }
+    &__table_width_max {
+        width: 100%;
+    }
+    &__table-header-cell {
+        height: var(--ydb-table-cell-height) !important;
+        padding: 0;
+
+        text-align: left;
+        vertical-align: middle;
+
+        background-color: var(--g-color-base-background);
+        @include mixins.text-subheader-2();
+        &_align_right {
+            #{$block}__table-header-content {
+                justify-content: flex-end;
+
+                text-align: right;
+            }
+        }
+    }
+    &__table-cell {
+        height: var(--ydb-table-cell-height) !important;
+        padding: 0;
+        @include mixins.text-body-2();
+        &_align_right {
+            text-align: right;
+        }
+        &_vertical-align_top {
+            vertical-align: top;
+        }
+    }
+}

src/components/Table/Table.tsx

@@ -0,0 +1,42 @@
+import type {BaseTableProps} from '@gravity-ui/table';
+import {BaseTable} from '@gravity-ui/table';
+
+import {cn} from '../../utils/cn';
+
+import './Table.scss';
+
+const block = cn('ydb-table');
+
+interface TableProps<TData> extends BaseTableProps<TData> {
+    width?: 'max' | 'auto';
+    wrapperClassName?: string;
+}
+
+interface ColumnHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function ColumnHeader({children, className}: ColumnHeaderProps) {
+    return <div className={block('table-header-content', className)}>{children}</div>;
+}
+
+export function Table<TData>({className, width, wrapperClassName, ...props}: TableProps<TData>) {
+    return (
+        <div className={block(null, wrapperClassName)}>
+            <BaseTable
+                headerCellClassName={({column}) => {
+                    const align = column.columnDef.meta?.align;
+                    return block('table-header-cell', {align});
+                }}
+                cellClassName={(cell) => {
+                    const align = cell?.column.columnDef.meta?.align;
+                    const verticalAlign = cell?.column.columnDef.meta?.verticalAlign;
+                    return block('table-cell', {align, 'vertical-align': verticalAlign});
+                }}
+                className={block('table', {width}, className)}
+                {...props}
+            />
+        </div>
+    );
+}

src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss

@@ -2,58 +2,7 @@
 
 .ydb-tablet-storage-info {
     $block: &;
-    &__table {
-        table-layout: fixed;
-        border-spacing: 0px;
-        border-collapse: collapse;
-        tr {
-            &:hover {
-                background-color: var(--g-color-base-simple-hover-solid) !important;
-            }
-        }
-        tr:nth-of-type(2n + 1) {
-            background-color: var(--g-color-base-generic-ultralight);
-        }
-        :is(#{$block}__table-header-cell) {
-            height: 40px;
-            padding: 0;
 
-            text-align: left;
-
-            background-color: var(--g-color-base-background);
-            @include mixins.text-subheader-2();
-        }
-        :is(#{$block}__table-cell) {
-            height: 40px;
-            padding: 0;
-            @include mixins.text-body-2();
-        }
-    }
-
-    &__table-header-cell {
-        &_align_right {
-            #{$block}__table-header-content {
-                justify-content: flex-end;
-
-                text-align: right;
-            }
-        }
-    }
-
-    &__table-header-content {
-        display: flex;
-        align-items: center;
-
-        height: 100%;
-        padding: var(--g-spacing-1) var(--g-spacing-2);
-
-        vertical-align: middle;
-
-        border-bottom: 1px solid var(--g-color-line-generic);
-    }
-    :is(&__table-cell_align_right) {
-        text-align: right;
-    }
     &__metrics-cell {
         padding: var(--g-spacing-1) var(--g-spacing-2);
 

src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {Table, useTable} from '@gravity-ui/table';
+import {useTable} from '@gravity-ui/table';
 import type {ExpandedState} from '@tanstack/react-table';
 
+import {Table} from '../../../../components/Table/Table';
 import type {TTabletHiveResponse} from '../../../../types/api/tablet';
 
 import {getColumns} from './columns';
-import {b} from './shared';
 import {prepareData} from './utils';
 
 import './TabletStorageInfo.scss';
@@ -30,22 +30,5 @@ export function TabletStorageInfo({data}: TabletStorageInfoProps) {
             expanded,
         },
     });
-    return (
-        //block wrapper for table
-        <div>
-            <Table
-                table={table}
-                headerCellClassName={({column}) => {
-                    const align = column.columnDef.meta?.align;
-                    return b('table-header-cell', {align});
-                }}
-                cellClassName={(cell) => {
-                    const align = cell?.column.columnDef.meta?.align;
-                    const verticalAlign = cell?.column.columnDef.meta?.verticalAlign;
-                    return b('table-cell', {align, 'vertical-align': verticalAlign});
-                }}
-                className={b('table')}
-            />
-        </div>
-    );
+    return <Table table={table} />;
 }

src/containers/Tablet/components/TabletStorageInfo/columns.tsx

@@ -1,21 +1,13 @@
 import {ArrowToggle, Button, Flex} from '@gravity-ui/uikit';
 import type {CellContext, ColumnDef, Row} from '@tanstack/react-table';
 
+import {ColumnHeader} from '../../../../components/Table/Table';
 import {formatTimestamp} from '../../../../utils/dataFormatters/dataFormatters';
 
 import {tabletInfoKeyset} from './i18n';
 import {b} from './shared';
 import type {TabletStorageItem} from './types';
 
-interface ColumnHeaderProps {
-    name: string;
-    className?: string;
-}
-
-function ColumnHeader({name, className}: ColumnHeaderProps) {
-    return <div className={b('table-header-content', className)}>{name}</div>;
-}
-
 function metricsCell(
     info: CellContext<TabletStorageItem, unknown>,
     formatter?: (value: string | number) => string | number,
@@ -57,24 +49,23 @@ export function getColumns(hasExpand?: boolean) {
     const columns: ColumnDef<TabletStorageItem>[] = [
         {
             accessorKey: 'channelIndex',
-            header: () => <ColumnHeader name={tabletInfoKeyset('label_channel-index')} />,
+            header: () => <ColumnHeader>{tabletInfoKeyset('label_channel-index')}</ColumnHeader>,
             size: 50,
             cell: metricsCell,
             meta: {align: 'right'},
         },
         {
             accessorKey: 'storagePoolName',
-            header: () => <ColumnHeader name={tabletInfoKeyset('label_storage-pool')} />,
+            header: () => <ColumnHeader>{tabletInfoKeyset('label_storage-pool')}</ColumnHeader>,
             size: 200,
             cell: metricsCell,
         },
         {
             accessorKey: 'GroupID',
             header: () => (
-                <ColumnHeader
-                    name={tabletInfoKeyset('label_group-id')}
-                    className={hasExpand ? b('with-padding') : undefined}
-                />
+                <ColumnHeader className={hasExpand ? b('with-padding') : undefined}>
+                    {tabletInfoKeyset('label_group-id')}
+                </ColumnHeader>
             ),
             size: 100,
             cell: (info) => (
@@ -83,14 +74,14 @@ export function getColumns(hasExpand?: boolean) {
         },
         {
             accessorKey: 'FromGeneration',
-            header: () => <ColumnHeader name={tabletInfoKeyset('label_generation')} />,
+            header: () => <ColumnHeader>{tabletInfoKeyset('label_generation')}</ColumnHeader>,
             size: 100,
             cell: metricsCell,
             meta: {align: 'right'},
         },
         {
             accessorKey: 'Timestamp',
-            header: () => <ColumnHeader name={tabletInfoKeyset('label_timestamp')} />,
+            header: () => <ColumnHeader>{tabletInfoKeyset('label_timestamp')}</ColumnHeader>,
             size: 200,
             cell: (info) => metricsCell(info, formatTimestamp),
             meta: {align: 'right'},

src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/OperationCell.tsx

@@ -97,7 +97,7 @@ export function OperationCell<TData>({row, depth = 0, params}: OperationCellProp
             className={block('operation-name')}
         >
             {dividers}
-            <Flex gap={1} alignItems="flex-start" className={block('operation-content')}>
+            <Flex gap={1} alignItems="center" className={block('operation-content')}>
                 {row.getCanExpand() && (
                     <Button view="flat" size="xs" onClick={row.getToggleExpandedHandler()}>
                         <Button.Icon>