@snack-uikit/table 0.37.36 → 0.38.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.38.0 (2026-02-20)
+
+
+### Bug Fixes
+
+* **FF-8050:** restore pagination from saved state ([e360318](https://github.com/cloud-ru-tech/snack-uikit/commit/e360318bdcea29cf4f623c0c1ac0f50d6fef0d05))
+
+
+### Features
+
+* **FF-8050:** expose serializer and parser for table saved state ([e42d1b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e42d1b8bd2e1234ed89429fdbeacc497c70f5aa4))
+
+
+
+
+
 ## 0.37.36 (2026-02-20)
 
 

package/README.md

@@ -117,7 +117,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | columnSettings* | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - |  |
-| savedState* | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - |  |
+| savedState* | `Pick<ToolbarPersistConfig<Record<string, unknown>>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - |  |
 | tableColumns* | `ColumnDefinition<TData>[]` | - |  |
 ## useColumnSettings
 ### Props
@@ -125,7 +125,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | pinnedGroups* | `PinnedGroupsState<TData>` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: RowAppearance; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |
@@ -214,7 +214,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | getRowBackgroundColor | `(data: TData) => TableRowColor` | - | Функция для определения цвета фона строки на основе данных строки @param data - данные строки таблицы @returns цвет фона строки или undefined, если цвет не должен применяться |
 | 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 фильтры, сортировки, и т.д) |
@@ -251,7 +251,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: RowAppearance; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |

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

@@ -112,7 +112,7 @@ function Table(_a) {
     const isPaginationValid = (0, validators_1.validatePaging)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
     const isSortingValid = (0, validators_1.validateSorting)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
     const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
-    const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && (0, validators_1.validateFilter)(dataAsSettings.filter, columnFilters.filters));
+    const isFilterValid = !(columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) || Boolean((0, validators_1.validateFilter)(dataAsSettings.filter, columnFilters.filters));
     return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
   }, [columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters]);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
@@ -407,6 +407,8 @@ function Table(_a) {
             filter,
             search: globalFilter || ''
           },
+          serializer: savedState.serializer,
+          parser: savedState.parser,
           onLoad: state => {
             state.pagination && onPaginationChange((0, mappers_1.mapPaginationToTableState)(state.pagination));
             state.search && onGlobalFilterChange(state.search);

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

@@ -4,7 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateFilter = exports.validateSorting = exports.validatePaging = void 0;
-const validatePaging = value => typeof (value === null || value === void 0 ? void 0 : value.limit) === 'number' && typeof (value === null || value === void 0 ? void 0 : value.offset) === 'number';
+const validatePaging = value => {
+  if (!value) {
+    return true;
+  }
+  if (typeof value !== 'object') {
+    return false;
+  }
+  return 'limit' in value && typeof value.limit === 'number' && 'offset' in value && typeof value.offset === 'number';
+};
 exports.validatePaging = validatePaging;
 const validateSorting = value => !value || value.every(column => typeof (column === null || column === void 0 ? void 0 : column.field) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.direction) === 'string');
 exports.validateSorting = validateSorting;

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

@@ -1,7 +1,7 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 import { FiltersState } from '@snack-uikit/chips';
-import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
+import { FilterRow, ToolbarPersistConfig, ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
@@ -144,7 +144,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
      *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
      *  */
-    savedState?: {
+    savedState?: Pick<ToolbarPersistConfig<TFilters>, 'serializer' | 'parser'> & {
         id: string;
         filterQueryKey?: string;
         resize?: boolean;

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

@@ -50,7 +50,7 @@ export function Table(_a) {
         const isPaginationValid = validatePaging(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
         const isSortingValid = validateSorting(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
         const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
-        const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && validateFilter(dataAsSettings.filter, columnFilters.filters));
+        const isFilterValid = !(columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) || Boolean(validateFilter(dataAsSettings.filter, columnFilters.filters));
         return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
     }, [columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters]);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
@@ -289,6 +289,8 @@ export function Table(_a) {
                                 filter,
                                 search: globalFilter || '',
                             },
+                            serializer: savedState.serializer,
+                            parser: savedState.parser,
                             onLoad: state => {
                                 state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
                                 state.search && onGlobalFilterChange(state.search);

package/dist/esm/components/Table/utils/saveTableState/validators.js

@@ -1,5 +1,12 @@
-export const validatePaging = (value) => typeof (value === null || value === void 0 ? void 0 : value.limit) === 'number' &&
-    typeof (value === null || value === void 0 ? void 0 : value.offset) === 'number';
+export const validatePaging = (value) => {
+    if (!value) {
+        return true;
+    }
+    if (typeof value !== 'object') {
+        return false;
+    }
+    return 'limit' in value && typeof value.limit === 'number' && 'offset' in value && typeof value.offset === 'number';
+};
 export const validateSorting = (value) => !value ||
     value.every(column => typeof (column === null || column === void 0 ? void 0 : column.field) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.direction) === 'string');
 export const validateFilter = (value, filterSettings) => typeof value === 'object' &&

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

@@ -1,7 +1,7 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 import { FiltersState } from '@snack-uikit/chips';
-import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
+import { FilterRow, ToolbarPersistConfig, ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
@@ -144,7 +144,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
      *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
      *  */
-    savedState?: {
+    savedState?: Pick<ToolbarPersistConfig<TFilters>, 'serializer' | 'parser'> & {
         id: string;
         filterQueryKey?: string;
         resize?: boolean;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.36",
+  "version": "0.38.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "01cbc73996330f5ecfabdb474b338cf0de112a57"
+  "gitHead": "78bf4a7f8687eea71199ee1fbb88d9490d4cb603"
 }

package/src/components/Table/Table.tsx

@@ -157,9 +157,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         const isPaginationValid = validatePaging(dataAsSettings?.pagination);
         const isSortingValid = validateSorting(dataAsSettings?.ordering);
         const isSearchValid = !dataAsSettings?.search || typeof dataAsSettings?.search === 'string';
-        const isFilterValid = Boolean(
-          columnFilters?.filters && validateFilter(dataAsSettings.filter, columnFilters.filters),
-        );
+        const isFilterValid =
+          !columnFilters?.filters || Boolean(validateFilter(dataAsSettings.filter, columnFilters.filters));
 
         return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
       },
@@ -478,6 +477,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                       filter,
                       search: globalFilter || '',
                     },
+                    serializer: savedState.serializer,
+                    parser: savedState.parser,
                     onLoad: state => {
                       state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
                       state.search && onGlobalFilterChange(state.search);

package/src/components/Table/utils/saveTableState/validators.ts

@@ -1,9 +1,17 @@
 import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ChipChoiceRowProps } from '@snack-uikit/chips';
 
-export const validatePaging = (value: unknown): value is RequestPayloadParams['pagination'] =>
-  typeof (value as RequestPayloadParams['pagination'])?.limit === 'number' &&
-  typeof (value as RequestPayloadParams['pagination'])?.offset === 'number';
+export const validatePaging = (value: unknown): value is RequestPayloadParams['pagination'] => {
+  if (!value) {
+    return true;
+  }
+
+  if (typeof value !== 'object') {
+    return false;
+  }
+
+  return 'limit' in value && typeof value.limit === 'number' && 'offset' in value && typeof value.offset === 'number';
+};
 
 export const validateSorting = (value: unknown): value is RequestPayloadParams['ordering'] =>
   !value ||

package/src/components/types.ts

@@ -9,7 +9,7 @@ import {
 import { ReactNode, RefObject } from 'react';
 
 import { FiltersState } from '@snack-uikit/chips';
-import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
+import { FilterRow, ToolbarPersistConfig, ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
 import { TABLE_ROW_COLOR } from '../constants';
@@ -177,7 +177,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
    *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
    *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
    *  */
-  savedState?: {
+  savedState?: Pick<ToolbarPersistConfig<TFilters>, 'serializer' | 'parser'> & {
     id: string;
     filterQueryKey?: string;
     resize?: boolean;