Remove react-data-table from dataset preview

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

@@ -174,7 +174,15 @@ export function getTableTitle(config: TableWidgetData['config']): TableTitle | u
 }
 
 export function getTableSizes(table: HTMLTableElement) {
-    const tableScale = round(table?.getBoundingClientRect()?.width / table?.clientWidth, 2);
+    // Calculate scale factor to handle CSS transforms.
+    // For very wide tables, Firefox may return incorrect getBoundingClientRect values,
+    // so we validate that tableScale is within reasonable bounds (0.5 to 2.0)
+    let tableScale = round(table?.getBoundingClientRect()?.width / table?.clientWidth, 2);
+
+    if (!Number.isFinite(tableScale) || tableScale < 0.5 || tableScale > 2) {
+        tableScale = 1;
+    }
+
     let rows: HTMLTableRowElement[] = [];
 
     rows = Array.from(

src/ui/units/connections/components/custom-forms/utils/render.tsx

@@ -20,6 +20,7 @@ const isTitleMatchedByFilter = (title: string, filter: string) => {
 const BASE_CELL_CSS = {
     height: '38px',
     borderBottom: '1px solid var(--g-color-line-generic)',
+    whiteSpace: 'nowrap',
 };
 
 const FIRST_CELL_CSS = {

src/ui/units/datasets/components/PreviewHeader/PreviewHeader.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import {ChevronsExpandUpRight, LayoutHeader, LayoutSideContent, Xmark} from '@gravity-ui/icons';
-import {Button, Icon, TextInput} from '@gravity-ui/uikit';
+import {Button, Icon, TextInput, type TextInputProps} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import _debounce from 'lodash/debounce';
 import {formatNumber} from 'shared/modules/format-units/formatUnit';
+import type {DatasetPreviewView} from 'units/datasets/store/types';
 
 import {VIEW_PREVIEW} from '../../constants';
 
@@ -20,19 +21,37 @@ const ICON_WIDTH = 24;
 interface Props {
     amountPreviewRows: number;
     view: string;
-    toggleViewPreview: (args: {view: string}) => void;
+    toggleViewPreview: (args: {view: DatasetPreviewView}) => void;
     closePreview: () => void;
-    changeAmountPreviewRows: (args: {amountPreviewRows: string}) => void;
+    changeAmountPreviewRows: (args: {amountPreviewRows: number}) => void;
     refetchPreviewDataset: () => void;
 }
 
-class PreviewHeader extends React.Component<Props> {
+interface State {
+    internalAmountPreviewRows: string;
+}
+
+const TEXT_INPUT_CONTROL_PROPS: TextInputProps['controlProps'] = {
+    min: 0,
+    step: 1,
+};
+
+class PreviewHeader extends React.Component<Props, State> {
     static defaultProps = {};
 
     private debouncedChangeAmountPreviewRows = _debounce(this.props.refetchPreviewDataset, 1000);
 
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            internalAmountPreviewRows: props.amountPreviewRows.toString(),
+        };
+    }
+
     render() {
-        const {view, amountPreviewRows} = this.props;
+        const {view} = this.props;
+        const {internalAmountPreviewRows} = this.state;
 
         return (
             <div className={b({view})}>
@@ -44,8 +63,9 @@ class PreviewHeader extends React.Component<Props> {
                     <TextInput
                         className={b('amount-preview-rows-inp')}
                         type="number"
-                        value={String(amountPreviewRows)}
+                        value={internalAmountPreviewRows}
                         onUpdate={this.changeAmountPreviewRows}
+                        controlProps={TEXT_INPUT_CONTROL_PROPS}
                     />
                     <span className={b('fade-text')}>
                         {i18n('dataset.dataset-editor.modify', 'label_max-amount-rows', {
@@ -105,18 +125,26 @@ class PreviewHeader extends React.Component<Props> {
         );
     }
 
-    changeAmountPreviewRows = (amountPreviewRows: string) => {
+    changeAmountPreviewRows = (amountPreviewRowsString: string) => {
         const {changeAmountPreviewRows} = this.props;
 
         if (this.debouncedChangeAmountPreviewRows) {
             this.debouncedChangeAmountPreviewRows.cancel();
         }
 
-        if (shouldFetchPreview(amountPreviewRows)) {
+        if (shouldFetchPreview(amountPreviewRowsString)) {
             this.debouncedChangeAmountPreviewRows();
         }
 
-        changeAmountPreviewRows({amountPreviewRows});
+        this.setState({internalAmountPreviewRows: amountPreviewRowsString});
+
+        const amountPreviewRowsNumber = parseInt(amountPreviewRowsString, 10);
+
+        if (Number.isNaN(amountPreviewRowsNumber)) {
+            return;
+        }
+
+        changeAmountPreviewRows({amountPreviewRows: amountPreviewRowsNumber});
     };
 
     togglePreviewFull = () => {

src/ui/units/datasets/components/PreviewTable/PreviewTable.scss

@@ -36,21 +36,6 @@
         font-size: 14px;
     }
 
-    &__header {
-        height: 32px;
-        display: flex;
-        align-items: center;
-    }
-
-    &__column {
-        vertical-align: middle;
-    }
-
-    &__row {
-        height: 32px;
-        border-bottom: 1px solid var(--ds-color-divider);
-    }
-
     &__details-btn {
         margin-left: 12px;
     }