@snack-uikit/table 0.29.0 → 0.31.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.31.0 (2025-02-27)
+
+
+### Features
+
+* **FF-6236:** infinite scroll in table ([09afb22](https://github.com/cloud-ru-tech/snack-uikit/commit/09afb2234211802c86722e36e17b9161f912b9e8))
+
+
+
+
+
+# 0.30.0 (2025-02-26)
+
+
+### Features
+
+* **PDS-1487:** freeze columns size on resize ([f5f5694](https://github.com/cloud-ru-tech/snack-uikit/commit/f5f56948a5e0ba42f071a66e2de225465f67e980))
+
+
+
+
+
 # 0.29.0 (2025-02-25)
 
 

package/README.md

@@ -120,9 +120,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
-| pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
-| autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
-| pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
@@ -140,15 +137,19 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
 | exportSettings | `{ fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; }` | - | Настройки экспорта в тулбаре |
-| suppressPagination | `boolean` | - | Отключение пагинации |
 | manualSorting | `boolean` | - |  |
-| manualPagination | `boolean` | - |  |
 | manualFiltering | `boolean` | - |  |
 | getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
+| autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
+| pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
+| infiniteLoading | `boolean` | - | Режим работы "бесконечной" загрузки |
+| suppressPagination | `boolean` | - | Отключение пагинации |
+| manualPagination | `boolean` | - |  |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом
 ### Props
@@ -176,6 +177,9 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
+| onRefresh | `() => void` | - | Колбек обновления данных |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
+| bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
 | keepPinnedRows | `boolean` | false | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
 | copyPinnedRows | `boolean` | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
@@ -183,11 +187,9 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; }` | - | Параметр отвечает за общие настройки раскрывающихся строк |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
-| autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
-| onRefresh | `() => void` | - | Колбек обновления данных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
 | columnFilters | `ChipChoiceRowProps<TFilters>` | - | Фильтры |
 | dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
@@ -197,19 +199,19 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
 | suppressSearch | `boolean` | - | Отключение поиска |
-| bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
-| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
 | exportSettings | `{ fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; }` | - | Настройки экспорта в тулбаре |
-| suppressPagination | `boolean` | - | Отключение пагинации |
 | manualSorting | `boolean` | true |  |
-| manualPagination | `boolean` | true |  |
 | manualFiltering | `boolean` | true |  |
 | getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
+| suppressPagination | `boolean` | - | Отключение пагинации |
+| manualPagination | `boolean` | true |  |
+| infiniteLoading | `never` | - |  |
 | items | `TData[]` | - | Данные для отрисовки |
 | total | `number` | 10 | Общее кол-во строк |
 | limit | `number` | 10 | Кол-во строк на страницу |

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

@@ -1,7 +1,7 @@
 import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): 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

@@ -58,6 +58,7 @@ function Table(_a) {
       pageSize = constants_1.DEFAULT_PAGE_SIZE,
       pageCount,
       loading = false,
+      infiniteLoading = false,
       outline = false,
       moreActions,
       exportSettings,
@@ -71,7 +72,7 @@ function Table(_a) {
       toolbarAfter,
       suppressPagination = false,
       manualSorting = false,
-      manualPagination = false,
+      manualPagination: manualPaginationProp = false,
       manualFiltering = false,
       autoResetPageIndex = false,
       scrollRef,
@@ -82,7 +83,7 @@ function Table(_a) {
       expanding,
       bulkActions: bulkActionsProp
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -104,6 +105,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 manualPagination = infiniteLoading || manualPaginationProp;
   const tableColumns = (0, react_1.useMemo)(() => {
     let cols = columnDefinitions;
     if (enableSelection && !expanding) {
@@ -229,10 +231,17 @@ 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 columnSizes = (0, react_1.useMemo)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = {};
+    const vars = {};
+    const realSizes = {};
+    const resizedColumnIndex = headers.findIndex(_ref => {
+      let {
+        column
+      } = _ref;
+      return column.getIsResizing();
+    });
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -241,8 +250,8 @@ function Table(_a) {
       } = (0, utils_3.getColumnStyleVars)(header.id);
       const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
       if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -261,12 +270,9 @@ function Table(_a) {
         if (header.column.getCanResize()) {
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id);
-            table.setColumnSizing(old => Object.assign(Object.assign({}, old), {
-              [header.id]: realSize
-            }));
+          if (currentSize !== colDefSize || i < resizedColumnIndex && prevSize === '100%') {
+            const realSize = prevSize === '100%' ? (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -277,11 +283,14 @@ function Table(_a) {
             size
           });
         }
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
-    return colSizes;
+    return {
+      vars,
+      realSizes
+    };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -291,8 +300,11 @@ function Table(_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
   (0, react_1.useEffect)(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => Object.assign(Object.assign({}, old), columnSizes.realSizes));
+    }
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
   const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -374,12 +386,12 @@ function Table(_a) {
           ref: scrollContainerRef,
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: styles_module_scss_1.default.tableContent,
-            style: columnSizeVars,
+            style: columnSizes.vars,
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
               value: {
                 table
               },
-              children: loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+              children: (!infiniteLoading || !data.length) && 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, {
                   row: row
@@ -394,7 +406,12 @@ function Table(_a) {
                 }) : 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, {
+                }, row.id)), data.length > 0 && infiniteLoading && loading && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
+                  loading: true,
+                  children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                    row: row
+                  }, row.id))
+                }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
                   emptyStates: emptyStates,
                   dataError: dataError,
                   dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
@@ -407,7 +424,7 @@ function Table(_a) {
             ref: scrollRef
           })]
         })
-      }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
+      }), !infiniteLoading && !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
         table: table,
         options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
         optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,

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

@@ -12,12 +12,15 @@ function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
     const cell = document.querySelector(`[data-header-id="${id}"]`);
     const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-    if (cell && resizeHandler) {
+    if (cell) {
       const {
         width
       } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+      return width;
     }
   }
   return 0;

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

@@ -9,7 +9,7 @@ import { ColumnDefinition } from '../types';
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
-export type TableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
+type BaseTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
@@ -68,25 +68,6 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
     enableFuzzySearch?: boolean;
     /** Максимальное кол-во строк на страницу @default 10 */
     pageSize?: number;
-    /** Параметры отвечают за пагинацию в таблице <br>
-     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
-     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
-     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
-     * <strong>onChange</strong>: Колбэк на изменение пагинации
-     *  */
-    pagination?: {
-        state?: PaginationState;
-        options?: number[];
-        optionsLabel?: string;
-        onChange?(state: PaginationState): void;
-        optionsRender?(value: string | number, idx: number): string | number;
-    };
-    /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
-     * (e.g фильтры, сортировки, и т.д)
-     * */
-    autoResetPageIndex?: boolean;
-    /** Кол-во страниц (используется для внешнего управления) */
-    pageCount?: number;
     /** Колбэк клика по строке */
     onRowClick?: RowClickHandler<TData>;
     /** CSS-класс */
@@ -121,10 +102,7 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
     toolbarAfter?: ReactNode;
     /** Настройки экспорта в тулбаре */
     exportSettings?: ExportButtonProps<TData>['settings'];
-    /** Отключение пагинации */
-    suppressPagination?: boolean;
     manualSorting?: boolean;
-    manualPagination?: boolean;
     manualFiltering?: boolean;
     /** Дополнительная функция используется для получения уникального идентификатора для любой заданной строки */
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
@@ -143,7 +121,43 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
         resize?: boolean;
     };
 }>;
-export type ServerTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Omit<TableProps<TData, TFilters>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
+export type InfiniteTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {
+    pagination?: never;
+    autoResetPageIndex?: never;
+    pageCount?: never;
+    /** Режим работы "бесконечной" загрузки */
+    infiniteLoading?: boolean;
+    /** Отключение пагинации */
+    suppressPagination?: never;
+    manualPagination?: never;
+};
+export type ClientTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {
+    /** Параметры отвечают за пагинацию в таблице <br>
+     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
+     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
+     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
+     * <strong>onChange</strong>: Колбэк на изменение пагинации
+     *  */
+    pagination?: {
+        state?: PaginationState;
+        options?: number[];
+        optionsLabel?: string;
+        onChange?(state: PaginationState): void;
+        optionsRender?(value: string | number, idx: number): string | number;
+    };
+    /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
+     * (e.g фильтры, сортировки, и т.д)
+     * */
+    autoResetPageIndex?: boolean;
+    /** Кол-во страниц (используется для внешнего управления) */
+    pageCount?: number;
+    /** Отключение пагинации */
+    suppressPagination?: boolean;
+    manualPagination?: boolean;
+    infiniteLoading?: never;
+};
+export type TableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = InfiniteTableProps<TData, TFilters> | ClientTableProps<TData, TFilters>;
+export type ServerTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Omit<ClientTableProps<TData, TFilters>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */
     items?: TData[];
     /**

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

@@ -1,7 +1,7 @@
 import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): 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

@@ -32,7 +32,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSiz
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -42,6 +42,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 manualPagination = infiniteLoading || manualPaginationProp;
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
         if (enableSelection && !expanding) {
@@ -155,17 +156,19 @@ 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 columnSizes = useMemo(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = {};
+        const vars = {};
+        const realSizes = {};
+        const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
             if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-                colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-                colSizes[flexKey] = '100%';
+                vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+                vars[flexKey] = '100%';
             }
             else {
                 const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
@@ -182,21 +185,20 @@ export function Table(_a) {
                 if (header.column.getCanResize()) {
                     const currentSize = header.getSize();
                     const colDefSize = header.column.columnDef.size;
-                    size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-                    if (prevSize === '100%' && currentSize !== colDefSize) {
-                        const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-                        table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
+                    if (currentSize !== colDefSize || (i < resizedColumnIndex && prevSize === '100%')) {
+                        const realSize = prevSize === '100%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+                        realSizes[header.id] = realSize;
                         size = `${realSize}px`;
                     }
                 }
                 if (isResizeSavedToStore) {
                     saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
                 }
-                colSizes[sizeKey] = size;
-                colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+                vars[sizeKey] = size;
+                vars[flexKey] = size === '100%' ? 'unset' : '0';
             }
         }
-        return colSizes;
+        return { vars, realSizes };
         /*
           effect must be called only on columnSizingInfo.isResizingColumn changes
           to reduce unnecessary recalculations
@@ -208,8 +210,11 @@ export function Table(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
     useEffect(() => {
-        columnSizeVarsRef.current = columnSizeVars;
-    }, [columnSizeVars]);
+        if (Object.keys(columnSizes.realSizes).length) {
+            table.setColumnSizing(old => (Object.assign(Object.assign({}, old), columnSizes.realSizes)));
+        }
+        columnSizeVarsRef.current = columnSizes.vars;
+    }, [columnSizes, table]);
     const tableRows = table.getRowModel().rows;
     const tableCenterRows = table.getCenterRows();
     const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -245,7 +250,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'),
-                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _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 }))] })) }));
+                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _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: columnSizes.vars, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && 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))), data.length > 0 && infiniteLoading && loading && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row }, 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 })] }) }), !infiniteLoading && !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/utils.js

@@ -3,10 +3,13 @@ export function getCurrentlyConfiguredHeaderWidth(id) {
     if (isBrowser()) {
         const cell = document.querySelector(`[data-header-id="${id}"]`);
         const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-        if (cell && resizeHandler) {
+        if (cell) {
             const { width } = cell.getBoundingClientRect();
-            const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-            return width + offset;
+            if (resizeHandler) {
+                const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+                return width + offset;
+            }
+            return width;
         }
     }
     return 0;

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

@@ -9,7 +9,7 @@ import { ColumnDefinition } from '../types';
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
-export type TableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
+type BaseTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
@@ -68,25 +68,6 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
     enableFuzzySearch?: boolean;
     /** Максимальное кол-во строк на страницу @default 10 */
     pageSize?: number;
-    /** Параметры отвечают за пагинацию в таблице <br>
-     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
-     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
-     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
-     * <strong>onChange</strong>: Колбэк на изменение пагинации
-     *  */
-    pagination?: {
-        state?: PaginationState;
-        options?: number[];
-        optionsLabel?: string;
-        onChange?(state: PaginationState): void;
-        optionsRender?(value: string | number, idx: number): string | number;
-    };
-    /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
-     * (e.g фильтры, сортировки, и т.д)
-     * */
-    autoResetPageIndex?: boolean;
-    /** Кол-во страниц (используется для внешнего управления) */
-    pageCount?: number;
     /** Колбэк клика по строке */
     onRowClick?: RowClickHandler<TData>;
     /** CSS-класс */
@@ -121,10 +102,7 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
     toolbarAfter?: ReactNode;
     /** Настройки экспорта в тулбаре */
     exportSettings?: ExportButtonProps<TData>['settings'];
-    /** Отключение пагинации */
-    suppressPagination?: boolean;
     manualSorting?: boolean;
-    manualPagination?: boolean;
     manualFiltering?: boolean;
     /** Дополнительная функция используется для получения уникального идентификатора для любой заданной строки */
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
@@ -143,7 +121,43 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
         resize?: boolean;
     };
 }>;
-export type ServerTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Omit<TableProps<TData, TFilters>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
+export type InfiniteTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {
+    pagination?: never;
+    autoResetPageIndex?: never;
+    pageCount?: never;
+    /** Режим работы "бесконечной" загрузки */
+    infiniteLoading?: boolean;
+    /** Отключение пагинации */
+    suppressPagination?: never;
+    manualPagination?: never;
+};
+export type ClientTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {
+    /** Параметры отвечают за пагинацию в таблице <br>
+     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
+     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
+     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
+     * <strong>onChange</strong>: Колбэк на изменение пагинации
+     *  */
+    pagination?: {
+        state?: PaginationState;
+        options?: number[];
+        optionsLabel?: string;
+        onChange?(state: PaginationState): void;
+        optionsRender?(value: string | number, idx: number): string | number;
+    };
+    /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
+     * (e.g фильтры, сортировки, и т.д)
+     * */
+    autoResetPageIndex?: boolean;
+    /** Кол-во страниц (используется для внешнего управления) */
+    pageCount?: number;
+    /** Отключение пагинации */
+    suppressPagination?: boolean;
+    manualPagination?: boolean;
+    infiniteLoading?: never;
+};
+export type TableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = InfiniteTableProps<TData, TFilters> | ClientTableProps<TData, TFilters>;
+export type ServerTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Omit<ClientTableProps<TData, TFilters>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */
     items?: TData[];
     /**

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "59426d0dd21ec9b22909d8350ca1d988665b4215"
+  "gitHead": "a430ef0cef6ce5141115be672073fca746f2d7fa"
 }

package/src/components/Table/Table.tsx

@@ -74,6 +74,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   pageSize = DEFAULT_PAGE_SIZE,
   pageCount,
   loading = false,
+  infiniteLoading = false,
   outline = false,
   moreActions,
   exportSettings,
@@ -87,7 +88,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   toolbarAfter,
   suppressPagination = false,
   manualSorting = false,
-  manualPagination = false,
+  manualPagination: manualPaginationProp = false,
   manualFiltering = false,
   autoResetPageIndex = false,
   scrollRef,
@@ -119,6 +120,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   );
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
+  const manualPagination = infiniteLoading || manualPaginationProp;
+
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = columnDefinitions;
     if (enableSelection && !expanding) {
@@ -256,9 +259,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
 
-  const columnSizeVars = useMemo(() => {
+  const columnSizes = useMemo(() => {
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes: Record<string, string> = {};
+    const vars: Record<string, string> = {};
+    const realSizes: Record<string, number> = {};
+    const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
@@ -267,8 +272,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
 
       if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !originalColDef?.enableSorting) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef?.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -289,12 +294,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
 
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-            table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
-
+          if (currentSize !== colDefSize || (i < resizedColumnIndex && prevSize === '100%')) {
+            const realSize = prevSize === '100%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -303,12 +305,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
         }
 
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
 
-    return colSizes;
+    return { vars, realSizes };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -321,8 +323,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
 
   useEffect(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => ({ ...old, ...columnSizes.realSizes }));
+    }
+
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
 
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
@@ -413,9 +419,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
           <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
-            <div className={styles.tableContent} style={columnSizeVars}>
+            <div className={styles.tableContent} style={columnSizes.vars}>
               <TableContext.Provider value={{ table }}>
-                {loading ? (
+                {(!infiniteLoading || !data.length) && loading ? (
                   <SkeletonContextProvider loading>
                     <HeaderRow />
                     {loadingTableRows.map(row => (
@@ -438,6 +444,14 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                       <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
                     ))}
 
+                    {data.length > 0 && infiniteLoading && loading && (
+                      <SkeletonContextProvider loading>
+                        {loadingTableRows.slice(0, 3).map(row => (
+                          <BodyRow key={row.id} row={row} />
+                        ))}
+                      </SkeletonContextProvider>
+                    )}
+
                     <TableEmptyState
                       emptyStates={emptyStates}
                       dataError={dataError}
@@ -452,7 +466,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           </Scroll>
         </div>
 
-        {!suppressPagination && (
+        {!infiniteLoading && !suppressPagination && (
           <TablePagination
             table={table}
             options={paginationProp?.options}

package/src/components/Table/utils.ts

@@ -7,10 +7,15 @@ export function getCurrentlyConfiguredHeaderWidth(id: string): number {
       '[data-test-id="table__header-cell-resize-handle-moving-part"]',
     );
 
-    if (cell && resizeHandler) {
+    if (cell) {
       const { width } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+
+      return width;
     }
   }
 

package/src/components/types.ts

@@ -20,10 +20,7 @@ type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkAct
   onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
 
-export type TableProps<
-  TData extends object,
-  TFilters extends FiltersState = Record<string, unknown>,
-> = WithSupportProps<{
+type BaseTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
   /** Данные для отрисовки */
   data: TData[];
   /** Определение внешнего вида и функционала колонок */
@@ -86,28 +83,6 @@ export type TableProps<
   /** Максимальное кол-во строк на страницу @default 10 */
   pageSize?: number;
 
-  /** Параметры отвечают за пагинацию в таблице <br>
-   * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
-   * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
-   * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
-   * <strong>onChange</strong>: Колбэк на изменение пагинации
-   *  */
-  pagination?: {
-    state?: PaginationState;
-    options?: number[];
-    optionsLabel?: string;
-    onChange?(state: PaginationState): void;
-    optionsRender?(value: string | number, idx: number): string | number;
-  };
-
-  /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
-   * (e.g фильтры, сортировки, и т.д)
-   * */
-  autoResetPageIndex?: boolean;
-
-  /** Кол-во страниц (используется для внешнего управления) */
-  pageCount?: number;
-
   /** Колбэк клика по строке */
   onRowClick?: RowClickHandler<TData>;
   /** CSS-класс */
@@ -150,12 +125,8 @@ export type TableProps<
   /** Настройки экспорта в тулбаре */
   exportSettings?: ExportButtonProps<TData>['settings'];
 
-  /** Отключение пагинации */
-  suppressPagination?: boolean;
-
   // Вынести это на пропсы
   manualSorting?: boolean;
-  manualPagination?: boolean;
   manualFiltering?: boolean;
 
   /** Дополнительная функция используется для получения уникального идентификатора для любой заданной строки */
@@ -178,8 +149,63 @@ export type TableProps<
   };
 }>;
 
+export type InfiniteTableProps<
+  TData extends object,
+  TFilters extends FiltersState = Record<string, unknown>,
+> = BaseTableProps<TData, TFilters> & {
+  pagination?: never;
+  autoResetPageIndex?: never;
+  pageCount?: never;
+
+  /** Режим работы "бесконечной" загрузки */
+  infiniteLoading?: boolean;
+
+  /** Отключение пагинации */
+  suppressPagination?: never;
+
+  manualPagination?: never;
+};
+
+export type ClientTableProps<
+  TData extends object,
+  TFilters extends FiltersState = Record<string, unknown>,
+> = BaseTableProps<TData, TFilters> & {
+  /** Параметры отвечают за пагинацию в таблице <br>
+   * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
+   * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
+   * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
+   * <strong>onChange</strong>: Колбэк на изменение пагинации
+   *  */
+  pagination?: {
+    state?: PaginationState;
+    options?: number[];
+    optionsLabel?: string;
+    onChange?(state: PaginationState): void;
+    optionsRender?(value: string | number, idx: number): string | number;
+  };
+
+  /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
+   * (e.g фильтры, сортировки, и т.д)
+   * */
+  autoResetPageIndex?: boolean;
+
+  /** Кол-во страниц (используется для внешнего управления) */
+  pageCount?: number;
+
+  /** Отключение пагинации */
+  suppressPagination?: boolean;
+
+  manualPagination?: boolean;
+
+  infiniteLoading?: never;
+};
+
+export type TableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> =
+  | InfiniteTableProps<TData, TFilters>
+  | ClientTableProps<TData, TFilters>;
+
 export type ServerTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Omit<
-  TableProps<TData, TFilters>,
+  ClientTableProps<TData, TFilters>,
   'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'
 > & {
   /** Данные для отрисовки */

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -58,7 +58,7 @@
     left: 0;
     transform: translateX(-50%);
 
-    width: calc(100% + styles-tokens-table.$dimension-4m);
+    width: calc(100% + #{styles-tokens-table.$dimension-4m});
     height: 100%;
   }
 }
@@ -86,7 +86,7 @@
     left: 50%;
     transform: translateX(-50%);
 
-    width: calc(100% - styles-tokens-table.$space-table-head-separator-padding * 2);
+    width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding} * 2);
     height: styles-tokens-table.$border-width-table;
 
     background-color: styles-tokens-table.$sys-neutral-decor-default;
@@ -106,7 +106,7 @@
     &::after {
       left: 0;
       transform: none;
-      width: calc(100% - styles-tokens-table.$space-table-head-separator-padding);
+      width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding});
     }
   }
 
@@ -136,7 +136,7 @@
       }
 
       .tableHeaderResizeIndicator {
-        right: calc(styles-tokens-table.$dimension-1m / 2);
+        right: calc(#{styles-tokens-table.$dimension-1m} / 2);
       }
     }
   }

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

@@ -42,8 +42,8 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     content: '';
 
     position: absolute;
-    top: calc(0px - styles-tokens-table.$border-width-table);
-    bottom: calc(0px - styles-tokens-table.$border-width-table);
+    top: calc(0px - #{styles-tokens-table.$border-width-table});
+    bottom: calc(0px - #{styles-tokens-table.$border-width-table});
 
     box-sizing: border-box;
     width: styles-tokens-table.$border-width-table;