datalens-tech · arsen-afaunov · Oct 28, 2025 · Oct 28, 2025
diff --git a/src/shared/types/chartkit/table.ts b/src/shared/types/chartkit/table.ts
@@ -1,3 +1,5 @@
+import type {ReactElement} from 'react';
+
 import type {Column} from '@gravity-ui/react-data-table';
 
 import type {WrappedHTML} from '../charts';
@@ -21,6 +23,7 @@ export type OnClickShowMessage = {
 };
 
 type TableCommonCellType = 'text' | 'date' | 'number' | 'diff' | 'diff_only' | 'markup' | 'bar';
+export type TableCellVeticalAlignment = 'top' | 'center' | 'bottom';
 
 // interface used because it is expanded in chartkit.d.ts
 export interface TableCommonCell {
@@ -43,6 +46,7 @@ export interface TableCommonCell {
     fieldId?: string;
     /** Reserved subspace to store options and values for customized functionality */
     custom?: Record<string, any>;
+    verticalAlignment?: TableCellVeticalAlignment;
 }
 
 export type BarTableCell = TableCommonCell & {
@@ -58,7 +62,7 @@ export type TableRow = TableValuesRow | TableCellsRow;
 export type CommonTableColumn = {
     id?: string;
     name: string;
-    formattedName?: WrappedHTML | string;
+    formattedName?: ReactElement | WrappedHTML | string;
     type: TableCommonCellType;
     group?: boolean;
     autogroup?: boolean;
@@ -73,6 +77,7 @@ export type CommonTableColumn = {
     custom?: Record<string, any>;
     pinned?: boolean;
     hint?: string;
+    verticalAlignment?: TableCellVeticalAlignment;
 };
 export type TableColumnFormatter = {
     format?: 'number' | 'percent';
@@ -134,13 +139,14 @@ export type TableColumn =
 type TableSubColumn = {
     id?: string;
     name: string;
-    formattedName?: WrappedHTML | string;
+    formattedName?: ReactElement | WrappedHTML | string;
     css?: ChartKitCss;
     markup: MarkupItem;
     sub: (TableColumn | TableSubColumn)[];
     width?: string;
     // A reserved subspace to store options and values for customized functionality.
     custom?: Record<string, any>;
+    verticalAlignment?: TableCellVeticalAlignment;
 };
 export type TableHead = TableColumn | TableSubColumn;
 export type TableTitle = {

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/TableWidget.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/TableWidget.tsx
@@ -28,6 +28,8 @@ const TableWidget = React.forwardRef<ChartKitWidgetRef | undefined, TableWidgetP
             backgroundColor,
             isQlPreviewTable = false,
             qa = ChartKitTableQa.Widget,
+            emptyDataMessage,
+            className,
         } = props;
 
         const generatedId = React.useMemo(
@@ -91,11 +93,12 @@ const TableWidget = React.forwardRef<ChartKitWidgetRef | undefined, TableWidgetP
         );
 
         return (
-            <div className={b()} data-qa={qa} ref={ref}>
+            <div className={b({}, className)} data-qa={qa} ref={ref}>
                 {dimensions ? (
                     <Table
                         widgetData={props.data}
                         dimensions={dimensions}
+                        emptyDataMessage={emptyDataMessage}
                         onChangeParams={handleChangeParams}
                         onReady={handleTableReady}
                         backgroundColor={backgroundColor}

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
@@ -47,6 +47,7 @@ type Props = {
     onReady?: () => void;
     backgroundColor?: string;
     disableCellFormatting?: boolean;
+    emptyDataMessage?: string;
 };
 
 export const Table = React.memo<Props>((props: Props) => {
@@ -57,6 +58,7 @@ export const Table = React.memo<Props>((props: Props) => {
         onReady,
         backgroundColor,
         disableCellFormatting = false,
+        emptyDataMessage,
     } = props;
     const {config, data: originalData, unresolvedParams, params: currentParams} = widgetData;
     const title = getTableTitle(config);
@@ -273,7 +275,7 @@ export const Table = React.memo<Props>((props: Props) => {
                 <div className={b('table-wrapper', {'highlight-rows': highlightRows, size})}>
                     {noData && (
                         <div className={b('no-data')}>
-                            {i18n('chartkit-table', 'message-no-data')}
+                            {emptyDataMessage || i18n('chartkit-table', 'message-no-data')}
                         </div>
                     )}
                     {!noData && (

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/TableBody.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/TableBody.tsx
@@ -4,6 +4,7 @@ import block from 'bem-cn-lite';
 import {ChartKitTableQa} from 'shared';
 
 import type {BodyCellViewData, BodyRowViewData, RowRef} from './types';
+import {getCellVeticalAlignmentStyle} from './utils';
 
 const b = block('dl-table');
 
@@ -20,6 +21,10 @@ const TableBodyCell = (props: {
     isLastPinnedCell?: boolean;
 }) => {
     const {cell, isLastPinnedCell, onClick} = props;
+    const contentStyle = {
+        ...cell.contentStyle,
+        ...getCellVeticalAlignmentStyle(cell),
+    };
 
     return (
         <td
@@ -45,7 +50,7 @@ const TableBodyCell = (props: {
             <div
                 className={b('cell-content', {type: cell.contentType})}
                 data-qa={ChartKitTableQa.CellContent}
-                style={cell.contentStyle}
+                style={contentStyle}
             >
                 {cell.content}
             </div>

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/TableHead.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/TableHead.tsx
@@ -5,6 +5,7 @@ import block from 'bem-cn-lite';
 import {SortIcon} from '../SortIcon/SortIcon';
 
 import type {HeadRowViewData} from './types';
+import {getCellVeticalAlignmentStyle} from './utils';
 
 const b = block('dl-table');
 
@@ -30,6 +31,10 @@ export const TableHead = React.memo<Props>((props: Props) => {
                                 gridRow: th.rowSpan ? `span ${th.rowSpan}` : undefined,
                                 gridColumn: th.colSpan ? `span ${th.colSpan}` : undefined,
                             };
+                            const verticalAlignmentStyle = getCellVeticalAlignmentStyle(th);
+                            const contentStyle = verticalAlignmentStyle
+                                ? {style: verticalAlignmentStyle}
+                                : null;
 
                             return (
                                 <th
@@ -46,6 +51,7 @@ export const TableHead = React.memo<Props>((props: Props) => {
                                 >
                                     {isLastPinnedCell && <div className={b('shadow')} />}
                                     <div
+                                        {...contentStyle}
                                         className={b('th-content', {
                                             sortable: th.sortable,
                                         })}

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/types.ts b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/types.ts
@@ -1,6 +1,7 @@
 import type React from 'react';
 
 import type {RowData, SortingFnOption} from '@tanstack/react-table';
+import type {TableCellVeticalAlignment} from 'shared/types/chartkit/table';
 
 declare module '@tanstack/react-table' {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -20,6 +21,7 @@ export interface CellData {
     className?: string | (() => string);
     rowSpan?: number;
     isVisible?: boolean;
+    verticalAlignment?: TableCellVeticalAlignment;
 }
 
 export type RenderCellFn<T extends CellData> = (cellData: T) => React.ReactElement | null;
@@ -37,6 +39,7 @@ export type THead = {
     columns?: THead[];
     left?: number;
     index?: number;
+    verticalAlignment?: TableCellVeticalAlignment;
 };
 
 export type TData = CellData[];
@@ -81,6 +84,7 @@ export type HeadCellViewData = {
     sortable: boolean;
     pinned: boolean;
     style?: React.CSSProperties;
+    verticalAlignment?: TableCellVeticalAlignment;
     sorting: 'asc' | 'desc' | false;
     content: JSX.Element | React.ReactNode;
     onClick: () => void;
@@ -95,6 +99,7 @@ export type BodyCellViewData = {
     id: string;
     style?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
+    verticalAlignment?: TableCellVeticalAlignment;
     contentType?: 'null';
     content: JSX.Element | React.ReactNode;
     className?: string;

diff --git a/...DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/usePreparedTableData.ts b/...DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/usePreparedTableData.ts
@@ -383,6 +383,7 @@ export const usePreparedTableData = (props: {
                             sortable,
                             pinned,
                             style: cellStyle,
+                            verticalAlignment: originalCellData?.verticalAlignment,
                             sorting: header.column.getIsSorted(),
                             content: flexRender(
                                 header.column.columnDef.header,
@@ -486,12 +487,14 @@ export const usePreparedTableData = (props: {
                     typeof cell.column.columnDef.cell === 'function'
                         ? cell.column.columnDef.cell
                         : () => cell.column.columnDef.cell;
+                const {verticalAlignment} = originalCellData;
 
                 const cellData: BodyCellViewData = {
                     id: cell.id,
                     index,
                     style: cellStyle,
                     contentStyle,
+                    verticalAlignment,
                     content: renderCell(cell.getContext()),
                     type: get(originalCellData, 'type', get(originalHeadData, 'type')),
                     contentType: originalCellData?.value === null ? 'null' : undefined,

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts
@@ -14,6 +14,7 @@ import type {Primitive, RGBColor} from 'd3';
 import get from 'lodash/get';
 import round from 'lodash/round';
 import {
+    type TableCellVeticalAlignment,
     type TableCellsRow,
     type TableCommonCell,
     type TableRow,
@@ -329,3 +330,27 @@ export function getCellCustomStyle(cellData: unknown, tableBgColor?: string) {
 
     return css;
 }
+
+const VERTICAL_ALIGNMENT_FLEX_MAP = {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
+};
+
+export function getCellVeticalAlignmentStyle<
+    CT extends {verticalAlignment?: TableCellVeticalAlignment},
+>(cell: CT): React.CSSProperties | null {
+    const verticalAlignment = get(cell, 'verticalAlignment', null);
+
+    if (
+        typeof verticalAlignment !== 'string' ||
+        !Object.keys(VERTICAL_ALIGNMENT_FLEX_MAP).includes(verticalAlignment)
+    ) {
+        return null;
+    }
+
+    return {
+        display: 'inline-flex',
+        alignItems: VERTICAL_ALIGNMENT_FLEX_MAP[verticalAlignment],
+    };
+}
diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/utils/renderer.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/utils/renderer.tsx
@@ -26,6 +26,7 @@ import {DiffCell} from '../components/DiffCell/DiffCell';
 import {HtmlCell} from '../components/HtmlCell/HtmlCell';
 import {MarkupCell} from '../components/MarkupCell/MarkupCell';
 import type {THead} from '../components/Table/types';
+import {getCellVeticalAlignmentStyle} from '../components/Table/utils';
 import {TreeCell} from '../components/TreeCell/TreeCell';
 
 import {calculateNumericProperty} from './math';
@@ -34,7 +35,7 @@ const b = block('chartkit-table-widget');
 
 export type HeadCell = THead & {
     name: string;
-    formattedName?: WrappedHTML | string;
+    formattedName?: React.ReactElement | WrappedHTML | string;
     fieldId?: string;
     custom?: unknown;
 };
@@ -59,8 +60,10 @@ export function mapHeadCell(args: {
                 formattedValue: th.formattedName ?? th.name,
                 type: th.markup ? 'markup' : columnType,
             } as TableCommonCell;
+            const verticalAlignmentStyle = getCellVeticalAlignmentStyle(th);
+            const style = verticalAlignmentStyle ? {style: verticalAlignmentStyle} : null;
             return (
-                <span data-qa={ChartKitTableQa.HeadCellContent}>
+                <span {...style} data-qa={ChartKitTableQa.HeadCellContent}>
                     {renderCellContent({cell, column: th, header: true, onRender: onRenderCell})}
                     {hint && <MarkdownHelpPopover markdown={hint} />}
                 </span>
@@ -156,7 +159,7 @@ export function renderCellContent(args: {
         }
     }
 
-    let formattedValue: string | undefined = cell.formattedValue;
+    let formattedValue: React.ReactElement | string | undefined = cell.formattedValue;
     if (!formattedValue) {
         if (cell.value === null) {
             formattedValue = String(cell.value);
@@ -171,6 +174,8 @@ export function renderCellContent(args: {
         } else {
             formattedValue = String(cell.value ?? '');
         }
+    } else if (React.isValidElement(formattedValue)) {
+        return formattedValue;
     } else if (isWrappedHTML(formattedValue)) {
         return <HtmlCell content={formattedValue[WRAPPED_HTML_KEY]} onRender={onRender} />;
     }

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/types.ts b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/types.ts
@@ -16,4 +16,6 @@ export type TableWidgetProps = {
     backgroundColor?: string;
     isQlPreviewTable?: boolean;
     qa?: string;
+    emptyDataMessage?: string;
+    className?: string;
 };
diff --git a/src/ui/units/connections/components/custom-forms/File/File.scss b/src/ui/units/connections/components/custom-forms/File/File.scss
@@ -188,46 +188,15 @@
         }
     }
 
-    // the normal api for working with data-table styles has not yet been delivered
-    & .data-table {
+    &__preview-table {
         height: calc(
             100vh - var(--container-height-offset) - var(--settings-height) - var(
                     --column-filter-height
                 ) - var(--gn-top-alert-height)
         );
-
-        &__table {
-            min-width: 100%;
-        }
-
-        &__head-cell {
-            display: inline-flex;
-            align-items: center;
-        }
-
-        &__th {
-            border-top: none;
-        }
-
-        &__th,
-        &__td {
-            height: 38px;
-            vertical-align: middle;
-            border-left: none;
-            border-right: none;
-            border-color: var(--g-color-line-generic);
-
-            &:first-child {
-                padding-left: 20px;
-            }
-        }
-
-        &__td {
-            border-bottom: none;
-        }
     }
 
-    &__workspace_standalone .data-table {
+    &__workspace_standalone &__preview-table {
         height: calc(
             100vh - var(--container-height-offset) - var(--column-filter-height) - var(
                     --gn-top-alert-height