fix: fix columns width on long rowset

src/components/QueryResultTable/QueryResultTable.tsx

@@ -13,6 +13,7 @@ import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable';
 
 import {Cell} from './Cell';
 import i18n from './i18n';
+import {getColumnWidth} from './utils/getColumnWidth';
 
 import './QueryResultTable.scss';
 
@@ -25,16 +26,21 @@ const TABLE_SETTINGS: Settings = {
 
 export const b = cn('ydb-query-result-table');
 
-const prepareTypedColumns = (columns: ColumnType[]) => {
+const WIDTH_PREDICTION_ROWS_COUNT = 100;
+
+const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => {
     if (!columns.length) {
         return [];
     }
 
+    const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT);
+
     return columns.map(({name, type}) => {
         const columnType = getColumnType(type);
 
         const column: Column<KeyValueRow> = {
             name,
+            width: getColumnWidth({data: dataSlice, name, columnType}),
             align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
             sortAccessor: (row) => {
                 const value = row[name];
@@ -82,7 +88,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
 
     const data = React.useMemo(() => prepareQueryResponse(rawData), [rawData]);
     const columns = React.useMemo(() => {
-        return rawColumns ? prepareTypedColumns(rawColumns) : prepareGenericColumns(data);
+        return rawColumns ? prepareTypedColumns(rawColumns, data) : prepareGenericColumns(data);
     }, [data, rawColumns]);
     const settings = React.useMemo(
         () => ({

src/components/QueryResultTable/utils/getColumnWidth.test.ts

@@ -0,0 +1,43 @@
+import {MAX_COLUMN_WIDTH, getColumnWidth} from './getColumnWidth';
+
+describe('getColumnWidth', () => {
+    it('returns minimum width for empty data', () => {
+        const result = getColumnWidth({data: [], name: 'test', columnType: 'string'});
+        expect(result).toBe(20 + 'test'.length * 10);
+    });
+
+    it('calculates correct width for string columns', () => {
+        const data = [{test: 'short'}, {test: 'medium length'}, {test: 'this is a longer string'}];
+        const result = getColumnWidth({data, name: 'test', columnType: 'string'});
+        expect(result).toBe(20 + 'this is a longer string'.length * 10);
+    });
+
+    it('calculates correct width for number columns', () => {
+        const data = [{test: 123}, {test: 456789}, {test: 0}];
+        const result = getColumnWidth({data, name: 'test', columnType: 'number'});
+        expect(result).toBe(40 + '456789'.length * 10);
+    });
+
+    it('returns MAX_COLUMN_WIDTH when calculated width exceeds it', () => {
+        const data = [{test: 'a'.repeat(100)}];
+        const result = getColumnWidth({data, name: 'test', columnType: 'string'});
+        expect(result).toBe(MAX_COLUMN_WIDTH);
+    });
+
+    it('handles undefined data correctly', () => {
+        const result = getColumnWidth({name: 'test', columnType: 'string'});
+        expect(result).toBe(20 + 'test'.length * 10);
+    });
+
+    it('handles missing values in data correctly', () => {
+        const data = [{test: 'short'}, {}, {test: 'longer string'}];
+        const result = getColumnWidth({data, name: 'test', columnType: 'string'});
+        expect(result).toBe(20 + 'longer string'.length * 10);
+    });
+
+    it('uses column name length when all values are shorter', () => {
+        const data = [{longColumnName: 'a'}, {longColumnName: 'bb'}];
+        const result = getColumnWidth({data, name: 'longColumnName', columnType: 'string'});
+        expect(result).toBe(20 + 'longColumnName'.length * 10);
+    });
+});

src/components/QueryResultTable/utils/getColumnWidth.ts

@@ -0,0 +1,29 @@
+import type {KeyValueRow} from '../../../types/api/query';
+
+export const MAX_COLUMN_WIDTH = 600;
+
+export const getColumnWidth = ({
+    data,
+    name,
+    columnType,
+}: {
+    data?: KeyValueRow[];
+    name: string;
+    columnType?: string;
+}) => {
+    let maxColumnContentLength = name.length;
+    const headerPadding = columnType === 'number' ? 40 : 20;
+
+    if (data) {
+        for (const row of data) {
+            const cellLength = row[name] ? String(row[name]).length : 0;
+            maxColumnContentLength = Math.max(maxColumnContentLength, cellLength);
+
+            if (maxColumnContentLength * 10 + headerPadding >= MAX_COLUMN_WIDTH) {
+                return MAX_COLUMN_WIDTH;
+            }
+        }
+    }
+
+    return Math.min(maxColumnContentLength * 10 + headerPadding, MAX_COLUMN_WIDTH);
+};