Fix endless table rendering cycle

src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/BackgroundTable.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {Portal} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import {COMPONENT_CLASSNAME} from '../../../../../../../../components/Widgets/Chart/helpers/helpers';
+import {waitForContent} from '../../../../../helpers/wait-for-content';
+import type {WidgetDimensions} from '../../types';
+
+import {TableBody} from './TableBody';
+import {TableFooter} from './TableFooter';
+import {TableHead} from './TableHead';
+import type {TableViewData} from './types';
+import {getTableSizes} from './utils';
+
+const b = block('dl-table');
+
+type Props = {
+    dimensions: WidgetDimensions;
+    data: TableViewData;
+    onChangeMinWidth?: (cellSizes: number[]) => void;
+};
+
+export const BackgroundTable = React.memo<Props>((props: Props) => {
+    const {
+        dimensions,
+        data: {header, body, footer},
+        onChangeMinWidth,
+    } = props;
+
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const tableRef = React.useRef<HTMLTableElement | null>(null);
+    const tableMinSizes = React.useRef<null | number[]>(null);
+
+    const setMinSizes = async () => {
+        const tableElement = tableRef.current as HTMLTableElement;
+        await waitForContent(tableElement);
+        const tableColSizes = getTableSizes(tableElement);
+        const prev = tableMinSizes.current;
+
+        if (!prev || tableColSizes.some((s, index) => s > prev[index])) {
+            tableMinSizes.current = tableColSizes.map((s, index) => {
+                if (!prev || s > prev[index]) {
+                    return Math.ceil(s);
+                }
+                return prev[index];
+            });
+
+            if (onChangeMinWidth) {
+                onChangeMinWidth(tableMinSizes.current ?? []);
+            }
+        }
+    };
+
+    React.useEffect(() => {
+        if (tableMinSizes.current) {
+            tableMinSizes.current = null;
+        }
+    }, [props.data.header?.rows]);
+
+    React.useEffect(() => {
+        setMinSizes();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.data]);
+
+    return (
+        <Portal>
+            <div
+                className={b('background-table', COMPONENT_CLASSNAME)}
+                style={{height: dimensions?.height, width: dimensions?.width}}
+                ref={containerRef}
+            >
+                <table className={b({prepared: false})} ref={tableRef}>
+                    <TableHead rows={header.rows} />
+                    <TableBody rows={body.rows} />
+                    <TableFooter rows={footer.rows} />
+                </table>
+            </div>
+        </Portal>
+    );
+});
+BackgroundTable.displayName = 'BackgroundTable';

src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.scss

@@ -24,7 +24,7 @@
 
 .dl-table {
     border-collapse: collapse;
-    min-width: calc(100% - 1px);
+    min-width: 100%;
     width: max-content;
 
     &__table-wrapper {
@@ -256,6 +256,10 @@
         z-index: -1;
         overflow: auto;
 
+        table {
+            min-width: auto;
+        }
+
         tbody td {
             white-space: nowrap;
         }

src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 
-import {Portal} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import get from 'lodash/get';
 import type {StringParams, TableCell, TableCellsRow, TableCommonCell} from 'shared';
+import {BackgroundTable} from 'ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/BackgroundTable';
 
-import {COMPONENT_CLASSNAME} from '../../../../../../../../components/Widgets/Chart/helpers/helpers';
 import {isMacintosh} from '../../../../../../../../utils';
 import type {TableWidgetData} from '../../../../../../types';
 import Paginator from '../../../../../components/Widget/components/Table/Paginator/Paginator';
 import {hasGroups} from '../../../../../components/Widget/components/Table/utils';
 import {SNAPTER_HTML_CLASSNAME} from '../../../../../components/Widget/components/constants';
 import {CHARTKIT_SCROLLABLE_NODE_CLASSNAME} from '../../../../../helpers/constants';
-import {waitForContent} from '../../../../../helpers/wait-for-content';
 import {i18n} from '../../../../../modules/i18n/i18n';
 import type {WidgetDimensions} from '../../types';
 import {
@@ -32,7 +30,7 @@ import {TableHead} from './TableHead';
 import type {TData} from './types';
 import {usePreparedTableData} from './usePreparedTableData';
 import {useTableHeight} from './useTableHeight';
-import {getTableSizes, getTableTitle} from './utils';
+import {getTableTitle} from './utils';
 
 import './Table.scss';
 
@@ -51,7 +49,7 @@ export const Table = React.memo<Props>((props: Props) => {
     const title = getTableTitle(config);
     const isPaginationEnabled = Boolean(config?.paginator?.enabled);
 
-    const [cellSizes, setCellSizes] = React.useState<number[] | null>(null);
+    const [cellMinSizes, setCellMinWidth] = React.useState<number[] | null>(null);
 
     const data = React.useMemo(() => mapTableData(originalData), [originalData]);
     const pagination = {
@@ -123,30 +121,24 @@ export const Table = React.memo<Props>((props: Props) => {
         return {cursor, ...actionParamsCss};
     };
 
-    const {colgroup, header, body, footer, prerender, totalSize} = usePreparedTableData({
+    const {colgroup, header, body, footer, totalSize} = usePreparedTableData({
         data,
         dimensions: widgetDimensions,
         tableContainerRef,
         manualSorting: isPaginationEnabled || Boolean(config?.settings?.externalSort),
         onSortingChange: handleSortingChange,
         getCellAdditionStyles,
-        cellSizes,
+        cellMinSizes,
     });
 
     React.useEffect(() => {
-        if (cellSizes) {
-            setCellSizes(null);
-        }
-    }, [widgetData.data, widgetDimensions.width]);
-
-    React.useEffect(() => {
-        if (onReady && !prerender) {
+        if (onReady && cellMinSizes) {
             setTimeout(onReady, 0);
         }
-    }, [onReady, prerender]);
+    }, [onReady, cellMinSizes]);
 
     const highlightRows = get(config, 'settings.highlightRows') ?? !hasGroups(data.head);
-    const tableActualHeight = useTableHeight({ref: tableRef, prerender});
+    const tableActualHeight = useTableHeight({ref: tableRef, ready: Boolean(cellMinSizes)});
     const noData = !props.widgetData.data?.head?.length;
 
     const handleCellClick = React.useCallback(
@@ -223,7 +215,6 @@ export const Table = React.memo<Props>((props: Props) => {
             <div
                 className={b(
                     'snapter-container',
-                    {preparing: prerender},
                     [SNAPTER_HTML_CLASSNAME, CHARTKIT_SCROLLABLE_NODE_CLASSNAME].join(' '),
                 )}
                 ref={tableContainerRef}
@@ -237,7 +228,7 @@ export const Table = React.memo<Props>((props: Props) => {
                     )}
                     {!noData && (
                         <table
-                            className={b({prepared: !prerender})}
+                            className={b({prepared: true})}
                             style={{minHeight: totalSize}}
                             ref={tableRef}
                         >
@@ -254,56 +245,34 @@ export const Table = React.memo<Props>((props: Props) => {
                                 style={header.style}
                                 tableHeight={tableActualHeight}
                             />
-                            <TableBody
-                                rows={body.rows}
-                                style={body.style}
-                                onCellClick={handleCellClick}
-                                rowRef={body.rowRef}
-                            />
+                            {cellMinSizes && (
+                                <TableBody
+                                    rows={body.rows}
+                                    style={body.style}
+                                    onCellClick={handleCellClick}
+                                    rowRef={body.rowRef}
+                                />
+                            )}
                             <TableFooter rows={footer.rows} style={footer.style} />
                         </table>
                     )}
                 </div>
             </div>
             {isPaginationEnabled && (
                 <Paginator
-                    className={b('paginator', {preparing: prerender})}
+                    className={b('paginator')}
                     page={pagination.currentPage}
                     rowsCount={pagination.rowsCount}
                     limit={pagination.pageLimit}
                     onChange={handlePaginationChange}
                 />
             )}
             {/*background table for dynamic calculation of column widths during virtualization*/}
-            <Portal>
-                <div
-                    className={b('background-table', COMPONENT_CLASSNAME)}
-                    style={{height: widgetDimensions?.height, width: widgetDimensions?.width}}
-                >
-                    <table
-                        className={b({prepared: false})}
-                        ref={async (el) => {
-                            if (!el) {
-                                return;
-                            }
-
-                            await waitForContent(el);
-                            const tableColSizes = getTableSizes(el);
-                            const shouldApplyNewSizes =
-                                !cellSizes ||
-                                tableColSizes.some((colSize, index) => colSize > cellSizes[index]);
-
-                            if (shouldApplyNewSizes) {
-                                setCellSizes(tableColSizes);
-                            }
-                        }}
-                    >
-                        <TableHead rows={header.rows} useInheritedWidth={false} />
-                        <TableBody rows={body.rows} />
-                        <TableFooter rows={footer.rows} />
-                    </table>
-                </div>
-            </Portal>
+            <BackgroundTable
+                dimensions={widgetDimensions}
+                data={{header, body, footer}}
+                onChangeMinWidth={setCellMinWidth}
+            />
         </React.Fragment>
     );
 });

src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/TableHead.tsx

@@ -13,11 +13,10 @@ type Props = {
     rows: HeadRowViewData[];
     style?: React.CSSProperties;
     tableHeight?: number;
-    useInheritedWidth?: boolean;
 };
 
 export const TableHead = React.memo<Props>((props: Props) => {
-    const {sticky, rows, style, tableHeight, useInheritedWidth = true} = props;
+    const {sticky, rows, style, tableHeight} = props;
 
     return (
         <thead className={b('header', {sticky})} style={style}>
@@ -32,9 +31,6 @@ export const TableHead = React.memo<Props>((props: Props) => {
                                 gridRow: th.rowSpan ? `span ${th.rowSpan}` : undefined,
                                 gridColumn: th.colSpan ? `span ${th.colSpan}` : undefined,
                             };
-                            if (useInheritedWidth) {
-                                delete cellStyle['width'];
-                            }
 
                             return (
                                 <th

src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/cell-width.ts

@@ -0,0 +1,25 @@
+export function getCellsWidth(args: {
+    cols: {min: number; fixed?: number}[];
+    tableMinWidth: number;
+}): number[] {
+    const {tableMinWidth, cols} = args;
+    const shouldIgnoreFixedWidth = cols.every((col) => col.fixed);
+    const fixedCols = shouldIgnoreFixedWidth ? [] : cols.filter((col) => col.fixed);
+
+    const fixedColsWidth = fixedCols.reduce(
+        (sum, col) => sum + Math.max(col.min, col.fixed ?? 0),
+        0,
+    );
+    const baseMinWidth = cols.reduce((sum, col) => sum + col.min, 0);
+    // subtract 1 pixel for the right border of the table and an additional one for compatibility with the old widget
+    // (for some reason, it was not drawn to the full width, but one pixel less)
+    const k = Math.max(1, (tableMinWidth - fixedColsWidth - 2) / (baseMinWidth - fixedColsWidth));
+
+    return cols.map((col) => {
+        if (!shouldIgnoreFixedWidth && col.fixed) {
+            return Math.max(col.min, col.fixed);
+        }
+
+        return col.min * k;
+    });
+}

src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/types.ts

@@ -36,6 +36,7 @@ export type THead = {
     cell?: RenderCellFn<CellData>;
     columns?: THead[];
     left?: number;
+    index?: number;
 };
 
 export type TData = CellData[];
@@ -80,7 +81,6 @@ export type HeadCellViewData = {
     sortable: boolean;
     pinned: boolean;
     style?: React.CSSProperties;
-    width: number;
     sorting: 'asc' | 'desc' | false;
     content: JSX.Element | React.ReactNode;
     onClick: () => void;
@@ -148,6 +148,4 @@ export type TableViewData = {
         style?: React.CSSProperties;
     };
     totalSize?: number;
-    /* rendering table without most options - only to calculate cells size */
-    prerender?: boolean;
 };