fix: fix columns width on long rowset

Author: astandrik

src/components/QueryResultTable/QueryResultTable.tsx

@@ -6,7 +6,7 @@ import type {Column, Settings} from '@gravity-ui/react-data-table';
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {getColumnType, prepareQueryResponse} from '../../utils/query';
+import {getColumnType, getColumnWidthByType, prepareQueryResponse} from '../../utils/query';
 import {isNumeric} from '../../utils/utils';
 import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable';
 import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable';
@@ -35,6 +35,7 @@ const prepareTypedColumns = (columns: ColumnType[]) => {
 
         const column: Column<KeyValueRow> = {
             name,
+            width: getColumnWidthByType(type, name),
             align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
             sortAccessor: (row) => {
                 const value = row[name];

src/utils/query.ts

@@ -97,9 +97,13 @@ export const QUERY_SYNTAX = {
     pg: 'pg',
 } as const;
 
+export const getYQLColumnType = (type: string): YQLType => {
+    return type.replace(/\?$/, '') as YQLType;
+};
+
 // eslint-disable-next-line complexity
 export const getColumnType = (type: string) => {
-    switch (type.replace(/\?$/, '')) {
+    switch (getYQLColumnType(type)) {
         case YQLType.Bool:
             return 'boolean';
         case YQLType.Int8:
@@ -134,6 +138,50 @@ export const getColumnType = (type: string) => {
     }
 };
 
+const columnTypeToDefaultWidth: Record<YQLType, number> = {
+    // Numeric
+    [YQLType.Bool]: 80,
+    [YQLType.Int8]: 80,
+    [YQLType.Int16]: 90,
+    [YQLType.Int32]: 140,
+    [YQLType.Int64]: 220,
+    [YQLType.Uint8]: 80,
+    [YQLType.Uint16]: 90,
+    [YQLType.Uint32]: 140,
+    [YQLType.Uint64]: 220,
+    [YQLType.Float]: 120,
+    [YQLType.Double]: 220,
+    [YQLType.Decimal]: 220,
+
+    // String
+    [YQLType.String]: 240,
+    [YQLType.Utf8]: 240,
+    [YQLType.Json]: 340,
+    [YQLType.JsonDocument]: 340,
+    [YQLType.Yson]: 340,
+    [YQLType.Uuid]: 190,
+
+    // Date and time
+    [YQLType.Date]: 300,
+    [YQLType.Datetime]: 300,
+    [YQLType.Timestamp]: 300,
+    [YQLType.Interval]: 300,
+    [YQLType.TzDate]: 300,
+    [YQLType.TzDateTime]: 300,
+    [YQLType.TzTimestamp]: 300,
+};
+
+const COLUMN_DEFAULT_WIDTH = 200;
+
+export const getColumnWidthByType = (type: string, columnName: string) => {
+    const yqlType = getYQLColumnType(type);
+
+    return Math.max(
+        columnTypeToDefaultWidth[yqlType] || COLUMN_DEFAULT_WIDTH,
+        columnName.length * 15,
+    );
+};
+
 /** parse response result from ArrayRow to KeyValueRow */
 const parseModernResult = (rows: ArrayRow[], columns: ColumnType[]) => {
     return rows.map((row) => {