@snack-uikit/table 0.25.15-preview-9a001bce.0 → 0.25.15

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.25.15 (2024-12-17)
+
+### Only dependencies have been changed
+* [@snack-uikit/button@0.19.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/chips@0.22.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/info-block@0.6.6](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/list@0.21.11](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/pagination@0.9.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.9.13](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
 ## 0.25.14 (2024-12-12)
 
 ### Only dependencies have been changed

package/README.md

@@ -148,10 +148,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
-| onScroll | `(event?: Event) => void` | - |  |
-| enableRowVirtualization | `boolean` | - |  |
-| rowVirtualizerOptions | `PartialKeys<VirtualizerOptions<Element, Element>, "observeElementRect" \| "observeElementOffset" \| "scrollToFn">` | - |  |
-| rowVirtualizerInstanceRef | `MutableRefObject<Virtualizer<Element, Element>>` | - |  |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом
 ### Props
@@ -212,10 +208,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
-| onScroll | `(event?: Event) => void` | - |  |
-| enableRowVirtualization | `boolean` | - |  |
-| rowVirtualizerOptions | `PartialKeys<VirtualizerOptions<Element, Element>, "observeElementRect" \| "observeElementOffset" \| "scrollToFn">` | - |  |
-| rowVirtualizerInstanceRef | `MutableRefObject<Virtualizer<Element, Element>>` | - |  |
 | items | `TData[]` | - | Данные для отрисовки |
 | total | `number` | 10 | Общее кол-во строк |
 | limit | `number` | 10 | Кол-во строк на страницу |

package/dist/cjs/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, onScroll, enableRowVirtualization, rowVirtualizerOptions, rowVirtualizerInstanceRef, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/cjs/components/Table/Table.js

@@ -20,25 +20,22 @@ exports.Table = Table;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
-const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const locale_1 = require("@snack-uikit/locale");
 const scroll_1 = require("@snack-uikit/scroll");
 const skeleton_1 = require("@snack-uikit/skeleton");
 const toolbar_1 = require("@snack-uikit/toolbar");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
-const VirtualRow_1 = require("../../helperComponents/Rows/VirtualRow");
 const utils_2 = require("../../utils");
 const hooks_1 = require("./hooks");
 const usePageReset_1 = require("./hooks/usePageReset");
-const useRowVirtualizer_1 = require("./hooks/useRowVirtualizer");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_3 = require("./utils");
 /** Компонент таблицы */
 function Table(_a) {
-  var _b, _c;
   var {
       data,
       rowPinning = {
@@ -80,13 +77,9 @@ function Table(_a) {
       scrollContainerRef,
       getRowId,
       enableFuzzySearch,
-      savedState,
-      onScroll,
-      enableRowVirtualization,
-      rowVirtualizerOptions,
-      rowVirtualizerInstanceRef
+      savedState
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "onScroll", "enableRowVirtualization", "rowVirtualizerOptions", "rowVirtualizerInstanceRef"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -108,7 +101,6 @@ function Table(_a) {
     onStateChange: onPaginationChange
   } = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-  const tableContainerRef = (0, react_1.useRef)(null);
   const tableColumns = (0, react_1.useMemo)(() => {
     let cols = columnDefinitions;
     if (enableSelection) {
@@ -146,7 +138,10 @@ function Table(_a) {
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: utils_3.truncateCell
+      cell: cell => (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: String(cell.getValue()),
+        maxLines: 1
+      })
     },
     manualSorting,
     manualPagination,
@@ -169,13 +164,7 @@ function Table(_a) {
     getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
     getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
     columnResizeMode: 'onEnd',
-    keepPinnedRows,
-    meta: {
-      tableContainerRef,
-      rowVirtualizerInstanceRef,
-      rowVirtualizerOptions,
-      enableRowVirtualization
-    }
+    keepPinnedRows
   });
   const {
     loadingTable
@@ -215,22 +204,10 @@ function Table(_a) {
   }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
-  const tableRows = table.getRowModel().rows;
-  const tableCenterRows = table.getCenterRows();
-  const tableFilteredRows = table.getFilteredRowModel().rows;
-  const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
-  const topRows = table.getTopRows();
-  const loadingTableRows = loadingTable.getRowModel().rows;
-  const tablePagination = table.getState().pagination;
-  const [isScrollBeenInitialized, setScrollInitialization] = (0, react_1.useState)(false);
-  const rowVirtualizer = (0, useRowVirtualizer_1.useRowVirtualizer)(table, isScrollBeenInitialized);
-  const overallVirtualHeight = (_b = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize()) !== null && _b !== void 0 ? _b : 0;
-  const cssSizeVars = (0, react_1.useMemo)(() => {
+  const columnSizeVars = (0, react_1.useMemo)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = overallVirtualHeight > 0 ? {
-      height: `${overallVirtualHeight}px`
-    } : {};
+    const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -288,10 +265,17 @@ function Table(_a) {
            table.getTotalSize() will trigger re-render after double-click size reset
     */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize(), overallVirtualHeight]);
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
   (0, react_1.useEffect)(() => {
-    columnSizeVarsRef.current = cssSizeVars;
-  }, [cssSizeVars]);
+    columnSizeVarsRef.current = columnSizeVars;
+  }, [columnSizeVars]);
+  const tableRows = table.getRowModel().rows;
+  const tableCenterRows = table.getCenterRows();
+  const tableFilteredRows = table.getFilteredRowModel().rows;
+  const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
+  const topRows = table.getTopRows();
+  const loadingTableRows = loadingTable.getRowModel().rows;
+  const tablePagination = table.getState().pagination;
   const filteredTopRows = table.getState().globalFilter ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id)) : topRows;
   const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
   const {
@@ -306,12 +290,6 @@ function Table(_a) {
     const tempPageSize = (!suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize) + filteredTopRows.length;
     return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), constants_1.DEFAULT_PAGE_SIZE) : tempPageSize;
   }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
-  const tableCtx = (0, react_1.useMemo)(() => ({
-    table
-  }), [table]);
-  const onInitializeScroll = (0, react_1.useCallback)(() => {
-    setScrollInitialization(true);
-  }, []);
   (0, usePageReset_1.usePageReset)({
     manualPagination,
     maximumAvailablePage: pageCount || data.length / pagination.pageSize,
@@ -363,15 +341,15 @@ function Table(_a) {
         "data-outline": outline || undefined,
         children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
           size: 's',
-          ref: (0, merge_refs_1.default)(tableContainerRef, scrollContainerRef),
           className: styles_module_scss_1.default.table,
-          onScroll: onScroll,
-          onInitialized: onInitializeScroll,
+          ref: scrollContainerRef,
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: styles_module_scss_1.default.tableContent,
-            style: cssSizeVars,
+            style: columnSizeVars,
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-              value: tableCtx,
+              value: {
+                table
+              },
               children: loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
                 loading: true,
                 children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
@@ -384,18 +362,10 @@ function Table(_a) {
                     row: row,
                     onRowClick: onRowClick
                   }, row.id))
-                }) : null, ((_c = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getVirtualItems()) !== null && _c !== void 0 ? _c : centerRows).map((rowOrVirtualRow, index) => {
-                  const row = (0, utils_3.isVirtualRow)(rowOrVirtualRow) ? centerRows[rowOrVirtualRow.index] : centerRows[index];
-                  return (0, jsx_runtime_1.jsx)(VirtualRow_1.VirtualRow, {
-                    ref: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                    "data-index": row.index,
-                    virtualRow: (0, utils_3.isVirtualRow)(rowOrVirtualRow) ? rowOrVirtualRow : undefined,
-                    children: (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                      row: row,
-                      onRowClick: onRowClick
-                    })
-                  }, row.id);
-                }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row,
+                  onRowClick: onRowClick
+                }, row.id)), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
                   emptyStates: emptyStates,
                   dataError: dataError,
                   dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),

package/dist/cjs/components/Table/styles.module.css

@@ -1,11 +1,8 @@
 .table{
   border-width:var(--border-width-table, 1px);
   border-radius:var(--radius-table-container, 14px);
-  will-change:transform;
-  overflow-anchor:none;
   position:relative;
   z-index:0;
-  contain:paint;
   overflow:hidden !important;
   display:flex;
   box-sizing:border-box;
@@ -29,7 +26,6 @@
 }
 
 .tableContent{
-  content-visibility:auto;
   min-width:-moz-max-content;
   min-width:max-content;
 }

package/dist/cjs/components/Table/utils.d.ts

@@ -1,5 +1,3 @@
-import { CellContext } from '@tanstack/react-table';
-import { VirtualItem } from '@tanstack/react-virtual';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -16,12 +14,4 @@ type SaveStateToLocalStorageProps = {
     size: string;
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
-/**
- * check the key, because index is contained in a common table row
- */
-export declare function isVirtualRow(row: unknown): row is VirtualItem;
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export declare function truncateCell<TData>(cell: CellContext<TData, unknown>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/Table/utils.js

@@ -7,10 +7,6 @@ exports.getCurrentlyConfiguredHeaderWidth = getCurrentlyConfiguredHeaderWidth;
 exports.getColumnStyleVars = getColumnStyleVars;
 exports.getInitColumnSizeFromLocalStorage = getInitColumnSizeFromLocalStorage;
 exports.saveStateToLocalStorage = saveStateToLocalStorage;
-exports.isVirtualRow = isVirtualRow;
-exports.truncateCell = truncateCell;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
@@ -57,19 +53,4 @@ function saveStateToLocalStorage(_ref2) {
   localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, savedStateFromStorage || {}), {
     resizeState: newResizeState
   })));
-}
-/**
- * check the key, because index is contained in a common table row
- */
-function isVirtualRow(row) {
-  return typeof row === 'object' && row != null && 'key' in row;
-}
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-function truncateCell(cell) {
-  return (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-    text: String(cell.getValue()),
-    maxLines: 1
-  });
 }

package/dist/cjs/components/types.d.ts

@@ -1,6 +1,5 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { MutableRefObject, ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
@@ -130,10 +129,6 @@ export type TableProps<TData extends object> = WithSupportProps<{
         id: string;
         resize?: boolean;
     };
-    onScroll?: (event?: Event) => void;
-    enableRowVirtualization?: boolean;
-    rowVirtualizerOptions?: Parameters<typeof useVirtualizer>[0];
-    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<Element, Element> | null>;
 }>;
 export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */

package/dist/esm/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, onScroll, enableRowVirtualization, rowVirtualizerOptions, rowVirtualizerInstanceRef, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/esm/components/Table/Table.js

@@ -12,28 +12,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import cn from 'classnames';
-import mergeRefs from 'merge-refs';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar } from '@snack-uikit/toolbar';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { DEFAULT_PAGE_SIZE } from '../../constants';
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
-import { VirtualRow } from '../../helperComponents/Rows/VirtualRow';
 import { fuzzyFilter } from '../../utils';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
-import { useRowVirtualizer } from './hooks/useRowVirtualizer';
 import styles from './styles.module.css';
-import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, isVirtualRow, saveStateToLocalStorage, truncateCell, } from './utils';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
-    var _b, _c;
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, onScroll, enableRowVirtualization, rowVirtualizerOptions, rowVirtualizerInstanceRef } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "onScroll", "enableRowVirtualization", "rowVirtualizerOptions", "rowVirtualizerInstanceRef"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -43,7 +40,6 @@ export function Table(_a) {
     const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
     const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-    const tableContainerRef = useRef(null);
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
         if (enableSelection) {
@@ -78,7 +74,7 @@ export function Table(_a) {
             enableSorting: false,
             enableResizing: false,
             minSize: 40,
-            cell: truncateCell,
+            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
         },
         manualSorting,
         manualPagination,
@@ -102,12 +98,6 @@ export function Table(_a) {
         getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onEnd',
         keepPinnedRows,
-        meta: {
-            tableContainerRef,
-            rowVirtualizerInstanceRef,
-            rowVirtualizerOptions,
-            enableRowVirtualization,
-        },
     });
     const { loadingTable } = useLoadingTable({
         pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
@@ -145,20 +135,10 @@ export function Table(_a) {
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
-    const tableRows = table.getRowModel().rows;
-    const tableCenterRows = table.getCenterRows();
-    const tableFilteredRows = table.getFilteredRowModel().rows;
-    const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
-    const topRows = table.getTopRows();
-    const loadingTableRows = loadingTable.getRowModel().rows;
-    const tablePagination = table.getState().pagination;
-    const [isScrollBeenInitialized, setScrollInitialization] = useState(false);
-    const rowVirtualizer = useRowVirtualizer(table, isScrollBeenInitialized);
-    const overallVirtualHeight = (_b = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize()) !== null && _b !== void 0 ? _b : 0;
-    const cssSizeVars = useMemo(() => {
+    const columnSizeVars = useMemo(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = overallVirtualHeight > 0 ? { height: `${overallVirtualHeight}px` } : {};
+        const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
@@ -207,10 +187,17 @@ export function Table(_a) {
           table.getTotalSize() will trigger re-render after double-click size reset
         */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize(), overallVirtualHeight]);
+    }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
     useEffect(() => {
-        columnSizeVarsRef.current = cssSizeVars;
-    }, [cssSizeVars]);
+        columnSizeVarsRef.current = columnSizeVars;
+    }, [columnSizeVars]);
+    const tableRows = table.getRowModel().rows;
+    const tableCenterRows = table.getCenterRows();
+    const tableFilteredRows = table.getFilteredRowModel().rows;
+    const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
+    const topRows = table.getTopRows();
+    const loadingTableRows = loadingTable.getRowModel().rows;
+    const tablePagination = table.getState().pagination;
     const filteredTopRows = table.getState().globalFilter
         ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
         : topRows;
@@ -221,10 +208,6 @@ export function Table(_a) {
         const tempPageSize = (!suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize) + filteredTopRows.length;
         return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
     }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
-    const tableCtx = useMemo(() => ({ table }), [table]);
-    const onInitializeScroll = useCallback(() => {
-        setScrollInitialization(true);
-    }, []);
     usePageReset({
         manualPagination,
         maximumAvailablePage: pageCount || data.length / pagination.pageSize,
@@ -239,10 +222,7 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', ref: mergeRefs(tableContainerRef, scrollContainerRef), className: styles.table, onScroll: onScroll, onInitialized: onInitializeScroll, children: [_jsx("div", { className: styles.tableContent, style: cssSizeVars, children: _jsx(TableContext.Provider, { value: tableCtx, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, ((_c = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getVirtualItems()) !== null && _c !== void 0 ? _c : centerRows).map((rowOrVirtualRow, index) => {
-                                                const row = isVirtualRow(rowOrVirtualRow) ? centerRows[rowOrVirtualRow.index] : centerRows[index];
-                                                return (_jsx(VirtualRow, { ref: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement, "data-index": row.index, virtualRow: isVirtualRow(rowOrVirtualRow) ? rowOrVirtualRow : undefined, children: _jsx(BodyRow, { row: row, onRowClick: onRowClick }) }, row.id));
-                                            }), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/styles.module.css

@@ -1,11 +1,8 @@
 .table{
   border-width:var(--border-width-table, 1px);
   border-radius:var(--radius-table-container, 14px);
-  will-change:transform;
-  overflow-anchor:none;
   position:relative;
   z-index:0;
-  contain:paint;
   overflow:hidden !important;
   display:flex;
   box-sizing:border-box;
@@ -29,7 +26,6 @@
 }
 
 .tableContent{
-  content-visibility:auto;
   min-width:-moz-max-content;
   min-width:max-content;
 }

package/dist/esm/components/Table/utils.d.ts

@@ -1,5 +1,3 @@
-import { CellContext } from '@tanstack/react-table';
-import { VirtualItem } from '@tanstack/react-virtual';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -16,12 +14,4 @@ type SaveStateToLocalStorageProps = {
     size: string;
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
-/**
- * check the key, because index is contained in a common table row
- */
-export declare function isVirtualRow(row: unknown): row is VirtualItem;
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export declare function truncateCell<TData>(cell: CellContext<TData, unknown>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/Table/utils.js

@@ -1,5 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TruncateString } from '@snack-uikit/truncate-string';
 import { isBrowser } from '@snack-uikit/utils';
 export function getCurrentlyConfiguredHeaderWidth(id) {
     if (isBrowser()) {
@@ -34,15 +32,3 @@ export function saveStateToLocalStorage({ id, columnId, size }) {
     newResizeState[`${RESIZED_KEY}-${columnId}`] = size;
     localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, (savedStateFromStorage || {})), { resizeState: newResizeState })));
 }
-/**
- * check the key, because index is contained in a common table row
- */
-export function isVirtualRow(row) {
-    return typeof row === 'object' && row != null && 'key' in row;
-}
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export function truncateCell(cell) {
-    return _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 });
-}

package/dist/esm/components/types.d.ts

@@ -1,6 +1,5 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { MutableRefObject, ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
@@ -130,10 +129,6 @@ export type TableProps<TData extends object> = WithSupportProps<{
         id: string;
         resize?: boolean;
     };
-    onScroll?: (event?: Event) => void;
-    enableRowVirtualization?: boolean;
-    rowVirtualizerOptions?: Parameters<typeof useVirtualizer>[0];
-    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<Element, Element> | null>;
 }>;
 export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.25.15-preview-9a001bce.0",
+  "version": "0.25.15",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,32 +36,30 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.4",
-    "@snack-uikit/chips": "0.22.3",
+    "@snack-uikit/button": "0.19.5",
+    "@snack-uikit/chips": "0.22.4",
     "@snack-uikit/icon-predefined": "0.7.2",
     "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/info-block": "0.6.5",
-    "@snack-uikit/list": "0.21.10",
-    "@snack-uikit/pagination": "0.9.4",
+    "@snack-uikit/info-block": "0.6.6",
+    "@snack-uikit/list": "0.21.11",
+    "@snack-uikit/pagination": "0.9.5",
     "@snack-uikit/scroll": "0.9.2",
     "@snack-uikit/skeleton": "0.6.1",
     "@snack-uikit/toggles": "0.13.2",
-    "@snack-uikit/toolbar": "0.9.12",
+    "@snack-uikit/toolbar": "0.9.13",
     "@snack-uikit/truncate-string": "0.6.2",
     "@snack-uikit/typography": "0.8.3",
     "@snack-uikit/utils": "3.6.0",
     "@tanstack/match-sorter-utils": "8.11.8",
     "@tanstack/react-table": "8.12.0",
-    "@tanstack/react-virtual": "3.10.9",
     "classnames": "2.5.1",
     "copy-to-clipboard": "3.3.3",
     "lodash.debounce": "4.0.8",
-    "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "65cdde31cadc1bf88bf053786656d0a12c19a1d4"
+  "gitHead": "33a6d8bc270bd11dec3e4834f2ba8e97c57d5c15"
 }

package/src/components/Table/Table.tsx

@@ -1,4 +1,5 @@
 import {
+  CellContext,
   ColumnPinningState,
   getCoreRowModel,
   getFilteredRowModel,
@@ -10,13 +11,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import cn from 'classnames';
-import mergeRefs from 'merge-refs';
-import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar } from '@snack-uikit/toolbar';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { DEFAULT_PAGE_SIZE } from '../../constants';
@@ -34,21 +35,17 @@ import {
   TablePagination,
   useEmptyState,
 } from '../../helperComponents';
-import { VirtualRow } from '../../helperComponents/Rows/VirtualRow';
 import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
-import { useRowVirtualizer } from './hooks/useRowVirtualizer';
 import styles from './styles.module.scss';
 import {
   getColumnStyleVars,
   getCurrentlyConfiguredHeaderWidth,
   getInitColumnSizeFromLocalStorage,
-  isVirtualRow,
   saveStateToLocalStorage,
-  truncateCell,
 } from './utils';
 
 /** Компонент таблицы */
@@ -95,11 +92,6 @@ export function Table<TData extends object>({
   enableFuzzySearch,
   savedState,
 
-  onScroll,
-  enableRowVirtualization,
-  rowVirtualizerOptions,
-  rowVirtualizerInstanceRef,
-
   ...rest
 }: TableProps<TData>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -122,7 +114,6 @@ export function Table<TData extends object>({
     defaultPaginationState,
   );
   const enableSelection = Boolean(rowSelectionProp?.enable);
-  const tableContainerRef = useRef<HTMLElement>(null);
 
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = columnDefinitions;
@@ -146,7 +137,6 @@ export function Table<TData extends object>({
   const table = useReactTable<TData>({
     data,
     columns: tableColumns,
-
     state: {
       columnPinning,
       globalFilter,
@@ -160,7 +150,7 @@ export function Table<TData extends object>({
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: truncateCell,
+      cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
     },
 
     manualSorting,
@@ -187,13 +177,6 @@ export function Table<TData extends object>({
     getCoreRowModel: getCoreRowModel(),
     columnResizeMode: 'onEnd',
     keepPinnedRows,
-
-    meta: {
-      tableContainerRef,
-      rowVirtualizerInstanceRef,
-      rowVirtualizerOptions,
-      enableRowVirtualization,
-    },
   });
 
   const { loadingTable } = useLoadingTable({
@@ -241,21 +224,9 @@ export function Table<TData extends object>({
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
 
-  const tableRows = table.getRowModel().rows;
-  const tableCenterRows = table.getCenterRows();
-  const tableFilteredRows = table.getFilteredRowModel().rows;
-  const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
-  const topRows = table.getTopRows();
-  const loadingTableRows = loadingTable.getRowModel().rows;
-  const tablePagination = table.getState().pagination;
-
-  const [isScrollBeenInitialized, setScrollInitialization] = useState(false);
-  const rowVirtualizer = useRowVirtualizer(table, isScrollBeenInitialized);
-  const overallVirtualHeight = rowVirtualizer?.getTotalSize() ?? 0;
-
-  const cssSizeVars = useMemo(() => {
+  const columnSizeVars = useMemo(() => {
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes: Record<string, string> = overallVirtualHeight > 0 ? { height: `${overallVirtualHeight}px` } : {};
+    const colSizes: Record<string, string> = {};
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
@@ -317,11 +288,19 @@ export function Table<TData extends object>({
       table.getTotalSize() will trigger re-render after double-click size reset
     */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize(), overallVirtualHeight]);
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
 
   useEffect(() => {
-    columnSizeVarsRef.current = cssSizeVars;
-  }, [cssSizeVars]);
+    columnSizeVarsRef.current = columnSizeVars;
+  }, [columnSizeVars]);
+
+  const tableRows = table.getRowModel().rows;
+  const tableCenterRows = table.getCenterRows();
+  const tableFilteredRows = table.getFilteredRowModel().rows;
+  const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
+  const topRows = table.getTopRows();
+  const loadingTableRows = loadingTable.getRowModel().rows;
+  const tablePagination = table.getState().pagination;
 
   const filteredTopRows = table.getState().globalFilter
     ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
@@ -337,12 +316,6 @@ export function Table<TData extends object>({
     return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
   }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination?.pageSize, tableRows.length]);
 
-  const tableCtx = useMemo(() => ({ table }), [table]);
-
-  const onInitializeScroll = useCallback(() => {
-    setScrollInitialization(true);
-  }, []);
-
   usePageReset({
     manualPagination,
     maximumAvailablePage: pageCount || data.length / pagination.pageSize,
@@ -402,15 +375,9 @@ export function Table<TData extends object>({
         )}
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
-          <Scroll
-            size='s'
-            ref={mergeRefs(tableContainerRef, scrollContainerRef)}
-            className={styles.table}
-            onScroll={onScroll}
-            onInitialized={onInitializeScroll}
-          >
-            <div className={styles.tableContent} style={cssSizeVars}>
-              <TableContext.Provider value={tableCtx}>
+          <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
+            <div className={styles.tableContent} style={columnSizeVars}>
+              <TableContext.Provider value={{ table }}>
                 {loading ? (
                   <SkeletonContextProvider loading>
                     <HeaderRow />
@@ -429,20 +396,9 @@ export function Table<TData extends object>({
                       </div>
                     ) : null}
 
-                    {(rowVirtualizer?.getVirtualItems() ?? centerRows).map((rowOrVirtualRow, index) => {
-                      const row = isVirtualRow(rowOrVirtualRow) ? centerRows[rowOrVirtualRow.index] : centerRows[index];
-
-                      return (
-                        <VirtualRow
-                          key={row.id}
-                          ref={rowVirtualizer?.measureElement}
-                          data-index={row.index}
-                          virtualRow={isVirtualRow(rowOrVirtualRow) ? rowOrVirtualRow : undefined}
-                        >
-                          <BodyRow row={row} onRowClick={onRowClick} />
-                        </VirtualRow>
-                      );
-                    })}
+                    {centerRows.map(row => (
+                      <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
+                    ))}
 
                     <TableEmptyState
                       emptyStates={emptyStates}

package/src/components/Table/styles.module.scss

@@ -3,15 +3,10 @@
 .table {
   @include styles-tokens-table.composite-var(styles-tokens-table.$table-table-container);
 
-  will-change: transform;
-  overflow-anchor: none;
-  
   position: relative;
   /* stylelint-disable-next-line declaration-property-value-allowed-list */
   z-index: 0;
 
-  contain: paint;
-  
   /* stylelint-disable-next-line declaration-no-important */
   overflow: hidden !important;
   display: flex;
@@ -44,7 +39,6 @@
 }
 
 .tableContent {
-  content-visibility: auto;
   min-width: max-content;
 }
 

package/src/components/Table/{utils.tsx → utils.ts}

@@ -1,7 +1,3 @@
-import { CellContext } from '@tanstack/react-table';
-import { VirtualItem } from '@tanstack/react-virtual';
-
-import { TruncateString } from '@snack-uikit/truncate-string';
 import { isBrowser } from '@snack-uikit/utils';
 
 export function getCurrentlyConfiguredHeaderWidth(id: string): number {
@@ -62,17 +58,3 @@ export function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocal
 
   localStorage.setItem(id, JSON.stringify({ ...(savedStateFromStorage || {}), resizeState: newResizeState }));
 }
-
-/**
- * check the key, because index is contained in a common table row
- */
-export function isVirtualRow(row: unknown): row is VirtualItem {
-  return typeof row === 'object' && row != null && 'key' in row;
-}
-
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export function truncateCell<TData>(cell: CellContext<TData, unknown>) {
-  return <TruncateString text={String(cell.getValue())} maxLines={1} />;
-}

package/src/components/types.ts

@@ -6,8 +6,7 @@ import {
   RowSelectionState,
   SortingState,
 } from '@tanstack/react-table';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { MutableRefObject, ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -162,14 +161,6 @@ export type TableProps<TData extends object> = WithSupportProps<{
     id: string;
     resize?: boolean;
   };
-
-  onScroll?: (event?: Event) => void;
-  // Включение виртуализации для строк
-  enableRowVirtualization?: boolean;
-  // Параметры для переопределения настроек виртуализации строк
-  rowVirtualizerOptions?: Parameters<typeof useVirtualizer>[0];
-  // Ссылка на экземпляр useRowVirtualizer
-  rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<Element, Element> | null>;
 }>;
 
 export type ServerTableProps<TData extends object> = Omit<

package/dist/cjs/components/Table/hooks/useRowVirtualizer.d.ts

@@ -1,2 +0,0 @@
-import { Table } from '@tanstack/react-table';
-export declare function useRowVirtualizer(table: Table<any>, isScrollInitialized: boolean): import("@tanstack/virtual-core").Virtualizer<Element, Element> | undefined;

package/dist/cjs/components/Table/hooks/useRowVirtualizer.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRowVirtualizer = useRowVirtualizer;
-const react_virtual_1 = require("@tanstack/react-virtual");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function useRowVirtualizer(table, isScrollInitialized) {
-  const {
-    getRowModel,
-    options: {
-      meta = {}
-    }
-  } = table;
-  const {
-    rowVirtualizerInstanceRef,
-    rowVirtualizerOptions,
-    tableContainerRef,
-    enableRowVirtualization
-  } = meta;
-  const normalRowHeight = 40;
-  const rowVirtualizer = (0, react_virtual_1.useVirtualizer)(Object.assign({
-    count: getRowModel().rows.length,
-    estimateSize: () => normalRowHeight,
-    getScrollElement: () => isScrollInitialized ? tableContainerRef.current : null,
-    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height : undefined,
-    overscan: 28,
-    enabled: enableRowVirtualization
-  }, rowVirtualizerOptions));
-  if (rowVirtualizerInstanceRef && enableRowVirtualization) {
-    rowVirtualizerInstanceRef.current = rowVirtualizer;
-  }
-  return enableRowVirtualization ? rowVirtualizer : undefined;
-}

package/dist/cjs/helperComponents/Rows/VirtualRow.d.ts

@@ -1,7 +0,0 @@
-import { VirtualItem } from '@tanstack/react-virtual';
-import { HTMLAttributes } from 'react';
-export declare const VirtualRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    virtualRow?: VirtualItem;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/helperComponents/Rows/VirtualRow.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VirtualRow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.VirtualRow = (0, react_1.forwardRef)((_a, ref) => {
-  var {
-      virtualRow,
-      children
-    } = _a,
-    attributes = __rest(_a, ["virtualRow", "children"]);
-  if (!virtualRow) {
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
-      children: children
-    });
-  }
-  return (0, jsx_runtime_1.jsx)("div", Object.assign({
-    ref: ref,
-    style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      transform: `translateY(${virtualRow.start}px)`
-    }
-  }, attributes, {
-    children: children
-  }));
-});

package/dist/esm/components/Table/hooks/useRowVirtualizer.d.ts

@@ -1,2 +0,0 @@
-import { Table } from '@tanstack/react-table';
-export declare function useRowVirtualizer(table: Table<any>, isScrollInitialized: boolean): import("@tanstack/virtual-core").Virtualizer<Element, Element> | undefined;

package/dist/esm/components/Table/hooks/useRowVirtualizer.js

@@ -1,14 +0,0 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useRowVirtualizer(table, isScrollInitialized) {
-    const { getRowModel, options: { meta = {} }, } = table;
-    const { rowVirtualizerInstanceRef, rowVirtualizerOptions, tableContainerRef, enableRowVirtualization } = meta;
-    const normalRowHeight = 40;
-    const rowVirtualizer = useVirtualizer(Object.assign({ count: getRowModel().rows.length, estimateSize: () => normalRowHeight, getScrollElement: () => (isScrollInitialized ? tableContainerRef.current : null), measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
-            ? element => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
-            : undefined, overscan: 28, enabled: enableRowVirtualization }, rowVirtualizerOptions));
-    if (rowVirtualizerInstanceRef && enableRowVirtualization) {
-        rowVirtualizerInstanceRef.current = rowVirtualizer;
-    }
-    return enableRowVirtualization ? rowVirtualizer : undefined;
-}

package/dist/esm/helperComponents/Rows/VirtualRow.d.ts

@@ -1,7 +0,0 @@
-import { VirtualItem } from '@tanstack/react-virtual';
-import { HTMLAttributes } from 'react';
-export declare const VirtualRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    virtualRow?: VirtualItem;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/helperComponents/Rows/VirtualRow.js

@@ -1,26 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-export const VirtualRow = forwardRef((_a, ref) => {
-    var { virtualRow, children } = _a, attributes = __rest(_a, ["virtualRow", "children"]);
-    if (!virtualRow) {
-        return _jsx(_Fragment, { children: children });
-    }
-    return (_jsx("div", Object.assign({ ref: ref, style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            transform: `translateY(${virtualRow.start}px)`,
-        } }, attributes, { children: children })));
-});

package/src/components/Table/hooks/useRowVirtualizer.ts

@@ -1,44 +0,0 @@
-import { Table } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { MutableRefObject } from 'react';
-
-import { TableProps } from '../../types';
-
-type MetaParams = Pick<
-  TableProps<never>,
-  'rowVirtualizerInstanceRef' | 'rowVirtualizerOptions' | 'enableRowVirtualization'
-> & {
-  tableContainerRef: MutableRefObject<HTMLElement | null>;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useRowVirtualizer(table: Table<any>, isScrollInitialized: boolean) {
-  const {
-    getRowModel,
-    options: { meta = {} },
-  } = table;
-
-  const { rowVirtualizerInstanceRef, rowVirtualizerOptions, tableContainerRef, enableRowVirtualization } =
-    meta as MetaParams;
-
-  const normalRowHeight = 40;
-
-  const rowVirtualizer = useVirtualizer({
-    count: getRowModel().rows.length,
-    estimateSize: () => normalRowHeight,
-    getScrollElement: () => (isScrollInitialized ? tableContainerRef.current : null),
-    measureElement:
-      typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
-        ? element => element?.getBoundingClientRect().height
-        : undefined,
-    overscan: 28,
-    enabled: enableRowVirtualization,
-    ...rowVirtualizerOptions,
-  });
-
-  if (rowVirtualizerInstanceRef && enableRowVirtualization) {
-    rowVirtualizerInstanceRef.current = rowVirtualizer;
-  }
-
-  return enableRowVirtualization ? rowVirtualizer : undefined;
-}

package/src/helperComponents/Rows/VirtualRow.tsx

@@ -1,27 +0,0 @@
-import { VirtualItem } from '@tanstack/react-virtual';
-import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
-
-export const VirtualRow = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<HTMLAttributes<HTMLDivElement> & { virtualRow?: VirtualItem }>
->(({ virtualRow, children, ...attributes }, ref) => {
-  if (!virtualRow) {
-    return <>{children}</>;
-  }
-
-  return (
-    <div
-      ref={ref}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        transform: `translateY(${virtualRow.start}px)`,
-      }}
-      {...attributes}
-    >
-      {children}
-    </div>
-  );
-});