@snack-uikit/table 0.19.6 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.20.0 (2024-07-10)
+
+
+### Bug Fixes
+
+* **FF-5031:** fix results value view vith non empty filteredTopRows ([49fd328](https://github.com/cloud-ru-tech/snack-uikit/commit/49fd32812bc4a253af8331c649b3dd6b26cde795))
+
+
+### Features
+
+* **FF-5031:** activate autoResetPageIndex option ([9491074](https://github.com/cloud-ru-tech/snack-uikit/commit/9491074d85507a413c7202fe6050488f0de03dd4))
+* **FF-5031:** add pagination.optionsRender; fix loading skeleton count ([0f518f5](https://github.com/cloud-ru-tech/snack-uikit/commit/0f518f592945b53eb2be18fad50f87251c85b902))
+* **FF-5031:** fix pinned rows selection from toolbar checkbox ([caa0633](https://github.com/cloud-ru-tech/snack-uikit/commit/caa063317ee2b98e1b1e7915d1a159f909699ffa))
+
+
+### BREAKING CHANGES
+
+
+* **FF-5031:** expand export settings - add formats and filter settings ([b0a6f5a](https://github.com/cloud-ru-tech/snack-uikit/commit/b0a6f5a3650a68762cf0570c1ca7c36de0f201a2))
+
+
+
+
 ## 0.19.6 (2024-07-09)
 
 ### Only dependencies have been changed

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-класс |
@@ -129,7 +131,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | columnFilters | `ReactNode` | - | Фильтры |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
-| exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
+| exportSettings | `{ fileName: string; format?: Format; filterData?: boolean; }` | - | Настройки экспорта в тулбаре |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
@@ -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` | - | Колбек обновления данных |
@@ -184,7 +188,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | columnFilters | `ReactNode` | - | Фильтры |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
-| exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
+| exportSettings | `{ fileName: string; format?: Format; filterData?: boolean; }` | - | Настройки экспорта в тулбаре |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |

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, exportSettings, 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, exportSettings, 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", "exportSettings", "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(() => {
@@ -173,17 +184,19 @@ export function Table(_a) {
     const filteredTopRows = table.getState().globalFilter
         ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
         : topRows;
+    const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
     const { t } = useLocale('Table');
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const cssPageSize = useMemo(() => {
-        const tempPageSize = !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize;
+        const tempPageSize = (!suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize) + filteredTopRows.length;
         return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
-    }, [pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
+    }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
     usePageReset({
         manualPagination,
         maximumAvailablePage: pageCount || data.length / pagination.pageSize,
         pagination,
         onPaginationChange,
+        autoResetPageIndex,
     });
     return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: {
                 '--page-size': cssPageSize,
@@ -192,7 +205,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 || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/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

@@ -2,16 +2,18 @@ import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectio
 import { ReactNode, RefObject } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { EmptyStateProps, RowClickHandler } from '../helperComponents';
+import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { ColumnDefinition } from '../types';
 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;
     /** Колбэк клика по строке */
@@ -85,8 +92,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
     columnFilters?: ReactNode;
     dataFiltered?: boolean;
     dataError?: boolean;
-    /** Название файла при экспорте CSV/XLSX */
-    exportFileName?: string;
+    /** Настройки экспорта в тулбаре */
+    exportSettings?: ExportButtonProps<TData>['settings'];
     /** Элементы выпадающего списка кнопки с действиями */
     moreActions?: ToolbarProps['moreActions'];
     /** Экран при отстутствии данных */

package/dist/helperComponents/ExportButton/ExportButton.d.ts

@@ -1,10 +1,24 @@
+import { Row } from '@tanstack/react-table';
 import { ColumnDefinition } from '../../types';
-type ExportButtonProps<TData extends object> = {
+type Format = {
+    csv?: boolean;
+    xslx?: boolean;
+};
+export type ExportButtonProps<TData extends object> = {
     /** Данные для отрисовки */
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
     columnDefinitions: ColumnDefinition<TData>[];
-    fileName?: string;
+    settings: {
+        /** Название файла при экспорте */
+        fileName: string;
+        /** Доступные форматы экспорта */
+        format?: Format;
+        /** Настройка фильтрации данных */
+        filterData?: boolean;
+    };
+    topRows: Row<TData>[];
+    centerRows: Row<TData>[];
 };
-export declare function ExportButton<TData extends object>({ fileName, data, columnDefinitions }: ExportButtonProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function ExportButton<TData extends object>({ settings, data, columnDefinitions, topRows, centerRows, }: ExportButtonProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/helperComponents/ExportButton/ExportButton.js

@@ -1,27 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { DownloadSVG } from '@snack-uikit/icons';
 import { Droplist } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 import { exportToCSV, exportToXLSX } from '../../exportTable';
-export function ExportButton({ fileName, data, columnDefinitions }) {
+export function ExportButton({ settings, data, columnDefinitions, topRows, centerRows, }) {
     const [isOpen, setIsOpen] = useState(false);
     const { t } = useLocale('Table');
+    const { fileName, filterData = true } = settings;
+    const format = Object.assign({ csv: true, xslx: true }, settings.format);
+    const filteredData = useMemo(() => {
+        let newData = data;
+        if (filterData) {
+            newData = [...topRows, ...centerRows].map(row => row.original);
+        }
+        return newData;
+    }, [centerRows, data, filterData, topRows]);
     return (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, onOpenChange: setIsOpen, scroll: true, placement: 'bottom-end', items: [
             {
                 content: { option: t('export') + 'CSV' },
                 onClick: () => {
-                    exportToCSV({ fileName, columnDefinitions, data });
+                    exportToCSV({ fileName, columnDefinitions, data: filteredData });
                     setIsOpen(false);
                 },
+                hidden: !format.csv,
             },
             {
                 content: { option: t('export') + 'XLSX' },
                 onClick: () => {
-                    exportToXLSX({ fileName, columnDefinitions, data });
+                    exportToXLSX({ fileName, columnDefinitions, data: filteredData });
                     setIsOpen(false);
                 },
+                hidden: !format.xslx,
             },
         ], children: _jsx(ButtonFunction, { size: 'm', icon: _jsx(DownloadSVG, {}) }) }));
 }

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.6",
+  "version": "0.20.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "680e16bb363296e1b4a0a35ce8efd2b4f23c4ee2"
+  "gitHead": "58701999be0e38e97b7182901945b3657231e58c"
 }

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,
@@ -66,7 +67,7 @@ export function Table<TData extends object>({
   loading = false,
   outline = false,
   moreActions,
-  exportFileName,
+  exportSettings,
   dataFiltered,
   dataError,
   noDataState,
@@ -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();
@@ -262,21 +277,23 @@ export function Table<TData extends object>({
   const filteredTopRows = table.getState().globalFilter
     ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
     : topRows;
+  const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
 
   const { t } = useLocale('Table');
   const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
 
   const cssPageSize = useMemo(() => {
-    const tempPageSize = !suppressPagination ? tablePagination?.pageSize : pageSize;
+    const tempPageSize = (!suppressPagination ? tablePagination?.pageSize : pageSize) + filteredTopRows.length;
 
     return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
-  }, [pageSize, suppressPagination, tablePagination?.pageSize, tableRows.length]);
+  }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination?.pageSize, tableRows.length]);
 
   usePageReset({
     manualPagination,
     maximumAvailablePage: pageCount || data.length / pagination.pageSize,
     pagination,
     onPaginationChange,
+    autoResetPageIndex,
   });
 
   return (
@@ -307,11 +324,17 @@ export function Table<TData extends object>({
               selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
               before={toolbarBefore}
               after={
-                toolbarAfter || exportFileName ? (
+                toolbarAfter || exportSettings ? (
                   <>
                     {toolbarAfter}
-                    {exportFileName && (
-                      <ExportButton fileName={exportFileName} columnDefinitions={columnDefinitions} data={data} />
+                    {exportSettings && (
+                      <ExportButton
+                        settings={exportSettings}
+                        columnDefinitions={columnDefinitions}
+                        data={data}
+                        topRows={filteredTopRows}
+                        centerRows={centerRows}
+                      />
                     )}
                   </>
                 ) : undefined
@@ -336,7 +359,7 @@ export function Table<TData extends object>({
                   </SkeletonContextProvider>
                 ) : (
                   <>
-                    {tableCenterRows.length || filteredTopRows.length ? <HeaderRow /> : null}
+                    {centerRows.length || filteredTopRows.length ? <HeaderRow /> : null}
                     {filteredTopRows.length ? (
                       <div className={styles.topRowWrapper}>
                         {filteredTopRows.map(row => (
@@ -345,7 +368,7 @@ export function Table<TData extends object>({
                       </div>
                     ) : null}
 
-                    {tableCenterRows.map(row => (
+                    {centerRows.map(row => (
                       <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
                     ))}
 
@@ -353,7 +376,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 +392,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

@@ -11,7 +11,7 @@ import { ReactNode, RefObject } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { EmptyStateProps, RowClickHandler } from '../helperComponents';
+import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { ColumnDefinition } from '../types';
 
 export type TableProps<TData extends object> = WithSupportProps<{
@@ -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;
 
@@ -107,8 +115,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
   dataFiltered?: boolean;
   dataError?: boolean;
 
-  /** Название файла при экспорте CSV/XLSX */
-  exportFileName?: string;
+  /** Настройки экспорта в тулбаре */
+  exportSettings?: ExportButtonProps<TData>['settings'];
 
   /** Элементы выпадающего списка кнопки с действиями */
   moreActions?: ToolbarProps['moreActions'];

package/src/helperComponents/ExportButton/ExportButton.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { Row } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { DownloadSVG } from '@snack-uikit/icons';
@@ -8,19 +9,55 @@ import { useLocale } from '@snack-uikit/locale';
 import { exportToCSV, exportToXLSX } from '../../exportTable';
 import { ColumnDefinition } from '../../types';
 
-type ExportButtonProps<TData extends object> = {
+type Format = {
+  csv?: boolean;
+  xslx?: boolean;
+};
+
+export type ExportButtonProps<TData extends object> = {
   /** Данные для отрисовки */
   data: TData[];
   /** Определение внешнего вида и функционала колонок */
   columnDefinitions: ColumnDefinition<TData>[];
 
-  fileName?: string;
+  settings: {
+    /** Название файла при экспорте */
+    fileName: string;
+
+    /** Доступные форматы экспорта */
+    format?: Format;
+
+    /** Настройка фильтрации данных */
+    filterData?: boolean;
+  };
+
+  topRows: Row<TData>[];
+  centerRows: Row<TData>[];
 };
 
-export function ExportButton<TData extends object>({ fileName, data, columnDefinitions }: ExportButtonProps<TData>) {
+export function ExportButton<TData extends object>({
+  settings,
+  data,
+  columnDefinitions,
+  topRows,
+  centerRows,
+}: ExportButtonProps<TData>) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const { t } = useLocale('Table');
 
+  const { fileName, filterData = true } = settings;
+  const format: Format = Object.assign({ csv: true, xslx: true }, settings.format);
+
+  const filteredData = useMemo(() => {
+    let newData = data;
+
+    if (filterData) {
+      newData = [...topRows, ...centerRows].map(row => row.original);
+    }
+
+    return newData;
+  }, [centerRows, data, filterData, topRows]);
+
   return (
     <Droplist
       trigger='clickAndFocusVisible'
@@ -32,16 +69,18 @@ export function ExportButton<TData extends object>({ fileName, data, columnDefin
         {
           content: { option: t('export') + 'CSV' },
           onClick: () => {
-            exportToCSV<TData>({ fileName, columnDefinitions, data });
+            exportToCSV<TData>({ fileName, columnDefinitions, data: filteredData });
             setIsOpen(false);
           },
+          hidden: !format.csv,
         },
         {
           content: { option: t('export') + 'XLSX' },
           onClick: () => {
-            exportToXLSX<TData>({ fileName, columnDefinitions, data });
+            exportToXLSX<TData>({ fileName, columnDefinitions, data: filteredData });
             setIsOpen(false);
           },
+          hidden: !format.xslx,
         },
       ]}
     >

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;