@snack-uikit/table 0.32.0 → 0.33.0

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

@@ -0,0 +1,12 @@
+import { ChipChoiceRowProps, 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'];
+    filterSettings?: ChipChoiceRowProps<TFilter>['filters'];
+};
+export declare const useSaveTableSettings: <TFilter extends FiltersState = Record<string, unknown>>({ options, filterSettings, }: TableSettings<TFilter>) => {
+    defaultFilter: Settings<TFilter> | null | undefined;
+    setDataToStorages: (data: Settings<TFilter>) => void;
+};
+export {};

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

@@ -0,0 +1,26 @@
+import { useCallback, useMemo } from 'react';
+import { useDataPersist } from '@snack-uikit/utils';
+import { parser, serializer } from './utils';
+import { validateFilter, validatePaging, validateSorting } from './vallidators';
+export const useSaveTableSettings = ({ options, filterSettings, }) => {
+    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(filterSettings && validateFilter(data.filter, filterSettings));
+        return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+    }, [filterSettings]);
+    const filterQueryKey = options === null || options === void 0 ? void 0 : options.filterQueryKey;
+    const filterLocalStorageKey = (options === null || options === void 0 ? void 0 : options.id) ? `${options === null || options === void 0 ? void 0 : options.id}_filter` : '';
+    const filterStateOptions = useMemo(() => (filterQueryKey ? { filterQueryKey, filterLocalStorageKey, validateData: validate } : undefined), [filterQueryKey, validate, filterLocalStorageKey]);
+    const { getDefaultFilter, setDataToStorages } = useDataPersist({
+        options: filterStateOptions,
+        serializer,
+        parser,
+    });
+    const defaultFilter = useMemo(getDefaultFilter, [getDefaultFilter]);
+    return {
+        defaultFilter,
+        setDataToStorages,
+    };
+};

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

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

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

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

package/dist/esm/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/esm/components/Table/hooks/useSaveTableSettings/utils/parser.js

@@ -0,0 +1,30 @@
+import { parseQueryParamsString } from '@cloud-ru/ft-request-payload-transform';
+import { DEFAULT_PAGE_SIZE } from '../../../../../constants';
+const mapPagination = (value) => {
+    if (!value || !value.offset || !value.limit)
+        return { pageSize: DEFAULT_PAGE_SIZE, pageIndex: 0 };
+    return {
+        pageSize: value.limit || DEFAULT_PAGE_SIZE,
+        pageIndex: Math.floor(value.offset / value.limit),
+    };
+};
+const mapSort = (value = []) => 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]));
+};
+export const parser = (value) => {
+    var _a;
+    const parsedValue = 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),
+    };
+};

package/dist/esm/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/esm/components/Table/hooks/useSaveTableSettings/utils/serializer.js

@@ -0,0 +1,34 @@
+import { createRequestPayload } from '@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(([_, value]) => value !== undefined)
+        .map(([key, value]) => Array.isArray(value)
+        ? {
+            value: value.map(mapDateToString),
+            condition: 'in',
+            field: key,
+        }
+        : {
+            value: mapDateToString(value),
+            condition: 'eq',
+            field: key,
+        });
+};
+export const serializer = (value) => createRequestPayload({
+    pagination: mapPagination(value.pagination),
+    search: value.search,
+    sort: mapSort(value.sorting),
+    filter: mapFilter(value.filter),
+}).toString();

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

@@ -0,0 +1,5 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { ChipChoiceRowProps } from '@snack-uikit/chips';
+export declare const validatePaging: (value: unknown) => value is PaginationState;
+export declare const validateSorting: (value: unknown) => value is SortingState;
+export declare const validateFilter: <TFilter extends Record<string, unknown>>(value: unknown, filterSettings: ChipChoiceRowProps<TFilter>["filters"]) => value is TFilter;

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

@@ -0,0 +1,5 @@
+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');
+export const validateFilter = (value, filterSettings) => typeof value === 'object' &&
+    value !== null &&
+    Object.keys(value).every(field => Boolean(filterSettings.find(setting => setting.id === field)));

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

@@ -2,7 +2,4 @@ export declare function useStateControl<TState>(control: {
     initialState?: TState;
     state?: TState;
     onChange?(state: TState): void;
-} | undefined, defaultState: TState): {
-    state: TState;
-    onStateChange: import("uncontrollable").Handler;
-};
+} | undefined, defaultState: TState): readonly [TState, import("uncontrollable").Handler];

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

@@ -1,13 +1,11 @@
+import { useCallback } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 export function useStateControl(control, defaultState) {
     var _a, _b;
-    const [state, onStateChange] = useUncontrolledProp(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, (controlState) => {
-        var _a;
-        const newState = typeof controlState === 'function' ? controlState(state) : controlState;
-        (_a = control === null || control === void 0 ? void 0 : control.onChange) === null || _a === void 0 ? void 0 : _a.call(control, newState);
-    });
-    return {
-        state,
-        onStateChange,
-    };
+    const state = control === null || control === void 0 ? void 0 : control.state;
+    const onChange = control === null || control === void 0 ? void 0 : control.onChange;
+    return useUncontrolledProp(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, useCallback((controlState) => {
+        const newState = typeof controlState === 'function' ? controlState(state || defaultState) : controlState;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newState);
+    }, [state, defaultState, onChange]));
 }

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

@@ -119,6 +119,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      *  */
     savedState?: {
         id: string;
+        filterQueryKey?: string;
         resize?: boolean;
     };
 }>;

package/dist/esm/constants.d.ts

@@ -35,3 +35,6 @@ export declare const SORT_FN: {
     readonly AlphaNumeric: "alphanumeric";
 };
 export declare const DEFAULT_PAGE_SIZE = 10;
+export declare const DEFAULT_SORTING: never[];
+export declare const DEFAULT_FILTER_VISIBILITY: never[];
+export declare const DEFAULT_ROW_SELECTION: {};

package/dist/esm/constants.js

@@ -35,3 +35,6 @@ export const SORT_FN = {
     AlphaNumeric: 'alphanumeric',
 };
 export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_SORTING = [];
+export const DEFAULT_FILTER_VISIBILITY = [];
+export const DEFAULT_ROW_SELECTION = {};

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.32.0",
+  "version": "0.33.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,21 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.7",
-    "@snack-uikit/chips": "0.25.4",
-    "@snack-uikit/icon-predefined": "0.7.3",
-    "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/info-block": "0.6.13",
-    "@snack-uikit/list": "0.26.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.8",
-    "@snack-uikit/truncate-string": "0.6.9",
-    "@snack-uikit/typography": "0.8.4",
-    "@snack-uikit/utils": "3.7.0",
+    "@cloud-ru/ft-request-payload-transform": "0.1.0",
+    "@snack-uikit/button": "0.19.8",
+    "@snack-uikit/chips": "0.25.5",
+    "@snack-uikit/icon-predefined": "0.7.4",
+    "@snack-uikit/icons": "0.24.3",
+    "@snack-uikit/info-block": "0.6.14",
+    "@snack-uikit/list": "0.26.1",
+    "@snack-uikit/pagination": "0.10.3",
+    "@snack-uikit/scroll": "0.9.4",
+    "@snack-uikit/skeleton": "0.6.3",
+    "@snack-uikit/toggles": "0.13.6",
+    "@snack-uikit/toolbar": "0.12.0",
+    "@snack-uikit/truncate-string": "0.6.10",
+    "@snack-uikit/typography": "0.8.5",
+    "@snack-uikit/utils": "3.8.0",
     "@tanstack/match-sorter-utils": "8.11.8",
     "@tanstack/react-table": "8.12.0",
     "classnames": "2.5.1",
@@ -61,5 +62,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "3c671e7c832a7d1c30dc4e1eed74c8b8160bd90c"
+  "gitHead": "ec4e54b1ea5c4455ca404632e1f205e22b881f98"
 }

package/src/components/ServerTable/ServerTable.tsx

@@ -24,7 +24,7 @@ export function ServerTable<TData extends object, TFilters extends FiltersState
   manualFiltering = true,
   ...rest
 }: ServerTableProps<TData, TFilters>) {
-  const { state: search, onStateChange: setSearch } = useStateControl<string>(searchProp, '');
+  const [search, setSearch] = useStateControl<string>(searchProp, '');
 
   const [tempSearch, setTempSearch] = useState(search || '');
 

package/src/components/Table/Table.tsx

@@ -21,9 +21,15 @@ import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar, ToolbarProps } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
 
-import { DEFAULT_PAGE_SIZE, TEST_IDS } from '../../constants';
+import {
+  DEFAULT_FILTER_VISIBILITY,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_ROW_SELECTION,
+  DEFAULT_SORTING,
+  TEST_IDS,
+} from '../../constants';
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import {
   BodyRow,
@@ -41,10 +47,11 @@ import {
 } from '../../helperComponents';
 import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../../types';
-import { fuzzyFilter } from '../../utils';
+import { customDateParser, fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
+import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.scss';
 import {
   getColumnStyleVars,
@@ -101,10 +108,16 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   rowAutoHeight,
   ...rest
 }: TableProps<TData, TFilters>) {
-  const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
-  const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl<RowSelectionState>(
+  const { setDataToStorages, defaultFilter } = useSaveTableSettings({
+    options: savedState,
+    filterSettings: columnFilters?.filters,
+  });
+
+  const [globalFilter, onGlobalFilterChange] = useStateControl<string>(search, '');
+
+  const [rowSelection, onRowSelectionChange] = useStateControl<RowSelectionState>(
     rowSelectionProp,
-    {},
+    DEFAULT_ROW_SELECTION,
   );
 
   const defaultPaginationState = useMemo(
@@ -114,11 +127,59 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     }),
     [pageSize],
   );
-  const { state: sorting, onStateChange: onSortingChange } = useStateControl<SortingState>(sortingProp, []);
-  const { state: pagination, onStateChange: onPaginationChange } = useStateControl<PaginationState>(
-    paginationProp,
-    defaultPaginationState,
+
+  const [sorting, onSortingChange] = useStateControl<SortingState>(sortingProp, DEFAULT_SORTING);
+
+  const [pagination, onPaginationChange] = useStateControl<PaginationState>(paginationProp, defaultPaginationState);
+
+  const [filter, setFilter] = useStateControl<TFilters | undefined>(
+    {
+      state: columnFilters?.value,
+      initialState: columnFilters?.defaultValue as TFilters,
+      onChange: columnFilters?.onChange,
+    },
+    undefined,
+  );
+
+  const [filterVisibility, setFilterVisibility] = useStateControl<string[]>(
+    {
+      state: columnFilters?.visibleFilters,
+      initialState: [],
+      onChange: columnFilters?.onVisibleFiltersChange,
+    },
+    DEFAULT_FILTER_VISIBILITY,
+  );
+
+  useEffect(() => {
+    setDataToStorages({ pagination, sorting, filter, search: globalFilter || '' });
+  }, [pagination, sorting, filter, setDataToStorages, globalFilter]);
+
+  useLayoutEffect(() => {
+    if (defaultFilter) {
+      defaultFilter.pagination && onPaginationChange(defaultFilter.pagination);
+      defaultFilter.search && onGlobalFilterChange(defaultFilter.search);
+      defaultFilter.sorting && onSortingChange(defaultFilter.sorting);
+      defaultFilter.filter && setFilter(customDateParser(defaultFilter.filter));
+      defaultFilter.filter && setFilterVisibility(Object.keys(defaultFilter.filter));
+    }
+    // Только для первого рендера, чтобы проинициализировать фильтр
+    // eslint-disable-next-line
+  }, [defaultFilter]);
+
+  const patchedFilter = useMemo(
+    () =>
+      columnFilters
+        ? {
+            ...columnFilters,
+            value: filter,
+            onChange: setFilter,
+            visibleFilters: filterVisibility,
+            onVisibleFiltersChange: setFilterVisibility,
+          }
+        : undefined,
+    [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility],
   );
+
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
   const manualPagination = infiniteLoading || manualPaginationProp;
@@ -404,7 +465,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/types.ts

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

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

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react';
+
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+import { FilterStateOptions, useDataPersist } from '@snack-uikit/utils';
+
+import { TableProps } from '../../../types';
+import { Settings } from './types';
+import { parser, serializer } from './utils';
+import { validateFilter, validatePaging, validateSorting } from './vallidators';
+
+type ValidationFn<TFilter> = (value: unknown) => value is Settings<TFilter>;
+
+type TableSettings<TFilter extends FiltersState = Record<string, unknown>> = {
+  options?: TableProps<TFilter>['savedState'];
+  filterSettings?: ChipChoiceRowProps<TFilter>['filters'];
+};
+
+export const useSaveTableSettings = <TFilter extends FiltersState = Record<string, unknown>>({
+  options,
+  filterSettings,
+}: TableSettings<TFilter>) => {
+  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(
+        filterSettings && validateFilter((data as Settings<TFilter>).filter, filterSettings),
+      );
+      return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+    },
+    [filterSettings],
+  );
+  const filterQueryKey = options?.filterQueryKey;
+  const filterLocalStorageKey = options?.id ? `${options?.id}_filter` : '';
+
+  const filterStateOptions = useMemo<FilterStateOptions<Settings<TFilter>> | undefined>(
+    () => (filterQueryKey ? { filterQueryKey, filterLocalStorageKey, validateData: validate } : undefined),
+    [filterQueryKey, validate, filterLocalStorageKey],
+  );
+
+  const { getDefaultFilter, setDataToStorages } = useDataPersist<Settings<TFilter>>({
+    options: filterStateOptions,
+    serializer,
+    parser,
+  });
+
+  const defaultFilter = useMemo(getDefaultFilter, [getDefaultFilter]);
+
+  return {
+    defaultFilter,
+    setDataToStorages,
+  };
+};

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

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

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

@@ -0,0 +1,40 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+
+import { parseQueryParamsString, RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+import { FiltersState } from '@snack-uikit/chips';
+
+import { DEFAULT_PAGE_SIZE } from '../../../../../constants';
+import { Settings } from '../types';
+
+const mapPagination = (value: RequestPayloadParams['pagination']): PaginationState => {
+  if (!value || !value.offset || !value.limit) return { pageSize: DEFAULT_PAGE_SIZE, pageIndex: 0 };
+  return {
+    pageSize: value.limit || DEFAULT_PAGE_SIZE,
+    pageIndex: Math.floor(value.offset / value.limit),
+  };
+};
+
+const mapSort = (value: RequestPayloadParams['sort'] = []): SortingState =>
+  value.map(column => ({
+    id: column.field,
+    desc: column.direction === 'd',
+  }));
+
+const mapFilter = <TFilter extends FiltersState = Record<string, unknown>>(
+  value?: RequestPayloadParams['filter'],
+): TFilter | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  return Object.fromEntries(value.map(filter => [filter.field, filter.value])) as TFilter;
+};
+
+export const parser = <TFilter extends FiltersState = Record<string, unknown>>(value: string): Settings<TFilter> => {
+  const parsedValue = parseQueryParamsString(value);
+  return {
+    pagination: mapPagination(parsedValue?.pagination),
+    search: parsedValue?.search?.toString() || '',
+    sorting: mapSort(parsedValue?.sort),
+    filter: mapFilter(parsedValue?.filter),
+  };
+};

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

@@ -0,0 +1,53 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+
+import { createRequestPayload, RequestPayloadParams, SortDirection } from '@cloud-ru/ft-request-payload-transform';
+import { FiltersState } from '@snack-uikit/chips';
+
+import { Settings } from '../types';
+
+const mapPagination = (value: PaginationState): RequestPayloadParams['pagination'] => ({
+  limit: value.pageSize,
+  offset: value.pageSize * value.pageIndex,
+});
+
+const mapSort = (value: SortingState): RequestPayloadParams['sort'] =>
+  value.map(column => ({
+    field: column.id,
+    direction: (column.desc ? 'd' : 'a') as SortDirection,
+  }));
+
+type FilterValue = string | null | number | boolean | Date;
+
+const mapDateToString = (filter: FilterValue): string | null | number | boolean =>
+  filter instanceof Date ? filter.toISOString() : filter;
+
+const mapFilter = <TFilter extends FiltersState = Record<string, unknown>>(
+  value?: TFilter,
+): RequestPayloadParams['filter'] => {
+  if (!value) {
+    return undefined;
+  }
+  return Object.entries(value)
+    .filter(([_, value]) => value !== undefined)
+    .map(([key, value]) =>
+      Array.isArray(value)
+        ? {
+            value: (value as FilterValue[]).map(mapDateToString),
+            condition: 'in',
+            field: key,
+          }
+        : {
+            value: mapDateToString(value as FilterValue),
+            condition: 'eq',
+            field: key,
+          },
+    );
+};
+
+export const serializer = <TFilter extends FiltersState = Record<string, unknown>>(value: Settings<TFilter>) =>
+  createRequestPayload({
+    pagination: mapPagination(value.pagination),
+    search: value.search,
+    sort: mapSort(value.sorting),
+    filter: mapFilter(value.filter),
+  }).toString();

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

@@ -0,0 +1,17 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+
+import { ChipChoiceRowProps } from '@snack-uikit/chips';
+
+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');
+
+export const validateFilter = <TFilter extends Record<string, unknown>>(
+  value: unknown,
+  filterSettings: ChipChoiceRowProps<TFilter>['filters'],
+): value is TFilter =>
+  typeof value === 'object' &&
+  value !== null &&
+  Object.keys(value).every(field => Boolean(filterSettings.find(setting => setting.id === field)));

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

@@ -1,21 +1,23 @@
+import { useCallback } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 export function useStateControl<TState>(
   control: { initialState?: TState; state?: TState; onChange?(state: TState): void } | undefined,
   defaultState: TState,
 ) {
-  const [state, onStateChange] = useUncontrolledProp<TState>(
+  const state = control?.state;
+  const onChange = control?.onChange;
+
+  return useUncontrolledProp<TState>(
     control?.state,
     control?.state ?? control?.initialState ?? defaultState,
-    (controlState: TState) => {
-      const newState = typeof controlState === 'function' ? controlState(state) : controlState;
+    useCallback(
+      (controlState: TState) => {
+        const newState = typeof controlState === 'function' ? controlState(state || defaultState) : controlState;
 
-      control?.onChange?.(newState);
-    },
+        onChange?.(newState);
+      },
+      [state, defaultState, onChange],
+    ),
   );
-
-  return {
-    state,
-    onStateChange,
-  };
 }

package/src/components/types.ts

@@ -148,6 +148,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
    *  */
   savedState?: {
     id: string;
+    filterQueryKey?: string;
     resize?: boolean;
   };
 }>;

package/src/constants.tsx

@@ -39,3 +39,6 @@ export const SORT_FN = {
 } as const;
 
 export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_SORTING = [];
+export const DEFAULT_FILTER_VISIBILITY = [];
+export const DEFAULT_ROW_SELECTION = {};