@snack-uikit/table 0.28.5 → 0.28.6-preview-f7ec3fa7.0

package/README.md

@@ -118,6 +118,7 @@ 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>: Колбэк на выбор строк |
 | 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 строки поиска |
+| saveStateSettings | `FilterStateOptions<TFilters>` | - | Настройки для сохранения  состояний таблицы в query params и local storage |
 | 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>: Текст для селектора кол-ва строк на страницу |
@@ -182,6 +183,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | 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>: Колбэк на выбор строк |
+| saveStateSettings | `FilterStateOptions<TFilters>` | - | Настройки для сохранения  состояний таблицы в query params и local storage |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |

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, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, saveStateSettings, 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

@@ -34,6 +34,7 @@ const TreeCell_1 = require("../../helperComponents/Cells/TreeCell");
 const utils_2 = require("../../utils");
 const hooks_1 = require("./hooks");
 const usePageReset_1 = require("./hooks/usePageReset");
+const useSaveTableSettings_1 = require("./hooks/useSaveTableSettings/useSaveTableSettings");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_3 = require("./utils");
 /** Компонент таблицы */
@@ -80,9 +81,10 @@ function Table(_a) {
       enableFuzzySearch,
       savedState,
       expanding,
+      saveStateSettings,
       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", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "saveStateSettings", "bulkActions"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -103,6 +105,25 @@ function Table(_a) {
     state: pagination,
     onStateChange: onPaginationChange
   } = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
+  const {
+    patchedFilter,
+    isSettingsLoaded
+  } = (0, useSaveTableSettings_1.useSaveTableSettings)({
+    pagination: {
+      state: pagination,
+      handler: onPaginationChange
+    },
+    search: {
+      state: globalFilter,
+      handler: onGlobalFilterChange
+    },
+    sorting: {
+      state: sorting,
+      handler: onSortingChange
+    },
+    filters: columnFilters,
+    options: saveStateSettings
+  });
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
   const tableColumns = (0, react_1.useMemo)(() => {
     let cols = columnDefinitions;
@@ -334,7 +355,7 @@ function Table(_a) {
       },
       className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
     }, (0, utils_1.extractSupportProps)(rest), {
-      children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
+      children: [showToolbar && isSettingsLoaded && (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_1.default.header,
         children: (0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, {
           search: suppressSearch ? undefined : {
@@ -361,7 +382,7 @@ function Table(_a) {
             })]
           }) : undefined,
           moreActions: moreActions,
-          filterRow: columnFilters,
+          filterRow: patchedFilter,
           "data-test-id": constants_1.TEST_IDS.toolbar
         })
       }), (0, jsx_runtime_1.jsx)("div", {

package/dist/cjs/components/Table/hooks/useSaveTableSettings/index.d.ts

@@ -0,0 +1 @@
+export * from './useSaveTableSettings';

package/dist/cjs/components/Table/hooks/useSaveTableSettings/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useSaveTableSettings"), exports);

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

@@ -0,0 +1,21 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { Handler } from 'uncontrollable';
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+import { FilterRow } from '@snack-uikit/toolbar/src/components/Toolbar/types';
+import { FilterStateOptions } from '@snack-uikit/utils';
+type State<T> = {
+    state: T;
+    handler: Handler;
+};
+type TableSettings<TFilter extends FiltersState = Record<string, unknown>> = {
+    options?: FilterStateOptions<TFilter>;
+    filters?: ChipChoiceRowProps<TFilter>;
+    pagination: State<PaginationState>;
+    search: State<string>;
+    sorting: State<SortingState>;
+};
+export declare const useSaveTableSettings: <TFilter extends FiltersState = Record<string, unknown>>({ options, filters, pagination: { state: paginationState, handler: paginationHandler }, search: { state: searchState, handler: searchHandler }, sorting: { state: sortingState, handler: sortingHandler }, }: TableSettings<TFilter>) => {
+    patchedFilter: FilterRow<TFilter> | undefined;
+    isSettingsLoaded: boolean;
+};
+export {};

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSaveTableSettings = void 0;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const utils_2 = require("../../../../utils");
+const vallidators_1 = require("./vallidators");
+const useSaveTableSettings = _ref => {
+  let {
+    options,
+    filters,
+    pagination: {
+      state: paginationState,
+      handler: paginationHandler
+    },
+    search: {
+      state: searchState,
+      handler: searchHandler
+    },
+    sorting: {
+      state: sortingState,
+      handler: sortingHandler
+    }
+  } = _ref;
+  const [filter, setFilter] = (0, react_1.useState)(filters === null || filters === void 0 ? void 0 : filters.value);
+  const [isSettingsLoaded, setIsSettingsLoaded] = (0, react_1.useState)(false);
+  (0, react_1.useEffect)(() => {
+    setFilter(filters === null || filters === void 0 ? void 0 : filters.value);
+  }, [filters === null || filters === void 0 ? void 0 : filters.value]);
+  const settings = (0, react_1.useMemo)(() => ({
+    pagination: paginationState,
+    filter,
+    search: searchState,
+    sorting: sortingState
+  }), [paginationState, filter, searchState, sortingState]);
+  const onFilterChange = (0, react_1.useCallback)(value => {
+    (filters === null || filters === void 0 ? void 0 : filters.onChange) && filters.onChange(value);
+    setFilter(value);
+  },
+  // eslint-disable-next-line
+  [filters === null || filters === void 0 ? void 0 : filters.onChange]);
+  const validate = (0, react_1.useCallback)(data => {
+    const isPaginationValid = (0, vallidators_1.validatePaging)(data === null || data === void 0 ? void 0 : data.pagination);
+    const isSortingValid = (0, vallidators_1.validateSorting)(data === null || data === void 0 ? void 0 : data.sorting);
+    const isSearchValid = typeof (data === null || data === void 0 ? void 0 : data.search) === 'string';
+    const isFilterValid = Boolean(options === null || options === void 0 ? void 0 : options.validateData(data === null || data === void 0 ? void 0 : data.filter));
+    return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+  }, [options]);
+  const onInitPage = (0, react_1.useCallback)(data => {
+    if (!data) {
+      setIsSettingsLoaded(true);
+      return;
+    }
+    data.pagination && paginationHandler(data.pagination);
+    data.search && searchHandler(data.search);
+    data.sorting && sortingHandler(data.sorting);
+    data.filter && onFilterChange((0, utils_2.customDateParser)(data.filter));
+    setIsSettingsLoaded(true);
+    // eslint-disable-next-line
+  }, []);
+  const filterStateOptions = (0, react_1.useMemo)(() => options ? Object.assign(Object.assign({}, options), {
+    validateData: validate
+  }) : undefined, [options, validate]);
+  (0, utils_1.useSaveFilterState)({
+    filter: settings,
+    options: filterStateOptions,
+    onLoadFilter: onInitPage
+  });
+  const patchedFilter = (0, react_1.useMemo)(() => filters ? Object.assign(Object.assign({}, filters), {
+    value: filter,
+    onChange: onFilterChange
+  }) : undefined, [filters, onFilterChange, filter]);
+  return {
+    patchedFilter,
+    isSettingsLoaded
+  };
+};
+exports.useSaveTableSettings = useSaveTableSettings;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/vallidators.d.ts

@@ -0,0 +1,3 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+export declare const validatePaging: (value: unknown) => value is PaginationState;
+export declare const validateSorting: (value: unknown) => value is SortingState;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/vallidators.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateSorting = exports.validatePaging = void 0;
+const validatePaging = value => typeof (value === null || value === void 0 ? void 0 : value.pageSize) === 'number' && typeof (value === null || value === void 0 ? void 0 : value.pageIndex) === 'number';
+exports.validatePaging = validatePaging;
+const validateSorting = value => value === null || value === void 0 ? void 0 : value.every(column => typeof (column === null || column === void 0 ? void 0 : column.id) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.desc) === 'boolean');
+exports.validateSorting = validateSorting;

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

@@ -2,7 +2,7 @@ import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectio
 import { ReactNode, RefObject } from 'react';
 import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { FilterStateOptions, WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
@@ -64,6 +64,8 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
         loading?: boolean;
         onChange?(value: string): void;
     };
+    /** Настройки для сохранения  состояний таблицы в query params и local storage*/
+    saveStateSettings?: FilterStateOptions<TFilters>;
     /** Включить нечеткий поиск  */
     enableFuzzySearch?: boolean;
     /** Максимальное кол-во строк на страницу @default 10 */

package/dist/cjs/helperComponents/TablePagination/TablePagination.js

@@ -14,6 +14,7 @@ const react_1 = require("react");
 const chips_1 = require("@snack-uikit/chips");
 const locale_1 = require("@snack-uikit/locale");
 const pagination_1 = require("@snack-uikit/pagination");
+const utils_1 = require("@snack-uikit/utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function TablePagination(_ref) {
   let {
@@ -52,6 +53,7 @@ function TablePagination(_ref) {
       value: String(tablePaginationState.pageSize),
       onChange: handleRowsVolumeOnChange,
       placement: 'top-end',
+      onClick: () => (0, utils_1.isBrowser)() && window.location.reload(),
       options: options,
       label: optionsLabel,
       widthStrategy: 'auto',

package/dist/cjs/utils.d.ts

@@ -1,3 +1,4 @@
 import { FilterFn } from '@tanstack/react-table';
 export declare const fuzzyFilter: FilterFn<any>;
 export declare const preciseFilter: FilterFn<any>;
+export declare const customDateParser: <T>(value: Record<string, unknown>) => T;

package/dist/cjs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.preciseFilter = exports.fuzzyFilter = void 0;
+exports.customDateParser = exports.preciseFilter = exports.fuzzyFilter = void 0;
 const match_sorter_utils_1 = require("@tanstack/match-sorter-utils");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const fuzzyFilter = (row, columnId, value, addMeta) => {
@@ -22,4 +22,16 @@ const preciseFilter = (row, columnId, value, addMeta) => {
   });
   return itemRank.passed;
 };
-exports.preciseFilter = preciseFilter;
+exports.preciseFilter = preciseFilter;
+const isDateString = value => typeof value === 'string' && !isNaN(Number(new Date(value)));
+const customDateParser = value => Object.fromEntries(Object.entries(value).map(_ref => {
+  let [key, value] = _ref;
+  if (isDateString(value)) {
+    return [key, new Date(value)];
+  }
+  if (Array.isArray(value) && value.some(isDateString)) {
+    return [key, value.map(element => isDateString(element) ? new Date(element) : element)];
+  }
+  return [key, value];
+}));
+exports.customDateParser = customDateParser;

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, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, saveStateSettings, 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

@@ -26,13 +26,14 @@ import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { fuzzyFilter } from '../../utils';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
+import { useSaveTableSettings } from './hooks/useSaveTableSettings/useSaveTableSettings';
 import styles from './styles.module.css';
 import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 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, 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, saveStateSettings, 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", "saveStateSettings", "bulkActions"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -41,6 +42,13 @@ export function Table(_a) {
     }), [pageSize]);
     const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
     const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
+    const { patchedFilter, isSettingsLoaded } = useSaveTableSettings({
+        pagination: { state: pagination, handler: onPaginationChange },
+        search: { state: globalFilter, handler: onGlobalFilterChange },
+        sorting: { state: sorting, handler: onSortingChange },
+        filters: columnFilters,
+        options: saveStateSettings,
+    });
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
@@ -237,14 +245,14 @@ export function Table(_a) {
     const showToolbar = !suppressToolbar;
     return (_jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsxs("div", Object.assign({ style: {
                 '--page-size': cssPageSize,
-            }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
+            }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && isSettingsLoaded && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
                             ? undefined
                             : {
                                 value: globalFilter,
                                 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 ? handleOnCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnCheck : 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: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/hooks/useSaveTableSettings/index.d.ts

@@ -0,0 +1 @@
+export * from './useSaveTableSettings';

package/dist/esm/components/Table/hooks/useSaveTableSettings/index.js

@@ -0,0 +1 @@
+export * from './useSaveTableSettings';

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

@@ -0,0 +1,21 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { Handler } from 'uncontrollable';
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+import { FilterRow } from '@snack-uikit/toolbar/src/components/Toolbar/types';
+import { FilterStateOptions } from '@snack-uikit/utils';
+type State<T> = {
+    state: T;
+    handler: Handler;
+};
+type TableSettings<TFilter extends FiltersState = Record<string, unknown>> = {
+    options?: FilterStateOptions<TFilter>;
+    filters?: ChipChoiceRowProps<TFilter>;
+    pagination: State<PaginationState>;
+    search: State<string>;
+    sorting: State<SortingState>;
+};
+export declare const useSaveTableSettings: <TFilter extends FiltersState = Record<string, unknown>>({ options, filters, pagination: { state: paginationState, handler: paginationHandler }, search: { state: searchState, handler: searchHandler }, sorting: { state: sortingState, handler: sortingHandler }, }: TableSettings<TFilter>) => {
+    patchedFilter: FilterRow<TFilter> | undefined;
+    isSettingsLoaded: boolean;
+};
+export {};

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

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSaveFilterState } from '@snack-uikit/utils';
+import { customDateParser } from '../../../../utils';
+import { validatePaging, validateSorting } from './vallidators';
+export const useSaveTableSettings = ({ options, filters, pagination: { state: paginationState, handler: paginationHandler }, search: { state: searchState, handler: searchHandler }, sorting: { state: sortingState, handler: sortingHandler }, }) => {
+    const [filter, setFilter] = useState(filters === null || filters === void 0 ? void 0 : filters.value);
+    const [isSettingsLoaded, setIsSettingsLoaded] = useState(false);
+    useEffect(() => {
+        setFilter(filters === null || filters === void 0 ? void 0 : filters.value);
+    }, [filters === null || filters === void 0 ? void 0 : filters.value]);
+    const settings = useMemo(() => ({
+        pagination: paginationState,
+        filter,
+        search: searchState,
+        sorting: sortingState,
+    }), [paginationState, filter, searchState, sortingState]);
+    const onFilterChange = useCallback((value) => {
+        (filters === null || filters === void 0 ? void 0 : filters.onChange) && filters.onChange(value);
+        setFilter(value);
+    }, 
+    // eslint-disable-next-line
+    [filters === null || filters === void 0 ? void 0 : filters.onChange]);
+    const validate = useCallback((data) => {
+        const isPaginationValid = validatePaging(data === null || data === void 0 ? void 0 : data.pagination);
+        const isSortingValid = validateSorting(data === null || data === void 0 ? void 0 : data.sorting);
+        const isSearchValid = typeof (data === null || data === void 0 ? void 0 : data.search) === 'string';
+        const isFilterValid = Boolean(options === null || options === void 0 ? void 0 : options.validateData(data === null || data === void 0 ? void 0 : data.filter));
+        return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+    }, [options]);
+    const onInitPage = useCallback((data) => {
+        if (!data) {
+            setIsSettingsLoaded(true);
+            return;
+        }
+        data.pagination && paginationHandler(data.pagination);
+        data.search && searchHandler(data.search);
+        data.sorting && sortingHandler(data.sorting);
+        data.filter && onFilterChange(customDateParser(data.filter));
+        setIsSettingsLoaded(true);
+        // eslint-disable-next-line
+    }, []);
+    const filterStateOptions = useMemo(() => (options ? Object.assign(Object.assign({}, options), { validateData: validate }) : undefined), [options, validate]);
+    useSaveFilterState({
+        filter: settings,
+        options: filterStateOptions,
+        onLoadFilter: onInitPage,
+    });
+    const patchedFilter = useMemo(() => (filters ? Object.assign(Object.assign({}, filters), { value: filter, onChange: onFilterChange }) : undefined), [filters, onFilterChange, filter]);
+    return {
+        patchedFilter,
+        isSettingsLoaded,
+    };
+};

package/dist/esm/components/Table/hooks/useSaveTableSettings/vallidators.d.ts

@@ -0,0 +1,3 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+export declare const validatePaging: (value: unknown) => value is PaginationState;
+export declare const validateSorting: (value: unknown) => value is SortingState;

package/dist/esm/components/Table/hooks/useSaveTableSettings/vallidators.js

@@ -0,0 +1,2 @@
+export const validatePaging = (value) => typeof (value === null || value === void 0 ? void 0 : value.pageSize) === 'number' && typeof (value === null || value === void 0 ? void 0 : value.pageIndex) === 'number';
+export const validateSorting = (value) => value === null || value === void 0 ? void 0 : value.every(column => typeof (column === null || column === void 0 ? void 0 : column.id) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.desc) === 'boolean');

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

@@ -2,7 +2,7 @@ import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectio
 import { ReactNode, RefObject } from 'react';
 import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { FilterStateOptions, WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
@@ -64,6 +64,8 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
         loading?: boolean;
         onChange?(value: string): void;
     };
+    /** Настройки для сохранения  состояний таблицы в query params и local storage*/
+    saveStateSettings?: FilterStateOptions<TFilters>;
     /** Включить нечеткий поиск  */
     enableFuzzySearch?: boolean;
     /** Максимальное кол-во строк на страницу @default 10 */

package/dist/esm/helperComponents/TablePagination/TablePagination.js

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import { ChipChoice } from '@snack-uikit/chips';
 import { useLocale } from '@snack-uikit/locale';
 import { Pagination } from '@snack-uikit/pagination';
+import { isBrowser } from '@snack-uikit/utils';
 import styles from './styles.module.css';
 export function TablePagination({ table, options: optionsProp, optionsLabel: optionsLabelProp, optionsRender, }) {
     const { t } = useLocale('Table');
@@ -21,5 +22,5 @@ export function TablePagination({ table, options: optionsProp, optionsLabel: opt
     if (table.getPageCount() <= 1 && !options) {
         return null;
     }
-    return (_jsxs("div", { className: styles.footer, children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, size: 'xs', className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', options: options, label: optionsLabel, widthStrategy: 'auto', size: 'xs' }))] }));
+    return (_jsxs("div", { className: styles.footer, children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, size: 'xs', className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', onClick: () => isBrowser() && window.location.reload(), options: options, label: optionsLabel, widthStrategy: 'auto', size: 'xs' }))] }));
 }

package/dist/esm/utils.d.ts

@@ -1,3 +1,4 @@
 import { FilterFn } from '@tanstack/react-table';
 export declare const fuzzyFilter: FilterFn<any>;
 export declare const preciseFilter: FilterFn<any>;
+export declare const customDateParser: <T>(value: Record<string, unknown>) => T;

package/dist/esm/utils.js

@@ -15,3 +15,13 @@ export const preciseFilter = (row, columnId, value, addMeta) => {
     });
     return itemRank.passed;
 };
+const isDateString = (value) => typeof value === 'string' && !isNaN(Number(new Date(value)));
+export const customDateParser = (value) => Object.fromEntries(Object.entries(value).map(([key, value]) => {
+    if (isDateString(value)) {
+        return [key, new Date(value)];
+    }
+    if (Array.isArray(value) && value.some(isDateString)) {
+        return [key, value.map(element => (isDateString(element) ? new Date(element) : element))];
+    }
+    return [key, value];
+}));

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.28.5",
+  "version": "0.28.6-preview-f7ec3fa7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.7",
-    "@snack-uikit/chips": "0.25.2",
-    "@snack-uikit/icon-predefined": "0.7.3",
-    "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/info-block": "0.6.13",
-    "@snack-uikit/list": "0.25.0",
-    "@snack-uikit/pagination": "0.10.2",
-    "@snack-uikit/scroll": "0.9.3",
-    "@snack-uikit/skeleton": "0.6.2",
-    "@snack-uikit/toggles": "0.13.5",
-    "@snack-uikit/toolbar": "0.11.5",
-    "@snack-uikit/truncate-string": "0.6.9",
-    "@snack-uikit/typography": "0.8.4",
-    "@snack-uikit/utils": "3.7.0",
+    "@snack-uikit/button": "0.19.8-preview-f7ec3fa7.0",
+    "@snack-uikit/chips": "0.25.3-preview-f7ec3fa7.0",
+    "@snack-uikit/icon-predefined": "0.7.4-preview-f7ec3fa7.0",
+    "@snack-uikit/icons": "0.24.3-preview-f7ec3fa7.0",
+    "@snack-uikit/info-block": "0.6.14-preview-f7ec3fa7.0",
+    "@snack-uikit/list": "0.25.1-preview-f7ec3fa7.0",
+    "@snack-uikit/pagination": "0.10.3-preview-f7ec3fa7.0",
+    "@snack-uikit/scroll": "0.9.4-preview-f7ec3fa7.0",
+    "@snack-uikit/skeleton": "0.6.3-preview-f7ec3fa7.0",
+    "@snack-uikit/toggles": "0.13.6-preview-f7ec3fa7.0",
+    "@snack-uikit/toolbar": "0.11.6-preview-f7ec3fa7.0",
+    "@snack-uikit/truncate-string": "0.6.10-preview-f7ec3fa7.0",
+    "@snack-uikit/typography": "0.8.5-preview-f7ec3fa7.0",
+    "@snack-uikit/utils": "3.7.1-preview-f7ec3fa7.0",
     "@tanstack/match-sorter-utils": "8.11.8",
     "@tanstack/react-table": "8.12.0",
     "classnames": "2.5.1",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "41ab61ff01da3c3093a63d1b0d10a4a1c8924c7e"
+  "gitHead": "41cd467095dc6f8b733bff37101ea84ab0e55351"
 }

package/src/components/Table/Table.tsx

@@ -45,6 +45,7 @@ import { fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
+import { useSaveTableSettings } from './hooks/useSaveTableSettings/useSaveTableSettings';
 import styles from './styles.module.scss';
 import {
   getColumnStyleVars,
@@ -96,6 +97,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   enableFuzzySearch,
   savedState,
   expanding,
+  saveStateSettings,
   bulkActions: bulkActionsProp,
   ...rest
 }: TableProps<TData, TFilters>) {
@@ -104,7 +106,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     rowSelectionProp,
     {},
   );
-
   const defaultPaginationState = useMemo(
     () => ({
       pageIndex: 0,
@@ -117,6 +118,15 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     paginationProp,
     defaultPaginationState,
   );
+
+  const { patchedFilter, isSettingsLoaded } = useSaveTableSettings({
+    pagination: { state: pagination, handler: onPaginationChange },
+    search: { state: globalFilter, handler: onGlobalFilterChange },
+    sorting: { state: sorting, handler: onSortingChange },
+    filters: columnFilters,
+    options: saveStateSettings,
+  });
+
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
@@ -366,7 +376,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
       >
-        {showToolbar && (
+        {showToolbar && isSettingsLoaded && (
           <div className={styles.header}>
             <Toolbar
               search={
@@ -404,7 +414,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                 ) : undefined
               }
               moreActions={moreActions}
-              filterRow={columnFilters}
+              filterRow={patchedFilter}
               data-test-id={TEST_IDS.toolbar}
             />
           </div>

package/src/components/Table/hooks/useSaveTableSettings/index.ts

@@ -0,0 +1 @@
+export * from './useSaveTableSettings';

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

@@ -0,0 +1,108 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Handler } from 'uncontrollable';
+
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+import { FilterRow } from '@snack-uikit/toolbar/src/components/Toolbar/types';
+import { FilterStateOptions, useSaveFilterState } from '@snack-uikit/utils';
+
+import { customDateParser } from '../../../../utils';
+import { validatePaging, validateSorting } from './vallidators';
+
+type State<T> = {
+  state: T;
+  handler: Handler;
+};
+
+type Settings<TFilter> = {
+  filter?: TFilter;
+  pagination: PaginationState;
+  search: string;
+  sorting: SortingState;
+};
+
+type ValidationFn<TFilter> = (value: unknown) => value is Settings<TFilter>;
+
+type TableSettings<TFilter extends FiltersState = Record<string, unknown>> = {
+  options?: FilterStateOptions<TFilter>;
+  filters?: ChipChoiceRowProps<TFilter>;
+  pagination: State<PaginationState>;
+  search: State<string>;
+  sorting: State<SortingState>;
+};
+
+export const useSaveTableSettings = <TFilter extends FiltersState = Record<string, unknown>>({
+  options,
+  filters,
+  pagination: { state: paginationState, handler: paginationHandler },
+  search: { state: searchState, handler: searchHandler },
+  sorting: { state: sortingState, handler: sortingHandler },
+}: TableSettings<TFilter>) => {
+  const [filter, setFilter] = useState<TFilter | undefined>(filters?.value);
+  const [isSettingsLoaded, setIsSettingsLoaded] = useState<boolean>(false);
+  useEffect(() => {
+    setFilter(filters?.value);
+  }, [filters?.value]);
+
+  const settings = useMemo<Settings<TFilter>>(
+    () => ({
+      pagination: paginationState,
+      filter,
+      search: searchState,
+      sorting: sortingState,
+    }),
+    [paginationState, filter, searchState, sortingState],
+  );
+
+  const onFilterChange = useCallback(
+    (value: TFilter) => {
+      filters?.onChange && filters.onChange(value);
+      setFilter(value);
+    },
+    // eslint-disable-next-line
+    [filters?.onChange],
+  );
+
+  const validate = useCallback<ValidationFn<TFilter>>(
+    (data: unknown): data is Settings<TFilter> => {
+      const isPaginationValid = validatePaging((data as Settings<TFilter>)?.pagination);
+      const isSortingValid = validateSorting((data as Settings<TFilter>)?.sorting);
+      const isSearchValid = typeof (data as Settings<TFilter>)?.search === 'string';
+      const isFilterValid = Boolean(options?.validateData((data as Settings<TFilter>)?.filter));
+      return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+    },
+    [options],
+  );
+
+  const onInitPage = useCallback((data: Settings<TFilter> | null) => {
+    if (!data) {
+      setIsSettingsLoaded(true);
+      return;
+    }
+    data.pagination && paginationHandler(data.pagination);
+    data.search && searchHandler(data.search);
+    data.sorting && sortingHandler(data.sorting);
+    data.filter && onFilterChange(customDateParser(data.filter));
+    setIsSettingsLoaded(true);
+    // eslint-disable-next-line
+  }, []);
+
+  const filterStateOptions = useMemo<FilterStateOptions<Settings<TFilter>> | undefined>(
+    () => (options ? { ...options, validateData: validate } : undefined),
+    [options, validate],
+  );
+  useSaveFilterState<Settings<TFilter>>({
+    filter: settings,
+    options: filterStateOptions,
+    onLoadFilter: onInitPage,
+  });
+
+  const patchedFilter = useMemo<FilterRow<TFilter> | undefined>(
+    () => (filters ? { ...filters, value: filter, onChange: onFilterChange } : undefined),
+    [filters, onFilterChange, filter],
+  );
+  return {
+    patchedFilter,
+    isSettingsLoaded,
+  };
+};

package/src/components/Table/hooks/useSaveTableSettings/vallidators.ts

@@ -0,0 +1,7 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+
+export const validatePaging = (value: unknown): value is PaginationState =>
+  typeof (value as PaginationState)?.pageSize === 'number' && typeof (value as PaginationState)?.pageIndex === 'number';
+
+export const validateSorting = (value: unknown): value is SortingState =>
+  (value as SortingState)?.every(column => typeof column?.id === 'string' && typeof column?.desc === 'boolean');

package/src/components/types.ts

@@ -10,7 +10,7 @@ import { ReactNode, RefObject } from 'react';
 
 import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { FilterStateOptions, WithSupportProps } from '@snack-uikit/utils';
 
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
@@ -80,6 +80,9 @@ export type TableProps<
     onChange?(value: string): void;
   };
 
+  /** Настройки для сохранения  состояний таблицы в query params и local storage*/
+  saveStateSettings?: FilterStateOptions<TFilters>;
+
   /** Включить нечеткий поиск  */
   enableFuzzySearch?: boolean;
 

package/src/helperComponents/TablePagination/TablePagination.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react';
 import { ChipChoice } from '@snack-uikit/chips';
 import { useLocale } from '@snack-uikit/locale';
 import { Pagination } from '@snack-uikit/pagination';
+import { isBrowser } from '@snack-uikit/utils';
 
 import styles from './styles.module.scss';
 
@@ -72,6 +73,7 @@ export function TablePagination<TData>({
           value={String(tablePaginationState.pageSize)}
           onChange={handleRowsVolumeOnChange}
           placement='top-end'
+          onClick={() => isBrowser() && window.location.reload()}
           options={options}
           label={optionsLabel}
           widthStrategy='auto'

package/src/utils.ts

@@ -22,3 +22,17 @@ export const preciseFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
 
   return itemRank.passed;
 };
+
+const isDateString = (value: unknown): value is string => typeof value === 'string' && !isNaN(Number(new Date(value)));
+export const customDateParser = <T>(value: Record<string, unknown>): T =>
+  Object.fromEntries(
+    Object.entries(value).map(([key, value]) => {
+      if (isDateString(value)) {
+        return [key, new Date(value)];
+      }
+      if (Array.isArray(value) && value.some(isDateString)) {
+        return [key, value.map(element => (isDateString(element) ? new Date(element) : element))];
+      }
+      return [key, value];
+    }),
+  ) as T;