@snack-uikit/table 0.19.5 → 0.19.6-preview-610aeb53.0

package/README.md

@@ -111,14 +111,16 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
 | data* | `TData[]` | - | Данные для отрисовки |
-| keepPinnedRows | `boolean` | - | Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы |
-| enableSelectPinned | `boolean` | - | Параметр овтечает за чекбокс выбора закрепленных строк |
+| keepPinnedRows | `boolean` | - | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
+| copyPinnedRows | `boolean` | - | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
+| enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | 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>: Колбэк на выбор строк |
 | 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; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
+| 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-класс |
@@ -171,11 +173,13 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
 | loading | `boolean` | - | Состояние загрузки |
-| keepPinnedRows | `boolean` | - | Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы |
-| enableSelectPinned | `boolean` | - | Параметр овтечает за чекбокс выбора закрепленных строк |
+| keepPinnedRows | `boolean` | false | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
+| copyPinnedRows | `boolean` | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
+| enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | 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-класс |
 | onRefresh | `() => void` | - | Колбек обновления данных |

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

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

package/dist/components/Table/Table.js

@@ -30,7 +30,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -93,13 +93,17 @@ export function Table(_a) {
         onSortingChange,
         getSortedRowModel: getSortedRowModel(),
         onPaginationChange,
-        autoResetPageIndex: false,
+        autoResetPageIndex,
         getPaginationRowModel: getPaginationRowModel(),
         getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onEnd',
         keepPinnedRows,
     });
-    const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
+    const { loadingTable } = useLoadingTable({
+        pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
+        columnDefinitions: tableColumns,
+        columnPinning,
+    });
     const handleOnRefresh = useCallback(() => {
         table.resetRowSelection();
         onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
@@ -113,15 +117,22 @@ export function Table(_a) {
         }
     }, [loading, onDelete, table]);
     const handleOnCheck = useCallback(() => {
-        if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
-            table.toggleAllPageRowsSelected();
+        if (!loading && !enableSelectPinned && table.getTopRows().length) {
+            const centerRows = table.getCenterRows();
+            const isSomeRowsSelected = table.getIsSomePageRowsSelected();
+            const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
+            if (isAllCenterRowsSelected) {
+                table.resetRowSelection();
+                return;
+            }
+            centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
             return;
         }
-        if (!loading && table.getIsSomePageRowsSelected()) {
-            table.resetRowSelection();
+        if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
+            table.toggleAllPageRowsSelected();
             return;
         }
-    }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
+    }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
     const columnSizeVars = useMemo(() => {
@@ -184,6 +195,7 @@ export function Table(_a) {
         maximumAvailablePage: pageCount || data.length / pagination.pageSize,
         pagination,
         onPaginationChange,
+        autoResetPageIndex,
     });
     return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: {
                 '--page-size': cssPageSize,
@@ -192,7 +204,7 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportFileName ? (_jsxs(_Fragment, { children: [toolbarAfter, exportFileName && (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableCenterRows.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, tableCenterRows.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 })] })) }) }), _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 }))] })) }));
+                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportFileName ? (_jsxs(_Fragment, { children: [toolbarAfter, exportFileName && (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableCenterRows.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, (copyPinnedRows ? tableRows : tableCenterRows).map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/components/Table/hooks/usePageReset.d.ts

@@ -4,6 +4,7 @@ type UsePageResetProps = {
     maximumAvailablePage: number;
     pagination: PaginationState;
     onPaginationChange(state: PaginationState): void;
+    autoResetPageIndex: boolean;
 };
-export declare function usePageReset({ manualPagination, pagination, maximumAvailablePage, onPaginationChange, }: UsePageResetProps): void;
+export declare function usePageReset({ manualPagination, pagination, maximumAvailablePage, onPaginationChange, autoResetPageIndex, }: UsePageResetProps): void;
 export {};

package/dist/components/Table/hooks/usePageReset.js

@@ -1,9 +1,11 @@
 import { useEffect } from 'react';
-export function usePageReset({ manualPagination, pagination, maximumAvailablePage, onPaginationChange, }) {
+export function usePageReset({ manualPagination, pagination, maximumAvailablePage, onPaginationChange, autoResetPageIndex, }) {
     useEffect(() => {
+        if (autoResetPageIndex)
+            return;
         const { pageIndex } = pagination;
         if (!manualPagination && pageIndex > 0 && pageIndex >= maximumAvailablePage) {
             onPaginationChange(Object.assign(Object.assign({}, pagination), { pageIndex: 0 }));
         }
-    }, [maximumAvailablePage, manualPagination, onPaginationChange, pagination]);
+    }, [maximumAvailablePage, manualPagination, onPaginationChange, pagination, autoResetPageIndex]);
 }

package/dist/components/types.d.ts

@@ -9,9 +9,11 @@ export type TableProps<TData extends object> = WithSupportProps<{
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
     columnDefinitions: ColumnDefinition<TData>[];
-    /** Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы */
+    /** Параметр отвечает за отображение закрепленных строк на всех страницах таблицы @default false*/
     keepPinnedRows?: boolean;
-    /** Параметр овтечает за чекбокс выбора закрепленных строк */
+    /** Параметр отвечает за сохранение закрепленных строк в теле таблицы @default false*/
+    copyPinnedRows?: boolean;
+    /** Параметр отвечает за чекбокс выбора закрепленных строк */
     enableSelectPinned?: boolean;
     /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
      *  <strong>initialState</strong>: Начальное состояние сортировки <br>
@@ -66,7 +68,12 @@ export type TableProps<TData extends object> = WithSupportProps<{
         options?: number[];
         optionsLabel?: string;
         onChange?(state: PaginationState): void;
+        optionsRender?(value: string | number, idx: number): string | number;
     };
+    /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
+     * (e.g фильтры, сортировки, и т.д)
+     * */
+    autoResetPageIndex?: boolean;
     /** Кол-во страниц (используется для внешнего управления) */
     pageCount?: number;
     /** Колбэк клика по строке */

package/dist/helperComponents/TablePagination/TablePagination.d.ts

@@ -3,6 +3,7 @@ export type TablePaginationProps<TData> = {
     table: Table<TData>;
     options?: number[];
     optionsLabel?: string;
+    optionsRender?(value: number, idx: number): string | number;
     pageCount?: number;
 };
-export declare function TablePagination<TData>({ table, options: optionsProp, optionsLabel: optionsLabelProp, }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+export declare function TablePagination<TData>({ table, options: optionsProp, optionsLabel: optionsLabelProp, optionsRender, }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/TablePagination/TablePagination.js

@@ -4,7 +4,7 @@ import { ChipChoice } from '@snack-uikit/chips';
 import { useLocale } from '@snack-uikit/locale';
 import { Pagination } from '@snack-uikit/pagination';
 import styles from './styles.module.css';
-export function TablePagination({ table, options: optionsProp, optionsLabel: optionsLabelProp, }) {
+export function TablePagination({ table, options: optionsProp, optionsLabel: optionsLabelProp, optionsRender, }) {
     const { t } = useLocale('Table');
     const optionsLabel = optionsLabelProp !== null && optionsLabelProp !== void 0 ? optionsLabelProp : t('rowsOptionsLabel');
     const handlePaginationOnChange = useCallback((pageIndex) => {
@@ -13,7 +13,10 @@ export function TablePagination({ table, options: optionsProp, optionsLabel: opt
     const handleRowsVolumeOnChange = useCallback((value) => {
         table.setPageSize(Number(value));
     }, [table]);
-    const options = useMemo(() => optionsProp === null || optionsProp === void 0 ? void 0 : optionsProp.sort((a, b) => a - b).map(value => ({ label: String(value), value: String(value) })), [optionsProp]);
+    const options = useMemo(() => optionsProp === null || optionsProp === void 0 ? void 0 : optionsProp.sort((a, b) => a - b).map((value, idx) => ({
+        label: String(optionsRender ? optionsRender(value, idx) : value),
+        value: String(value),
+    })), [optionsProp, optionsRender]);
     const tablePaginationState = table.getState().pagination;
     if (table.getPageCount() <= 1 && !options) {
         return null;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.19.5",
+  "version": "0.19.6-preview-610aeb53.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
+  "gitHead": "e904a32e742677e77a9f66cfb9d6fd5fbd82968a"
 }

package/src/components/Table/Table.tsx

@@ -51,6 +51,7 @@ export function Table<TData extends object>({
   },
   columnDefinitions,
   keepPinnedRows = false,
+  copyPinnedRows = false,
   enableSelectPinned = false,
   rowSelection: rowSelectionProp,
   search,
@@ -79,6 +80,7 @@ export function Table<TData extends object>({
   manualSorting = false,
   manualPagination = false,
   manualFiltering = false,
+  autoResetPageIndex = false,
   scrollRef,
   scrollContainerRef,
   getRowId,
@@ -164,14 +166,18 @@ export function Table<TData extends object>({
     onSortingChange,
     getSortedRowModel: getSortedRowModel(),
     onPaginationChange,
-    autoResetPageIndex: false,
+    autoResetPageIndex,
     getPaginationRowModel: getPaginationRowModel(),
     getCoreRowModel: getCoreRowModel(),
     columnResizeMode: 'onEnd',
     keepPinnedRows,
   });
 
-  const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
+  const { loadingTable } = useLoadingTable({
+    pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
+    columnDefinitions: tableColumns,
+    columnPinning,
+  });
 
   const handleOnRefresh = useCallback(() => {
     table.resetRowSelection();
@@ -189,16 +195,25 @@ export function Table<TData extends object>({
   }, [loading, onDelete, table]);
 
   const handleOnCheck = useCallback(() => {
-    if (!loading && rowSelectionProp?.multiRow) {
-      table.toggleAllPageRowsSelected();
+    if (!loading && !enableSelectPinned && table.getTopRows().length) {
+      const centerRows = table.getCenterRows();
+      const isSomeRowsSelected = table.getIsSomePageRowsSelected();
+      const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
+
+      if (isAllCenterRowsSelected) {
+        table.resetRowSelection();
+        return;
+      }
+
+      centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
       return;
     }
 
-    if (!loading && table.getIsSomePageRowsSelected()) {
-      table.resetRowSelection();
+    if (!loading && rowSelectionProp?.multiRow) {
+      table.toggleAllPageRowsSelected();
       return;
     }
-  }, [loading, rowSelectionProp?.multiRow, table]);
+  }, [loading, rowSelectionProp?.multiRow, table, enableSelectPinned]);
 
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
@@ -277,6 +292,7 @@ export function Table<TData extends object>({
     maximumAvailablePage: pageCount || data.length / pagination.pageSize,
     pagination,
     onPaginationChange,
+    autoResetPageIndex,
   });
 
   return (
@@ -345,7 +361,7 @@ export function Table<TData extends object>({
                       </div>
                     ) : null}
 
-                    {tableCenterRows.map(row => (
+                    {(copyPinnedRows ? tableRows : tableCenterRows).map(row => (
                       <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
                     ))}
 
@@ -353,7 +369,7 @@ export function Table<TData extends object>({
                       emptyStates={emptyStates}
                       dataError={dataError}
                       dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
-                      tableRowsLength={tableRows.length}
+                      tableRowsLength={tableRows.length + filteredTopRows.length}
                     />
                   </>
                 )}
@@ -369,6 +385,7 @@ export function Table<TData extends object>({
             options={paginationProp?.options}
             optionsLabel={paginationProp?.optionsLabel}
             pageCount={pageCount}
+            optionsRender={paginationProp?.optionsRender}
           />
         )}
       </div>

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

@@ -6,6 +6,7 @@ type UsePageResetProps = {
   maximumAvailablePage: number;
   pagination: PaginationState;
   onPaginationChange(state: PaginationState): void;
+  autoResetPageIndex: boolean;
 };
 
 export function usePageReset({
@@ -13,12 +14,15 @@ export function usePageReset({
   pagination,
   maximumAvailablePage,
   onPaginationChange,
+  autoResetPageIndex,
 }: UsePageResetProps) {
   useEffect(() => {
+    if (autoResetPageIndex) return;
+
     const { pageIndex } = pagination;
 
     if (!manualPagination && pageIndex > 0 && pageIndex >= maximumAvailablePage) {
       onPaginationChange({ ...pagination, pageIndex: 0 });
     }
-  }, [maximumAvailablePage, manualPagination, onPaginationChange, pagination]);
+  }, [maximumAvailablePage, manualPagination, onPaginationChange, pagination, autoResetPageIndex]);
 }

package/src/components/types.ts

@@ -19,9 +19,11 @@ export type TableProps<TData extends object> = WithSupportProps<{
   data: TData[];
   /** Определение внешнего вида и функционала колонок */
   columnDefinitions: ColumnDefinition<TData>[];
-  /** Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы */
+  /** Параметр отвечает за отображение закрепленных строк на всех страницах таблицы @default false*/
   keepPinnedRows?: boolean;
-  /** Параметр овтечает за чекбокс выбора закрепленных строк */
+  /** Параметр отвечает за сохранение закрепленных строк в теле таблицы @default false*/
+  copyPinnedRows?: boolean;
+  /** Параметр отвечает за чекбокс выбора закрепленных строк */
   enableSelectPinned?: boolean;
   /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
    *  <strong>initialState</strong>: Начальное состояние сортировки <br>
@@ -79,8 +81,14 @@ export type TableProps<TData extends object> = WithSupportProps<{
     options?: number[];
     optionsLabel?: string;
     onChange?(state: PaginationState): void;
+    optionsRender?(value: string | number, idx: number): string | number;
   };
 
+  /** Автоматический сброс пагинации к первой странице при изменении данных или состояния
+   * (e.g фильтры, сортировки, и т.д)
+   * */
+  autoResetPageIndex?: boolean;
+
   /** Кол-во страниц (используется для внешнего управления) */
   pageCount?: number;
 

package/src/helperComponents/TablePagination/TablePagination.tsx

@@ -11,6 +11,7 @@ export type TablePaginationProps<TData> = {
   table: Table<TData>;
   options?: number[];
   optionsLabel?: string;
+  optionsRender?(value: number, idx: number): string | number;
   pageCount?: number;
 };
 
@@ -18,6 +19,7 @@ export function TablePagination<TData>({
   table,
   options: optionsProp,
   optionsLabel: optionsLabelProp,
+  optionsRender,
 }: TablePaginationProps<TData>) {
   const { t } = useLocale('Table');
   const optionsLabel = optionsLabelProp ?? t('rowsOptionsLabel');
@@ -37,8 +39,14 @@ export function TablePagination<TData>({
   );
 
   const options = useMemo(
-    () => optionsProp?.sort((a, b) => a - b).map(value => ({ label: String(value), value: String(value) })),
-    [optionsProp],
+    () =>
+      optionsProp
+        ?.sort((a, b) => a - b)
+        .map((value, idx) => ({
+          label: String(optionsRender ? optionsRender(value, idx) : value),
+          value: String(value),
+        })),
+    [optionsProp, optionsRender],
   );
 
   const tablePaginationState = table.getState().pagination;