Remove react-data-table from file connection preview

Author: arsen-afaunov

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';
@@ -32,6 +34,7 @@ export interface TableCommonCell {
     // formatted number from Wizard
     formattedValue?: string;
     css?: ChartKitCss;
+    contentCss?: ChartKitCss;
     // if the column type: 'text'
     link?: {
         href: string;
@@ -55,9 +58,9 @@ export type TableCellsRow = {
     cells: TableCell[];
 };
 export type TableRow = TableValuesRow | TableCellsRow;
-export type CommonTableColumn = {
+export type CommonTableColumn<CT extends Record<string, unknown> = Record<string, unknown>> = {
     id?: string;
-    name: string;
+    name: string | ReactElement;
     formattedName?: WrappedHTML | string;
     type: TableCommonCellType;
     group?: boolean;
@@ -67,10 +70,11 @@ export type CommonTableColumn = {
     width?: Column<unknown>['width'];
     /** @deprecated seems like only for type=grid */
     contentCss?: ChartKitCss;
+    innerContentCss?: ChartKitCss;
     sortable?: boolean;
     allowGroupSort?: boolean;
     /** Reserved subspace to store options and values for customized functionality */
-    custom?: Record<string, any>;
+    custom?: CT;
     pinned?: boolean;
     hint?: string;
 };
@@ -133,9 +137,10 @@ export type TableColumn =
     | BarTableColumn;
 type TableSubColumn = {
     id?: string;
-    name: string;
+    name: string | ReactElement;
     formattedName?: WrappedHTML | string;
     css?: ChartKitCss;
+    innerContentCss?: ChartKitCss;
     markup: MarkupItem;
     sub: (TableColumn | TableSubColumn)[];
     width?: string;

src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx

@@ -386,7 +386,7 @@ export const getColumnsAndNames = ({
                 });
                 const columnName = generateName({
                     id: column.id,
-                    name: column.name,
+                    ...(typeof column.name === 'string' ? {name: column.name} : null),
                     level,
                     shift,
                     index,
@@ -423,7 +423,13 @@ export const getColumnsAndNames = ({
             } else {
                 const {id, name, type, css: columnCss, group, autogroup, ...options} = column;
                 const columnWidth = topLevelWidth || column.width;
-                const columnName = generateName({id, name, level, shift, index});
+                const columnName = generateName({
+                    id,
+                    ...(typeof name === 'string' ? {name} : null),
+                    level,
+                    shift,
+                    index,
+                });
 
                 const isColumnSortable =
                     typeof column.sortable === 'undefined' ? true : column.sortable;

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}

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 && (

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

@@ -49,6 +49,7 @@ export const TableHead = React.memo<Props>((props: Props) => {
                                         className={b('th-content', {
                                             sortable: th.sortable,
                                         })}
+                                        style={th.contentStyle}
                                     >
                                         {th.content}
                                         <SortIcon className={b('sort-icon')} sorting={th.sorting} />

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

@@ -81,6 +81,7 @@ export type HeadCellViewData = {
     sortable: boolean;
     pinned: boolean;
     style?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
     sorting: 'asc' | 'desc' | false;
     content: JSX.Element | React.ReactNode;
     onClick: () => void;

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

@@ -34,6 +34,7 @@ import type {
 } from './types';
 import {
     createTableColumns,
+    getCellCustomContentStyle,
     getCellCustomStyle,
     getColumnId,
     getElementBackgroundColor,
@@ -361,6 +362,7 @@ export const usePreparedTableData = (props: {
                             originalCellData,
                             tableBgColor,
                         );
+                        const cellContentStyle = getCellCustomContentStyle(originalCellData);
 
                         if (pinned) {
                             cellStyle.left = leftPositions[originalCellData?.index ?? -1];
@@ -383,6 +385,7 @@ export const usePreparedTableData = (props: {
                             sortable,
                             pinned,
                             style: cellStyle,
+                            contentStyle: cellContentStyle,
                             sorting: header.column.getIsSorted(),
                             content: flexRender(
                                 header.column.columnDef.header,
@@ -477,7 +480,8 @@ export const usePreparedTableData = (props: {
                     cellStyle.wordBreak = 'break-word';
                 }
 
-                const contentStyle: React.CSSProperties = {};
+                const contentStyle: React.CSSProperties =
+                    getCellCustomContentStyle(originalHeadData);
                 if (typeof originalHeadData?.width !== 'undefined') {
                     contentStyle.width = originalHeadData.width;
                 }

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

@@ -329,3 +329,7 @@ export function getCellCustomStyle(cellData: unknown, tableBgColor?: string) {
 
     return css;
 }
+
+export function getCellCustomContentStyle(cellData: unknown) {
+    return {...camelCaseCss(get(cellData, 'contentCss', {}))} as React.CSSProperties;
+}

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

@@ -33,7 +33,7 @@ import {calculateNumericProperty} from './math';
 const b = block('chartkit-table-widget');
 
 export type HeadCell = THead & {
-    name: string;
+    name: string | React.ReactElement;
     formattedName?: WrappedHTML | string;
     fieldId?: string;
     custom?: unknown;
@@ -60,7 +60,7 @@ export function mapHeadCell(args: {
                 type: th.markup ? 'markup' : columnType,
             } as TableCommonCell;
             return (
-                <span data-qa={ChartKitTableQa.HeadCellContent}>
+                <span style={th.innerContentCss} data-qa={ChartKitTableQa.HeadCellContent}>
                     {renderCellContent({cell, column: th, header: true, onRender: onRenderCell})}
                     {hint && <MarkdownHelpPopover markdown={hint} />}
                 </span>
@@ -127,6 +127,10 @@ export function renderCellContent(args: {
     const cellView = get(cell, 'view', get(column, 'view'));
     const cellType = cell.type ?? get(column, 'type');
 
+    if (React.isValidElement(cell.value)) {
+        return cell.value;
+    }
+
     if (cellType === 'markup' || isMarkupItem(cell.value)) {
         return <MarkupCell cell={cell} />;
     }

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;
 };