@snack-uikit/table 0.25.17 → 0.25.18-preview-cfe0e263.0

package/README.md

@@ -148,6 +148,10 @@ 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
@@ -208,6 +212,10 @@ 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, ...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, onScroll, enableRowVirtualization, rowVirtualizerOptions, rowVirtualizerInstanceRef, ...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,22 +20,25 @@ 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 = {
@@ -77,9 +80,13 @@ function Table(_a) {
       scrollContainerRef,
       getRowId,
       enableFuzzySearch,
-      savedState
+      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"]);
+    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"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -101,6 +108,7 @@ 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) {
@@ -138,10 +146,7 @@ function Table(_a) {
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: cell => (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-        text: String(cell.getValue()),
-        maxLines: 1
-      })
+      cell: utils_3.truncateCell
     },
     manualSorting,
     manualPagination,
@@ -164,7 +169,13 @@ function Table(_a) {
     getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
     getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
     columnResizeMode: 'onEnd',
-    keepPinnedRows
+    keepPinnedRows,
+    meta: {
+      tableContainerRef,
+      rowVirtualizerInstanceRef,
+      rowVirtualizerOptions,
+      enableRowVirtualization
+    }
   });
   const {
     loadingTable
@@ -204,10 +215,22 @@ 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 columnSizeVars = (0, react_1.useMemo)(() => {
+  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)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = {};
+    const colSizes = overallVirtualHeight > 0 ? {
+      height: `${overallVirtualHeight}px`
+    } : {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -265,17 +288,10 @@ 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()]);
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize(), overallVirtualHeight]);
   (0, react_1.useEffect)(() => {
-    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;
+    columnSizeVarsRef.current = cssSizeVars;
+  }, [cssSizeVars]);
   const filteredTopRows = table.getState().globalFilter ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id)) : topRows;
   const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
   const {
@@ -290,6 +306,12 @@ 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,
@@ -341,15 +363,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,
-          ref: scrollContainerRef,
+          onScroll: onScroll,
+          onInitialized: onInitializeScroll,
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: styles_module_scss_1.default.tableContent,
-            style: columnSizeVars,
+            style: cssSizeVars,
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-              value: {
-                table
-              },
+              value: tableCtx,
               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, {
@@ -362,10 +384,18 @@ function Table(_a) {
                     row: row,
                     onRowClick: onRowClick
                   }, row.id))
-                }) : 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, {
+                }) : 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, {
                   emptyStates: emptyStates,
                   dataError: dataError,
                   dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowVirtualizer = useRowVirtualizer;
+const react_virtual_1 = require("@tanstack/react-virtual");
+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/components/Table/styles.module.css

@@ -1,8 +1,11 @@
 .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;
@@ -26,6 +29,7 @@
 }
 
 .tableContent{
+  content-visibility:auto;
   min-width:-moz-max-content;
   min-width:max-content;
 }

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

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

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,43 @@
+"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;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VirtualRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+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,
+    className: styles_module_scss_1.default.virtualRow,
+    style: {
+      '--virtual-row-deviation': `${virtualRow.start}px`
+    }
+  }, attributes, {
+    children: children
+  }));
+});

package/dist/cjs/helperComponents/Rows/styles.module.css

@@ -85,4 +85,12 @@
   z-index:3;
   top:0;
   border:none;
+}
+
+.virtualRow{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  transform:translateY(var(--virtual-row-deviation));
 }

package/dist/cjs/types.d.ts

@@ -1,4 +1,5 @@
 import { CellContext, ColumnDef, ColumnMeta, HeaderContext, PaginationState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
 import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
@@ -39,5 +40,6 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
+export type RowVirtualizer = Virtualizer<Element, Element> | null;
 export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { ColumnPinPosition, PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

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, ...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, onScroll, enableRowVirtualization, rowVirtualizerOptions, rowVirtualizerInstanceRef, ...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,25 +12,28 @@ 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 { useCallback, useEffect, useMemo, useRef } from 'react';
+import mergeRefs from 'merge-refs';
+import { useCallback, useEffect, useMemo, useRef, useState } 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, saveStateToLocalStorage, } from './utils';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, isVirtualRow, saveStateToLocalStorage, truncateCell, } 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 } = _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"]);
+    }, 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"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -40,6 +43,7 @@ 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) {
@@ -74,7 +78,7 @@ export function Table(_a) {
             enableSorting: false,
             enableResizing: false,
             minSize: 40,
-            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
+            cell: truncateCell,
         },
         manualSorting,
         manualPagination,
@@ -98,6 +102,12 @@ 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),
@@ -135,10 +145,20 @@ export function Table(_a) {
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
-    const columnSizeVars = useMemo(() => {
+    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(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = {};
+        const colSizes = overallVirtualHeight > 0 ? { height: `${overallVirtualHeight}px` } : {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
@@ -187,17 +207,10 @@ 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()]);
+    }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize(), overallVirtualHeight]);
     useEffect(() => {
-        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;
+        columnSizeVarsRef.current = cssSizeVars;
+    }, [cssSizeVars]);
     const filteredTopRows = table.getState().globalFilter
         ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
         : topRows;
@@ -208,6 +221,10 @@ 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,
@@ -222,7 +239,10 @@ 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', 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 }))] })) }));
+                            }, 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 }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

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

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

@@ -0,0 +1,13 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+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/components/Table/styles.module.css

@@ -1,8 +1,11 @@
 .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;
@@ -26,6 +29,7 @@
 }
 
 .tableContent{
+  content-visibility:auto;
   min-width:-moz-max-content;
   min-width:max-content;
 }

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

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

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,21 @@
+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';
+import styles from './styles.module.css';
+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, className: styles.virtualRow, style: { '--virtual-row-deviation': `${virtualRow.start}px` } }, attributes, { children: children })));
+});

package/dist/esm/helperComponents/Rows/styles.module.css

@@ -85,4 +85,12 @@
   z-index:3;
   top:0;
   border:none;
+}
+
+.virtualRow{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  transform:translateY(var(--virtual-row-deviation));
 }

package/dist/esm/types.d.ts

@@ -1,4 +1,5 @@
 import { CellContext, ColumnDef, ColumnMeta, HeaderContext, PaginationState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
 import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
@@ -39,5 +40,6 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
+export type RowVirtualizer = Virtualizer<Element, Element> | null;
 export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { ColumnPinPosition, PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.25.17",
+  "version": "0.25.18-preview-cfe0e263.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -52,14 +52,16 @@
     "@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": "0e3ad2b84a59c2a008bfa95a48a29dbecd0b5a1c"
+  "gitHead": "d40c24c19cce11b5126931bc317bf88deb0c216a"
 }

package/src/components/Table/Table.tsx

@@ -1,5 +1,4 @@
 import {
-  CellContext,
   ColumnPinningState,
   getCoreRowModel,
   getFilteredRowModel,
@@ -11,13 +10,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import cn from 'classnames';
-import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+import mergeRefs from 'merge-refs';
+import { RefObject, useCallback, useEffect, useMemo, useRef, useState } 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';
@@ -35,17 +34,21 @@ 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';
 
 /** Компонент таблицы */
@@ -92,6 +95,11 @@ export function Table<TData extends object>({
   enableFuzzySearch,
   savedState,
 
+  onScroll,
+  enableRowVirtualization,
+  rowVirtualizerOptions,
+  rowVirtualizerInstanceRef,
+
   ...rest
 }: TableProps<TData>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -114,6 +122,7 @@ 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;
@@ -137,6 +146,7 @@ export function Table<TData extends object>({
   const table = useReactTable<TData>({
     data,
     columns: tableColumns,
+
     state: {
       columnPinning,
       globalFilter,
@@ -150,7 +160,7 @@ export function Table<TData extends object>({
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
+      cell: truncateCell,
     },
 
     manualSorting,
@@ -177,6 +187,13 @@ export function Table<TData extends object>({
     getCoreRowModel: getCoreRowModel(),
     columnResizeMode: 'onEnd',
     keepPinnedRows,
+
+    meta: {
+      tableContainerRef,
+      rowVirtualizerInstanceRef,
+      rowVirtualizerOptions,
+      enableRowVirtualization,
+    },
   });
 
   const { loadingTable } = useLoadingTable({
@@ -224,9 +241,21 @@ export function Table<TData extends object>({
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
 
-  const columnSizeVars = useMemo(() => {
+  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 originalColumnDefs = table._getColumnDefs();
-    const colSizes: Record<string, string> = {};
+    const colSizes: Record<string, string> = overallVirtualHeight > 0 ? { height: `${overallVirtualHeight}px` } : {};
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
@@ -288,19 +317,11 @@ 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()]);
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize(), overallVirtualHeight]);
 
   useEffect(() => {
-    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;
+    columnSizeVarsRef.current = cssSizeVars;
+  }, [cssSizeVars]);
 
   const filteredTopRows = table.getState().globalFilter
     ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
@@ -316,6 +337,12 @@ 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,
@@ -375,9 +402,15 @@ export function Table<TData extends object>({
         )}
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
-          <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
-            <div className={styles.tableContent} style={columnSizeVars}>
-              <TableContext.Provider value={{ table }}>
+          <Scroll
+            size='s'
+            ref={mergeRefs(tableContainerRef, scrollContainerRef)}
+            className={styles.table}
+            onScroll={onScroll}
+            onInitialized={onInitializeScroll}
+          >
+            <div className={styles.tableContent} style={cssSizeVars}>
+              <TableContext.Provider value={tableCtx}>
                 {loading ? (
                   <SkeletonContextProvider loading>
                     <HeaderRow />
@@ -396,9 +429,20 @@ export function Table<TData extends object>({
                       </div>
                     ) : null}
 
-                    {centerRows.map(row => (
-                      <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
-                    ))}
+                    {(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>
+                      );
+                    })}
 
                     <TableEmptyState
                       emptyStates={emptyStates}

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

@@ -0,0 +1,43 @@
+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>;
+};
+
+export function useRowVirtualizer<T extends object>(table: Table<T>, 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/components/Table/styles.module.scss

@@ -3,10 +3,15 @@
 .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;
@@ -39,6 +44,7 @@
 }
 
 .tableContent {
+  content-visibility: auto;
   min-width: max-content;
 }
 

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

@@ -1,3 +1,7 @@
+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 {
@@ -58,3 +62,17 @@ 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,13 +6,14 @@ import {
   RowSelectionState,
   SortingState,
 } from '@tanstack/react-table';
-import { ReactNode, RefObject } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { MutableRefObject, ReactNode, RefObject } from 'react';
 
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
-import { ColumnDefinition } from '../types';
+import { ColumnDefinition, RowVirtualizer } from '../types';
 
 export type TableProps<TData extends object> = WithSupportProps<{
   /** Данные для отрисовки */
@@ -161,6 +162,14 @@ 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<RowVirtualizer>;
 }>;
 
 export type ServerTableProps<TData extends object> = Omit<

package/src/helperComponents/Rows/VirtualRow.tsx

@@ -0,0 +1,24 @@
+import { VirtualItem } from '@tanstack/react-virtual';
+import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+
+import styles from './styles.module.scss';
+
+export const VirtualRow = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<HTMLAttributes<HTMLDivElement> & { virtualRow?: VirtualItem }>
+>(({ virtualRow, children, ...attributes }, ref) => {
+  if (!virtualRow) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={styles.virtualRow}
+      style={{ '--virtual-row-deviation': `${virtualRow.start}px` }}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+});

package/src/helperComponents/Rows/styles.module.scss

@@ -127,3 +127,11 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
   top: 0;
   border: none;
 }
+
+.virtualRow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(var(--virtual-row-deviation));
+}

package/src/types.ts

@@ -8,6 +8,7 @@ import {
   RowSelectionState,
   SortingState,
 } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
 
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
@@ -65,6 +66,8 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
 
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
 
+export type RowVirtualizer = Virtualizer<Element, Element> | null;
+
 export type {
   RowActionsColumnDefProps,
   StatusColumnDefinitionProps,