@snack-uikit/table 0.31.1 → 0.32.1-preview-d479ae3f.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.32.0 (2025-03-03)
+
+
+### Features
+
+* **PDS-483:** table rowAutoHeight prop, removed default truncate when auto-height enabled ([0da9a86](https://github.com/cloud-ru-tech/snack-uikit/commit/0da9a861737fc35ba873a1795419d49c6cae51d1))
+
+
+
+
+
 ## 0.31.1 (2025-03-03)
 
 ### Only dependencies have been changed

package/README.md

@@ -119,6 +119,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | 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` | - | Включить нечеткий поиск |
+| rowAutoHeight | `boolean` | - |  |
 | pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
@@ -143,7 +144,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `{ id: string; filter?: Omit<FilterStateOptions<TFilters>, "filterLocalStorageKey">; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
@@ -187,6 +188,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>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
+| rowAutoHeight | `boolean` | - |  |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
@@ -207,7 +209,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `{ id: string; filter?: Omit<FilterStateOptions<TFilters>, "filterLocalStorageKey">; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 | manualPagination | `boolean` | true |  |

package/dist/cjs/components/ServerTable/ServerTable.js

@@ -34,10 +34,7 @@ function ServerTable(_a) {
       manualFiltering = true
     } = _a,
     rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters", "manualSorting", "manualPagination", "manualFiltering"]);
-  const {
-    state: search,
-    onStateChange: setSearch
-  } = (0, hooks_1.useStateControl)(searchProp, '');
+  const [search, setSearch] = (0, hooks_1.useStateControl)(searchProp, '');
   const [tempSearch, setTempSearch] = (0, react_1.useState)(search || '');
   (0, react_1.useEffect)(() => {
     var _a;

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, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, ...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");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_3 = require("./utils");
 /** Компонент таблицы */
@@ -81,29 +82,57 @@ function Table(_a) {
       enableFuzzySearch,
       savedState,
       expanding,
-      bulkActions: bulkActionsProp
+      bulkActions: bulkActionsProp,
+      rowAutoHeight
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight"]);
   const {
-    state: globalFilter,
-    onStateChange: onGlobalFilterChange
-  } = (0, hooks_1.useStateControl)(search, '');
-  const {
-    state: rowSelection,
-    onStateChange: onRowSelectionChange
-  } = (0, hooks_1.useStateControl)(rowSelectionProp, {});
+    setDataToStorages,
+    defaultFilter
+  } = (0, useSaveTableSettings_1.useSaveTableSettings)({
+    options: savedState
+  });
+  const [globalFilter, onGlobalFilterChange] = (0, hooks_1.useStateControl)(search, '');
+  const [rowSelection, onRowSelectionChange] = (0, hooks_1.useStateControl)(rowSelectionProp, constants_1.DEFAULT_ROW_SELECTION);
   const defaultPaginationState = (0, react_1.useMemo)(() => ({
     pageIndex: 0,
     pageSize
   }), [pageSize]);
-  const {
-    state: sorting,
-    onStateChange: onSortingChange
-  } = (0, hooks_1.useStateControl)(sortingProp, []);
-  const {
-    state: pagination,
-    onStateChange: onPaginationChange
-  } = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
+  const [sorting, onSortingChange] = (0, hooks_1.useStateControl)(sortingProp, constants_1.DEFAULT_SORTING);
+  const [pagination, onPaginationChange] = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
+  const [filter, setFilter] = (0, hooks_1.useStateControl)({
+    state: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.value,
+    initialState: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.defaultValue,
+    onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onChange
+  }, undefined);
+  const [filterVisibility, setFilterVisibility] = (0, hooks_1.useStateControl)({
+    state: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.visibleFilters,
+    initialState: [],
+    onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onVisibleFiltersChange
+  }, constants_1.DEFAULT_FILTER_VISIBILITY);
+  (0, react_1.useEffect)(() => {
+    setDataToStorages({
+      pagination,
+      sorting,
+      filter,
+      search: (search === null || search === void 0 ? void 0 : search.state) || ''
+    });
+  }, [pagination, sorting, globalFilter, filter, setDataToStorages, search === null || search === void 0 ? void 0 : search.state]);
+  (0, utils_1.useLayoutEffect)(() => {
+    if (defaultFilter) {
+      defaultFilter.pagination && onPaginationChange(defaultFilter.pagination);
+      defaultFilter.search && onGlobalFilterChange(defaultFilter.search);
+      defaultFilter.sorting && onSortingChange(defaultFilter.sorting);
+      defaultFilter.filter && setFilter((0, utils_2.customDateParser)(defaultFilter.filter));
+      defaultFilter.filter && setFilterVisibility(Object.keys(defaultFilter.filter));
+    }
+  }, [defaultFilter, onGlobalFilterChange, onPaginationChange, onSortingChange, setFilter, setFilterVisibility]);
+  const patchedFilter = (0, react_1.useMemo)(() => columnFilters ? Object.assign(Object.assign({}, columnFilters), {
+    value: filter,
+    onChange: setFilter,
+    visibleFilters: filterVisibility,
+    onVisibleFiltersChange: setFilterVisibility
+  }) : undefined, [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility]);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
   const manualPagination = infiniteLoading || manualPaginationProp;
   const tableColumns = (0, react_1.useMemo)(() => {
@@ -157,10 +186,15 @@ function Table(_a) {
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: cell => (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-        text: String(cell.getValue()),
-        maxLines: 1
-      })
+      cell: cell => {
+        if (rowAutoHeight) {
+          return cell.getValue();
+        }
+        return (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: String(cell.getValue()),
+          maxLines: 1
+        });
+      }
     },
     manualSorting,
     manualPagination,
@@ -311,7 +345,6 @@ function Table(_a) {
   const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
   const topRows = table.getTopRows();
   const loadingTableRows = loadingTable.getRowModel().rows;
-  const tablePagination = table.getState().pagination;
   const filteredTopRows = table.getState().globalFilter ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id)) : topRows;
   const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
   const {
@@ -322,10 +355,6 @@ function Table(_a) {
     noResultsState,
     errorDataState
   });
-  const cssPageSize = (0, react_1.useMemo)(() => {
-    const tempPageSize = (!suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize) + filteredTopRows.length;
-    return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), constants_1.DEFAULT_PAGE_SIZE) : tempPageSize;
-  }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
   (0, usePageReset_1.usePageReset)({
     manualPagination,
     maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
@@ -337,102 +366,101 @@ function Table(_a) {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
-  return (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
-    value: {
-      updateCellMap
-    },
-    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
-      style: {
-        '--page-size': cssPageSize
-      },
-      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", {
-        className: styles_module_scss_1.default.header,
-        children: (0, jsx_runtime_1.jsx)(toolbar_1.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')
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    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", {
+      className: styles_module_scss_1.default.header,
+      children: (0, jsx_runtime_1.jsx)(toolbar_1.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_module_scss_1.default.toolbar,
+        onRefresh: onRefresh ? handleOnRefresh : undefined,
+        bulkActions: bulkActions,
+        selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
+        checked: table.getIsAllPageRowsSelected(),
+        indeterminate: table.getIsSomePageRowsSelected(),
+        onCheck: enableSelection ? handleOnToolbarCheck : undefined,
+        outline: outline,
+        after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
+            settings: exportSettings,
+            columnDefinitions: columnDefinitions,
+            data: data,
+            topRows: filteredTopRows,
+            centerRows: centerRows
+          })]
+        }) : undefined,
+        moreActions: moreActions,
+        filterRow: patchedFilter,
+        "data-test-id": constants_1.TEST_IDS.toolbar
+      })
+    }), (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
+      size: 's',
+      className: styles_module_scss_1.default.table,
+      ref: scrollContainerRef,
+      "data-outline": outline || undefined,
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.tableContent,
+        style: columnSizes.vars,
+        children: (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
+          value: {
+            updateCellMap
           },
-          className: styles_module_scss_1.default.toolbar,
-          onRefresh: onRefresh ? handleOnRefresh : undefined,
-          bulkActions: bulkActions,
-          selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
-          checked: table.getIsAllPageRowsSelected(),
-          indeterminate: table.getIsSomePageRowsSelected(),
-          onCheck: enableSelection ? handleOnToolbarCheck : undefined,
-          outline: outline,
-          after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-            children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
-              settings: exportSettings,
-              columnDefinitions: columnDefinitions,
-              data: data,
-              topRows: filteredTopRows,
-              centerRows: centerRows
-            })]
-          }) : undefined,
-          moreActions: moreActions,
-          filterRow: columnFilters,
-          "data-test-id": constants_1.TEST_IDS.toolbar
-        })
-      }), (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.scrollWrapper,
-        "data-outline": outline || undefined,
-        children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
-          size: 's',
-          className: styles_module_scss_1.default.table,
-          ref: scrollContainerRef,
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            className: styles_module_scss_1.default.tableContent,
-            style: columnSizes.vars,
-            children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-              value: {
-                table
-              },
-              children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+          children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
+            value: {
+              table
+            },
+            children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+              loading: true,
+              children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
+                rowAutoHeight: rowAutoHeight
+              }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                row: row,
+                rowAutoHeight: rowAutoHeight
+              }, row.id))]
+            }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+              children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
+                className: styles_module_scss_1.default.topRowWrapper,
+                children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row,
+                  onRowClick: onRowClick,
+                  rowAutoHeight: rowAutoHeight
+                }, row.id))
+              }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                row: row,
+                onRowClick: onRowClick,
+                rowAutoHeight: rowAutoHeight
+              }, row.id)), data.length > 0 && infiniteLoading && loading && !dataError && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
                 loading: true,
-                children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row
-                }, row.id))]
-              }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-                children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
-                  className: styles_module_scss_1.default.topRowWrapper,
-                  children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                    row: row,
-                    onRowClick: onRowClick
-                  }, row.id))
-                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                  row: row,
-                  onRowClick: onRowClick
-                }, row.id)), data.length > 0 && infiniteLoading && loading && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
-                  loading: true,
-                  children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                    row: row
-                  }, row.id))
-                }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
-                  emptyStates: emptyStates,
-                  dataError: dataError,
-                  dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
-                  tableRowsLength: tableRows.length + filteredTopRows.length
-                })]
-              })
+                }, row.id))
+              }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                emptyStates: emptyStates,
+                dataError: dataError,
+                dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
+                tableRowsLength: tableRows.length + filteredTopRows.length
+              })]
             })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            className: styles_module_scss_1.default.scrollStub,
-            ref: scrollRef
-          })]
+          })
         })
-      }), !infiniteLoading && !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
-        table: table,
-        options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
-        optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,
-        pageCount: pageCount,
-        optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.scrollStub,
+        ref: scrollRef
       })]
-    }))
-  });
+    }), !infiniteLoading && !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
+      table: table,
+      options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
+      optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,
+      pageCount: pageCount,
+      optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender
+    })]
+  }));
 }
 Table.getStatusColumnDef = helperComponents_1.getStatusColumnDef;
 Table.statusAppearances = helperComponents_1.STATUS_APPEARANCE;

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/types.d.ts

@@ -0,0 +1,7 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+export type Settings<TFilter> = {
+    filter?: TFilter;
+    pagination: PaginationState;
+    search: string;
+    sorting: SortingState;
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,11 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { TableProps } from '../../../types';
+import { Settings } from './types';
+type TableSettings<TFilter extends FiltersState = Record<string, unknown>> = {
+    options?: TableProps<TFilter>['savedState'];
+};
+export declare const useSaveTableSettings: <TFilter extends FiltersState = Record<string, unknown>>({ options, }: TableSettings<TFilter>) => {
+    defaultFilter: Settings<TFilter> | null | undefined;
+    setDataToStorages: (data: Settings<TFilter>) => void;
+};
+export {};

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

@@ -0,0 +1,42 @@
+"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
+  } = _ref;
+  const saveFilterOptions = (0, react_1.useMemo)(() => (options === null || options === void 0 ? void 0 : options.filter) ? Object.assign(Object.assign({}, options.filter), {
+    filterLocalStorageKey: `${options.id}__filterState`
+  }) : undefined, [options]);
+  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(saveFilterOptions === null || saveFilterOptions === void 0 ? void 0 : saveFilterOptions.validateData(data === null || data === void 0 ? void 0 : data.filter));
+    return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+  }, [saveFilterOptions]);
+  const filterStateOptions = (0, react_1.useMemo)(() => saveFilterOptions ? Object.assign(Object.assign({}, saveFilterOptions), {
+    validateData: validate
+  }) : undefined, [saveFilterOptions, validate]);
+  const {
+    getDefaultFilter,
+    setDataToStorages
+  } = (0, utils_1.useSaveFilterState)({
+    options: filterStateOptions,
+    serializer: utils_2.serializer,
+    parser: utils_2.parser
+  });
+  const defaultFilter = (0, react_1.useMemo)(getDefaultFilter, [getDefaultFilter]);
+  return {
+    defaultFilter,
+    setDataToStorages
+  };
+};
+exports.useSaveTableSettings = useSaveTableSettings;

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

@@ -0,0 +1,2 @@
+export * from './serializer';
+export * from './parser';

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

@@ -0,0 +1,26 @@
+"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("./serializer"), exports);
+__exportStar(require("./parser"), exports);

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

@@ -0,0 +1,3 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { Settings } from '../types';
+export declare const parser: <TFilter extends FiltersState = Record<string, unknown>>(value: string) => Settings<TFilter>;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parser = void 0;
+const ft_request_payload_transform_1 = require("@cloud-ru/ft-request-payload-transform");
+const constants_1 = require("../../../../../constants");
+const mapPagination = value => {
+  if (!value || !value.offset || !value.limit) return {
+    pageSize: constants_1.DEFAULT_PAGE_SIZE,
+    pageIndex: 0
+  };
+  return {
+    pageSize: value.limit || constants_1.DEFAULT_PAGE_SIZE,
+    pageIndex: Math.floor(value.offset / value.limit)
+  };
+};
+const mapSort = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return value.map(column => ({
+    id: column.field,
+    desc: column.direction === 'd'
+  }));
+};
+const mapFilter = value => {
+  if (!value) {
+    return undefined;
+  }
+  return Object.fromEntries(value.map(filter => [filter.field, filter.value]));
+};
+const parser = value => {
+  var _a;
+  const parsedValue = (0, ft_request_payload_transform_1.parseQueryParamsString)(value);
+  return {
+    pagination: mapPagination(parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.pagination),
+    search: ((_a = parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.search) === null || _a === void 0 ? void 0 : _a.toString()) || '',
+    sorting: mapSort(parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.sort),
+    filter: mapFilter(parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.filter)
+  };
+};
+exports.parser = parser;

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

@@ -0,0 +1,3 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { Settings } from '../types';
+export declare const serializer: <TFilter extends FiltersState = Record<string, unknown>>(value: Settings<TFilter>) => string;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializer = void 0;
+const ft_request_payload_transform_1 = require("@cloud-ru/ft-request-payload-transform");
+const mapPagination = value => ({
+  limit: value.pageSize,
+  offset: value.pageSize * value.pageIndex
+});
+const mapSort = value => value.map(column => ({
+  field: column.id,
+  direction: column.desc ? 'd' : 'a'
+}));
+const mapDateToString = filter => filter instanceof Date ? filter.toISOString() : filter;
+const mapFilter = value => {
+  if (!value) {
+    return undefined;
+  }
+  return Object.entries(value).filter(_ref => {
+    let [_, value] = _ref;
+    return value !== undefined;
+  }).map(_ref2 => {
+    let [key, value] = _ref2;
+    return Array.isArray(value) ? {
+      value: value.map(mapDateToString),
+      condition: 'in',
+      field: key
+    } : {
+      value: mapDateToString(value),
+      condition: 'eq',
+      field: key
+    };
+  });
+};
+const serializer = value => (0, ft_request_payload_transform_1.createRequestPayload)({
+  pagination: mapPagination(value.pagination),
+  search: value.search,
+  sort: mapSort(value.sorting),
+  filter: mapFilter(value.filter)
+}).toString();
+exports.serializer = serializer;