Table widget improvements (#1742)

datalens-tech · Oct 29, 2024 · 315d91b · 315d91b
1 parent 1142d74
commit 315d91b
Show file tree

Hide file tree

Showing 46 changed files with 178 additions and 91 deletions.
diff --git a/src/server/modes/charts/plugins/datalens/config/config.ts b/src/server/modes/charts/plugins/datalens/config/config.ts
@@ -1,3 +1,5 @@
+import set from 'lodash/set';
+
 import type {FeatureConfig, ServerChartsConfig} from '../../../../../../shared';
 import {
     ChartkitHandlers,
@@ -189,6 +191,14 @@ export const buildChartsConfigPrivate = (
         };
     }
 
+    const isTableWidget = (
+        [WizardVisualizationId.FlatTable, WizardVisualizationId.PivotTable] as string[]
+    ).includes(visualizationId);
+
+    if (isTableWidget) {
+        set(config, 'settings.width', 'max-content');
+    }
+
     const placeholders = shared.visualization.placeholders;
     const colors = shared.colors;
 

diff --git a/src/server/modes/charts/plugins/ql/module/config/build-chart-config.ts b/src/server/modes/charts/plugins/ql/module/config/build-chart-config.ts
@@ -1,7 +1,12 @@
 import type {HighchartsWidgetData} from '@gravity-ui/chartkit/highcharts';
+import set from 'lodash/set';
 
 import type {FeatureConfig, IChartEditor, QlConfig} from '../../../../../../../shared';
-import {DEFAULT_CHART_LINES_LIMIT, Feature} from '../../../../../../../shared';
+import {
+    DEFAULT_CHART_LINES_LIMIT,
+    Feature,
+    WizardVisualizationId,
+} from '../../../../../../../shared';
 import {mapQlConfigToLatestVersion} from '../../../../../../../shared/modules/config/ql';
 import {log} from '../../utils/misc-helpers';
 
@@ -37,6 +42,13 @@ export function buildChartConfig(args: BuildChartsConfigArgs) {
         config.enableGPTInsights = enableGPTInsights;
     }
 
+    const visualizationId = qlConfig?.visualization?.id;
+    const isTableWidget = visualizationId === WizardVisualizationId.FlatTable;
+
+    if (isTableWidget) {
+        set(config, 'settings.width', 'max-content');
+    }
+
     config.hideHolidaysBands = !features[Feature.HolidaysOnChart];
     config.linesLimit = DEFAULT_CHART_LINES_LIMIT;
 

diff --git a/...ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/DiffCell/DiffCell.tsx b/...ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/DiffCell/DiffCell.tsx
@@ -9,13 +9,18 @@ const b = block('dl-table');
 
 type DiffCellProps = {
     value?: number;
-    diff?: number;
+    diff?: number | null;
     column?: DiffTableColumn;
     diffOnly?: boolean;
 };
 
 export const DiffCell = (props: DiffCellProps) => {
     const {value = 0, diff, column, diffOnly} = props;
+
+    if (diffOnly && diff === null) {
+        return <React.Fragment>{String(diff)}</React.Fragment>;
+    }
+
     const numberFormatOptions = column as DiffTableColumn;
 
     let diffMod = '';

diff --git a/...ibs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/BackgroundTable.tsx b/...ibs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/BackgroundTable.tsx
@@ -19,13 +19,15 @@ type Props = {
     dimensions: WidgetDimensions;
     data: TableViewData;
     onChangeMinWidth?: (cellSizes: number[]) => void;
+    width?: 'auto' | 'max-content';
 };
 
 export const BackgroundTable = React.memo<Props>((props: Props) => {
     const {
         dimensions,
         data: {header, body, footer},
         onChangeMinWidth,
+        width,
     } = props;
 
     const containerRef = React.useRef<HTMLDivElement | null>(null);
@@ -70,7 +72,7 @@ export const BackgroundTable = React.memo<Props>((props: Props) => {
                 style={{height: dimensions?.height, width: dimensions?.width}}
                 ref={containerRef}
             >
-                <table className={b({prepared: false})} ref={tableRef}>
+                <table className={b({prepared: false})} ref={tableRef} style={{width}}>
                     <TableHead rows={header.rows} />
                     <TableBody rows={body.rows} />
                     <TableFooter rows={footer.rows} />

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.scss b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.scss
@@ -1,7 +1,6 @@
 :root {
     --dl-table-header-vertical-padding: 5px;
     --dl-table-header-cell-vertical-align: top;
-    --dl-table-header-row-height: 28px;
     --dl-table-row-height: 30px;
     --dl-table-cell-horizontal-padding: 10px;
     --dl-table-cell-vertical-padding: 5px;
@@ -14,10 +13,10 @@
     &:before {
         content: '';
         position: absolute;
-        top: var(--dl-table-cell-border-offset, -1px);
+        top: 0;
         width: calc(100% + 1.99px);
         left: var(--dl-table-cell-border-offset, -1px);
-        height: calc(100% + 1.99px);
+        height: 100%;
         pointer-events: none;
     }
 }
@@ -130,21 +129,16 @@
         }
     }
 
-    &__header &__tr:first-child {
-        th {
-            border-top: 1px solid var(--dl-table-border-color);
-            min-height: var(--dl-table-header-row-height);
-        }
-    }
-
     &__header &__th {
         position: relative;
         font-weight: 500;
         padding: var(--dl-table-header-vertical-padding) var(--dl-table-cell-horizontal-padding);
         vertical-align: var(--dl-table-header-cell-vertical-align);
         box-sizing: border-box;
         height: 100%;
+        min-height: var(--dl-table-row-height);
         background: var(--dl-table-header-bg-color);
+        border-bottom: 0;
     }
 
     &__header &__sort-icon {
@@ -212,7 +206,6 @@
 
         @include stickyCellBg();
         &:before {
-            border-bottom: 1px solid var(--dl-table-border-color);
             border-left: 1px solid var(--dl-table-border-color);
         }
     }

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type {SortingState} from '@tanstack/react-table';
 import block from 'bem-cn-lite';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
@@ -122,6 +123,15 @@ export const Table = React.memo<Props>((props: Props) => {
         return {cursor, ...actionParamsCss};
     };
 
+    let initialSortingState: SortingState | undefined;
+    if (config?.sort) {
+        initialSortingState = [
+            {
+                id: config.sort,
+                desc: config?.order === 'desc',
+            },
+        ];
+    }
     const {colgroup, header, body, footer, totalSize} = usePreparedTableData({
         data,
         dimensions: widgetDimensions,
@@ -130,6 +140,7 @@ export const Table = React.memo<Props>((props: Props) => {
         onSortingChange: handleSortingChange,
         getCellAdditionStyles,
         cellMinSizes,
+        sortingState: initialSortingState,
     });
 
     React.useEffect(() => {
@@ -139,7 +150,11 @@ export const Table = React.memo<Props>((props: Props) => {
     }, [onReady, cellMinSizes]);
 
     const highlightRows = get(config, 'settings.highlightRows') ?? !hasGroups(data.head);
-    const tableActualHeight = useTableHeight({ref: tableRef, ready: Boolean(cellMinSizes)});
+    const tableActualHeight = useTableHeight({
+        ref: tableRef,
+        ready: Boolean(cellMinSizes),
+        totalSize,
+    });
     const noData = !props.widgetData.data?.head?.length;
 
     const handleCellClick = React.useCallback(
@@ -240,21 +255,23 @@ export const Table = React.memo<Props>((props: Props) => {
                                     ))}
                                 </colgroup>
                             )}
-                            <TableHead
-                                sticky={true}
-                                rows={header.rows}
-                                style={header.style}
-                                tableHeight={tableActualHeight}
-                            />
                             {cellMinSizes && (
-                                <TableBody
-                                    rows={body.rows}
-                                    style={body.style}
-                                    onCellClick={handleCellClick}
-                                    rowRef={body.rowRef}
-                                />
+                                <React.Fragment>
+                                    <TableHead
+                                        sticky={true}
+                                        rows={header.rows}
+                                        style={header.style}
+                                        tableHeight={tableActualHeight}
+                                    />
+                                    <TableBody
+                                        rows={body.rows}
+                                        style={body.style}
+                                        onCellClick={handleCellClick}
+                                        rowRef={body.rowRef}
+                                    />
+                                    <TableFooter rows={footer.rows} style={footer.style} />
+                                </React.Fragment>
                             )}
-                            <TableFooter rows={footer.rows} style={footer.style} />
                         </table>
                     )}
                 </div>
@@ -277,6 +294,7 @@ export const Table = React.memo<Props>((props: Props) => {
                         setCellMinWidth(colWidths);
                     }
                 }}
+                width={config?.settings?.width ?? 'auto'}
             />
         </React.Fragment>
     );