fix(PaginatedTable): fix table overflow, make column width optional (#1234)

Author: artemmufazalov

src/components/PaginatedTable/PaginatedTable.scss

@@ -25,15 +25,10 @@
         }
     }
 
-    &__colgroup {
-        display: table;
-    }
-
-    &__table-chunk {
-        display: block;
-    }
-
     &__row {
+        position: relative;
+        z-index: 1;
+
         &:hover {
             background: var(--paginated-table-hover-color);
         }
@@ -46,12 +41,8 @@
     }
 
     &__head {
-        z-index: 1;
+        z-index: 2;
         @include sticky-top();
-
-        &-row {
-            display: table;
-        }
     }
 
     &__sort-icon-container {
@@ -74,7 +65,7 @@
     &__head-cell-wrapper {
         position: relative;
 
-        display: flex;
+        display: table-cell;
         overflow-x: hidden;
 
         border-bottom: $cell-border;
@@ -177,4 +168,11 @@
     &__head-cell-wrapper:hover > &__resize-handler {
         visibility: visible;
     }
+
+    &__resizeable-table-container {
+        width: max-content;
+
+        // padding for easier resize of the last column
+        padding-right: 20px;
+    }
 }

src/components/PaginatedTable/PaginatedTable.tsx

@@ -37,6 +37,7 @@ export interface PaginatedTableProps<T, F> {
     renderControls?: RenderControls;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     renderErrorMessage?: RenderErrorMessage;
+    containerClassName?: string;
 }
 
 export const PaginatedTable = <T, F>({
@@ -53,6 +54,7 @@ export const PaginatedTable = <T, F>({
     renderControls,
     renderErrorMessage,
     renderEmptyDataMessage,
+    containerClassName,
 }: PaginatedTableProps<T, F>) => {
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
     const [totalEntities, setTotalEntities] = React.useState(limit);
@@ -153,7 +155,7 @@ export const PaginatedTable = <T, F>({
     };
 
     return (
-        <div ref={tableContainer} className={b(null)}>
+        <div ref={tableContainer} className={b(null, containerClassName)}>
             {renderContent()}
         </div>
     );

src/components/PaginatedTable/ResizeablePaginatedTable.tsx

@@ -4,6 +4,7 @@ import {useTableResize} from '../../utils/hooks/useTableResize';
 
 import type {PaginatedTableProps} from './PaginatedTable';
 import {PaginatedTable} from './PaginatedTable';
+import {b} from './shared';
 import type {Column} from './types';
 
 function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWidthByName) {
@@ -30,6 +31,7 @@ export function ResizeablePaginatedTable<T, F>({
         <PaginatedTable
             columns={updatedColumns}
             onColumnsResize={setTableColumnsWidth}
+            containerClassName={b('resizeable-table-container')}
             {...props}
         />
     );

src/components/PaginatedTable/TableChunk.tsx

@@ -7,7 +7,6 @@ import {useAutoRefreshInterval} from '../../utils/hooks';
 import {ResponseError} from '../Errors/ResponseError';
 
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
-import {b} from './shared';
 import type {Column, FetchData, GetRowClassName, SortParams} from './types';
 
 const DEBOUNCE_TIMEOUT = 200;
@@ -144,10 +143,15 @@ export const TableChunk = <T, F>({
 
     return (
         <tbody
-            className={b('table-chunk')}
             ref={ref}
             id={id.toString()}
-            style={{height: `${chunkHeight}px`}}
+            style={{
+                height: `${chunkHeight}px`,
+                // Default display: table-row-group doesn't work in Safari and breaks the table
+                // display: block works in Safari, but disconnects thead and tbody cell grids
+                // Hack to make it work in all cases
+                display: isActive ? 'table-row-group' : 'block',
+            }}
         >
             {renderContent()}
         </tbody>

src/components/PaginatedTable/TableHead.tsx

@@ -66,7 +66,7 @@ export const TableHeadCell = <T,>({
     onCellUnMount,
     onColumnsResize,
 }: TableHeadCellProps<T>) => {
-    const cellWrapperRef = React.useRef<HTMLDivElement>(null);
+    const cellWrapperRef = React.useRef<HTMLTableCellElement>(null);
 
     React.useEffect(() => {
         const cellWrapper = cellWrapperRef.current;
@@ -93,44 +93,43 @@ export const TableHeadCell = <T,>({
 
     const content = column.header ?? column.name;
 
+    const style = {
+        height: `${rowHeight}px`,
+        width: `${column.width}px`,
+        // Additional minWidth and maxWidth for resizeable columns to ensure proper resize
+        minWidth: resizeable ? `${column.width}px` : undefined,
+        maxWidth: resizeable ? `${column.width}px` : undefined,
+    };
+
     return (
-        <th>
+        <th ref={cellWrapperRef} className={b('head-cell-wrapper')} style={style}>
             <div
-                ref={cellWrapperRef}
-                className={b('head-cell-wrapper')}
-                style={{
-                    height: `${rowHeight}px`,
-                    width: `${column.width}px`,
+                className={b(
+                    'head-cell',
+                    {align: column.align, sortable: column.sortable},
+                    column.className,
+                )}
+                onClick={() => {
+                    if (column.sortable) {
+                        onSort?.(column.name);
+                    }
                 }}
             >
-                <div
-                    className={b(
-                        'head-cell',
-                        {align: column.align, sortable: column.sortable},
-                        column.className,
-                    )}
-                    onClick={() => {
-                        if (column.sortable) {
-                            onSort?.(column.name);
-                        }
-                    }}
-                >
-                    <div className={b('head-cell-content')}>{content}</div>
-                    <ColumnSortIcon
-                        sortOrder={sortOrder}
-                        sortable={column.sortable}
-                        defaultSortOrder={defaultSortOrder}
-                    />
-                </div>
-                {resizeable ? (
-                    <ResizeHandler
-                        maxWidth={column.resizeMaxWidth}
-                        minWidth={column.resizeMinWidth}
-                        getCurrentColumnWidth={getCurrentColumnWidth}
-                        onResize={handleResize}
-                    />
-                ) : null}
+                <div className={b('head-cell-content')}>{content}</div>
+                <ColumnSortIcon
+                    sortOrder={sortOrder}
+                    sortable={column.sortable}
+                    defaultSortOrder={defaultSortOrder}
+                />
             </div>
+            {resizeable ? (
+                <ResizeHandler
+                    maxWidth={column.resizeMaxWidth}
+                    minWidth={column.resizeMinWidth}
+                    getCurrentColumnWidth={getCurrentColumnWidth}
+                    onResize={handleResize}
+                />
+            ) : null}
         </th>
     );
 };
@@ -183,7 +182,7 @@ export const TableHead = <T,>({
 
     const renderTableColGroups = () => {
         return (
-            <colgroup className={b('colgroup')}>
+            <colgroup>
                 {columns.map((column) => {
                     return <col key={column.name} style={{width: `${column.width}px`}} />;
                 })}
@@ -194,7 +193,7 @@ export const TableHead = <T,>({
     const renderTableHead = () => {
         return (
             <thead className={b('head')}>
-                <tr className={b('head-row')}>
+                <tr>
                     {columns.map((column) => {
                         const sortOrder =
                             sortParams.columnId === column.name ? sortParams.sortOrder : undefined;

src/components/PaginatedTable/TableRow.tsx

@@ -1,15 +1,16 @@
 import {Skeleton} from '@gravity-ui/uikit';
 
-import {DEFAULT_ALIGN} from './constants';
+import {DEFAULT_ALIGN, DEFAULT_RESIZEABLE} from './constants';
 import {b} from './shared';
 import type {AlignType, Column, GetRowClassName} from './types';
 
 interface TableCellProps {
     height: number;
-    width: number;
+    width?: number;
     align?: AlignType;
     children: React.ReactNode;
     className?: string;
+    resizeable?: boolean;
 }
 
 const TableRowCell = ({
@@ -18,12 +19,17 @@ const TableRowCell = ({
     height,
     width,
     align = DEFAULT_ALIGN,
+    resizeable,
 }: TableCellProps) => {
-    // Additional maxWidth to ensure overflow hidden for <td>
     return (
         <td
             className={b('row-cell', {align: align}, className)}
-            style={{height: `${height}px`, width: `${width}px`, maxWidth: `${width}px`}}
+            style={{
+                height: `${height}px`,
+                width: `${width}px`,
+                // Additional maxWidth for resizeable columns to ensure overflow hidden for <td>
+                maxWidth: resizeable ? `${width}px` : undefined,
+            }}
         >
             {children}
         </td>
@@ -40,13 +46,16 @@ export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowPro
     return (
         <tr className={b('row', {loading: true})}>
             {columns.map((column) => {
+                const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
+
                 return (
                     <TableRowCell
                         key={`${column.name}${index}`}
                         height={height}
                         width={column.width}
                         align={column.align}
                         className={column.className}
+                        resizeable={resizeable}
                     >
                         <Skeleton style={{width: '80%', height: '50%'}} />
                     </TableRowCell>
@@ -70,13 +79,16 @@ export const TableRow = <T,>({row, index, columns, getRowClassName, height}: Tab
     return (
         <tr className={b('row', additionalClassName)}>
             {columns.map((column) => {
+                const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
+
                 return (
                     <TableRowCell
                         key={`${column.name}${index}`}
                         height={height}
                         width={column.width}
                         align={column.align}
                         className={column.className}
+                        resizeable={resizeable}
                     >
                         {column.render({row, index})}
                     </TableRowCell>

src/components/PaginatedTable/types.ts

@@ -30,7 +30,7 @@ export interface Column<T> {
     sortable?: boolean;
     resizeable?: boolean;
     render: (props: {row: T; index: number}) => React.ReactNode;
-    width: number;
+    width?: number;
     resizeMaxWidth?: number;
     resizeMinWidth?: number;
     align: AlignType;

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -25,6 +25,11 @@
         @include sticky-top();
     }
 
+    &__table {
+        position: relative;
+        z-index: 2;
+    }
+
     .ydb-paginated-table__head {
         top: 62px;
     }