@snack-uikit/table 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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)
 
 

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) {
@@ -389,7 +391,7 @@ function Table(_a) {
               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
@@ -404,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),
@@ -417,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/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) {
@@ -249,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: columnSizes.vars, 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/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.30.0",
+  "version": "0.31.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "afb93f86dbab6039f4c267a9d0e85350b59053c5"
+  "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) {
@@ -418,7 +421,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
             <div className={styles.tableContent} style={columnSizes.vars}>
               <TableContext.Provider value={{ table }}>
-                {loading ? (
+                {(!infiniteLoading || !data.length) && loading ? (
                   <SkeletonContextProvider loading>
                     <HeaderRow />
                     {loadingTableRows.map(row => (
@@ -441,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}
@@ -455,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/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'
 > & {
   /** Данные для отрисовки */