@snack-uikit/table 0.34.9 → 0.35.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.35.0 (2025-03-26)
+
+
+### Bug Fixes
+
+* **PDS-1971:** newValue renaming ([37b4eb9](https://github.com/cloud-ru-tech/snack-uikit/commit/37b4eb9b11bb13db122edf3d8e2fea9b4b8e8b25))
+* **PDS-1971:** useColumnSettings return compose as object ([61b3799](https://github.com/cloud-ru-tech/snack-uikit/commit/61b3799acd59e31546e6da44641d5a01738d55e5))
+
+
+### Features
+
+* **PDS-1971:** add columnSettings to savedState and mode of initvalue ([72863cf](https://github.com/cloud-ru-tech/snack-uikit/commit/72863cfdc7a2ae81b709755792615067b425efa2))
+
+
+
+
+
 ## 0.34.9 (2025-03-19)
 
 ### Only dependencies have been changed

package/README.md

@@ -145,7 +145,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: 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` | - | Кол-во страниц (используется для внешнего управления) |
@@ -211,7 +211,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 | manualPagination | `boolean` | true |  |

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

@@ -150,7 +150,10 @@ function Table(_a) {
   }, [columnFilters, areColumnFiltersOpen, filter, setFilter, filterVisibility, setFilterVisibility]);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
   const manualPagination = infiniteLoading || manualPaginationProp;
-  const [enabledColumns, setEnabledColumns] = (0, react_1.useState)(() => (0, utils_3.prepareColumnsSettingsMap)(columnDefinitions));
+  const {
+    enabledColumns,
+    setEnabledColumns
+  } = (0, hooks_1.useColumnSettings)(columnDefinitions, savedState);
   const areColumnsSettingsEnabled = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
   const filteredColumnDefinitions = (0, react_1.useMemo)(() => {
     if (!areColumnsSettingsEnabled) {
@@ -179,7 +182,7 @@ function Table(_a) {
     setColumnOrder,
     sensors,
     handleDragEnd
-  } = (0, hooks_1.useColumnOrderByDrag)(tableColumns);
+  } = (0, hooks_1.useColumnOrderByDrag)(tableColumns, savedState);
   const dndContextProps = (0, react_1.useMemo)(() => {
     if (!enableColumnsOrderSortByDrag) {
       return {};

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

@@ -1,3 +1,4 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
 export * from './useColumnOrderByDrag';
+export * from './useColumnSettings';

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

@@ -24,4 +24,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 __exportStar(require("./useLoadingTable"), exports);
 __exportStar(require("./useStateControl"), exports);
-__exportStar(require("./useColumnOrderByDrag"), exports);
+__exportStar(require("./useColumnOrderByDrag"), exports);
+__exportStar(require("./useColumnSettings"), exports);

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

@@ -1,8 +1,10 @@
 import { DragEndEvent, SensorOptions } from '@dnd-kit/core';
+import { Dispatch, SetStateAction } from 'react';
 import { ColumnDefinition } from '../../../types';
-export declare function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[]): {
+import { TableProps } from '../../types';
+export declare function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[], savedState: TableProps<TData>['savedState']): {
     columnOrder: string[];
-    setColumnOrder: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    setColumnOrder: Dispatch<SetStateAction<string[]>>;
     handleDragEnd: ({ active, over }: DragEndEvent) => void;
     sensors: import("@dnd-kit/core").SensorDescriptor<SensorOptions>[];
 };

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

@@ -8,16 +8,39 @@ const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
 const utils_1 = require("../utils");
-function prepareInitialState(tableColumns) {
-  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(utils_1.getColumnIdentifier);
+const validateColumnOrderLocalStorageValue = value => Array.isArray(value) && value.every(setting => typeof setting === 'string');
+const getLocalStorageColumnOrderKey = id => `${id}_columnOrder`;
+function prepareInitialState(tableColumns, savedState) {
+  const columnOrder = tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(utils_1.getColumnIdentifier);
+  if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+    const persistState = JSON.parse(localStorage.getItem(getLocalStorageColumnOrderKey(savedState.id)) || 'null');
+    const persistValue = validateColumnOrderLocalStorageValue(persistState) ? persistState : null;
+    if (persistValue !== null) {
+      return [...persistValue, ...columnOrder.filter(column => !(persistValue === null || persistValue === void 0 ? void 0 : persistValue.includes(column)))];
+    }
+    localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(columnOrder));
+  }
+  return columnOrder;
 }
 const draggingOptions = {
   activationConstraint: {
     distance: 5 // Is required to differ click (sort) from drag
   }
 };
-function useColumnOrderByDrag(tableColumns) {
-  const [columnOrder, setColumnOrder] = (0, react_1.useState)(() => prepareInitialState(tableColumns));
+function useColumnOrderByDrag(tableColumns, savedState) {
+  const [columnOrder, setColumnOrderState] = (0, react_1.useState)(() => prepareInitialState(tableColumns, savedState));
+  const setColumnOrder = (0, react_1.useCallback)(value => {
+    let updatedOrder;
+    if (value instanceof Function) {
+      updatedOrder = value(columnOrder);
+    } else {
+      updatedOrder = value;
+    }
+    if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+      localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(updatedOrder));
+    }
+    setColumnOrderState(updatedOrder);
+  }, [columnOrder, savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings, savedState === null || savedState === void 0 ? void 0 : savedState.id]);
   const handleDragEnd = (0, react_1.useCallback)(_ref => {
     let {
       active,
@@ -39,7 +62,7 @@ function useColumnOrderByDrag(tableColumns) {
       const newIndex = columnOrder.indexOf(overId);
       return (0, sortable_1.arrayMove)(columnOrder, oldIndex, newIndex);
     });
-  }, [columnOrder]);
+  }, [columnOrder, setColumnOrder]);
   const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, draggingOptions), (0, core_1.useSensor)(core_1.TouchSensor, {}), (0, core_1.useSensor)(core_1.KeyboardSensor, {}));
   return {
     columnOrder,

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

@@ -0,0 +1,6 @@
+import { ColumnDefinition } from '../../../types';
+import { TableProps } from '../../types';
+export declare function useColumnSettings<TData extends object, TFilter extends Record<string, unknown>>(columnDefinitions: ColumnDefinition<TData>[], savedState: TableProps<TFilter>['savedState']): {
+    enabledColumns: string[];
+    setEnabledColumns: (value: string[]) => void;
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnSettings = useColumnSettings;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const validateSettingsLocalStorageValue = value => Array.isArray(value) && value.every(setting => typeof setting === 'string');
+function useColumnSettings(columnDefinitions, savedState) {
+  const localStorageKey = `${savedState === null || savedState === void 0 ? void 0 : savedState.id}_columnSettings`;
+  const [enabledColumns, setEnabledColumns] = (0, react_1.useState)(() => {
+    const persistState = JSON.parse(localStorage.getItem(localStorageKey) || 'null');
+    const persistValue = validateSettingsLocalStorageValue(persistState) ? persistState : null;
+    return columnDefinitions.filter(colDef => {
+      var _a, _b;
+      const columnIdentifier = (0, utils_1.getColumnIdentifier)(colDef);
+      if ('columnSettings' in colDef) {
+        if (((_a = colDef.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) === 'hidden') {
+          return true;
+        } else if (persistValue !== null && (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings)) {
+          if (persistValue.find(el => el === columnIdentifier)) {
+            return true;
+          }
+          return false;
+        }
+        return ((_b = colDef.columnSettings) === null || _b === void 0 ? void 0 : _b.mode) !== 'defaultFalse';
+      }
+      return true;
+    }).map(utils_1.getColumnIdentifier);
+  });
+  return {
+    enabledColumns,
+    setEnabledColumns: value => {
+      if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+        localStorage.setItem(localStorageKey, JSON.stringify(value));
+      }
+      setEnabledColumns(value);
+    }
+  };
+}

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

@@ -63,7 +63,8 @@ function saveStateToLocalStorage(_ref2) {
   })));
 }
 function isFilterableColumn(colDef) {
-  return ('id' in colDef || 'accessorKey' in colDef) && 'headerConfigLabel' in colDef;
+  var _a;
+  return ('id' in colDef || 'accessorKey' in colDef) && 'columnSettings' in colDef && ((_a = colDef.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) !== 'hidden';
 }
 function getColumnIdentifier(colDef) {
   if ('id' in colDef && colDef.id) {
@@ -74,19 +75,23 @@ function getColumnIdentifier(colDef) {
   // @ts-ignore
   return colDef.accessorKey;
 }
-function prepareColumnsSettingsMap(columnDefinitions) {
-  return columnDefinitions.filter(isFilterableColumn).map(getColumnIdentifier);
-}
 const sortColumnDefinitions = columnOrder => function sortColDefs(colDefA, colDefB) {
   const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefA));
   const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefB));
   return indexItemA - indexItemB;
 };
+function prepareColumnsSettingsMap(columnDefinitions) {
+  return columnDefinitions.filter(el => {
+    var _a;
+    return isFilterableColumn(el) && ((_a = el.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) !== 'defaultFalse';
+  }).map(getColumnIdentifier);
+}
 function createColumnsSettingsOption(columnDefinition) {
+  var _a;
   return {
     id: getColumnIdentifier(columnDefinition),
     content: {
-      option: columnDefinition.headerConfigLabel
+      option: (_a = columnDefinition.columnSettings) === null || _a === void 0 ? void 0 : _a.label
     },
     switch: true,
     showSwitchIcon: true

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

@@ -131,6 +131,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         id: string;
         filterQueryKey?: string;
         resize?: boolean;
+        columnSettings?: boolean;
     };
 }>;
 export type InfiniteTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {

package/dist/cjs/constants.d.ts

@@ -6,6 +6,11 @@ export declare const COLUMN_ALIGN: {
     readonly Left: "left";
     readonly Right: "right";
 };
+export declare const COLUMN_SETTINGS_MODE: {
+    readonly Hidden: "hidden";
+    readonly DefaultTrue: "defaultTrue";
+    readonly DefaultFalse: "defaultFalse";
+};
 export declare const TEST_IDS: {
     headerSortIndicator: string;
     headerRow: string;

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_COLUMNS = exports.DEFAULT_ROW_SELECTION = exports.DEFAULT_FILTER_VISIBILITY = exports.DEFAULT_SORTING = exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
+exports.DEFAULT_COLUMNS = exports.DEFAULT_ROW_SELECTION = exports.DEFAULT_FILTER_VISIBILITY = exports.DEFAULT_SORTING = exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_SETTINGS_MODE = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
 exports.COLUMN_PIN_POSITION = {
   Left: 'left',
   Right: 'right'
@@ -12,6 +12,12 @@ exports.COLUMN_ALIGN = {
   Left: 'left',
   Right: 'right'
 };
+exports.COLUMN_SETTINGS_MODE = {
+  /* Скрыто в настройках, значение всегда True */
+  Hidden: 'hidden',
+  DefaultTrue: 'defaultTrue',
+  DefaultFalse: 'defaultFalse'
+};
 exports.TEST_IDS = {
   headerSortIndicator: 'table__header__sort-indicator',
   headerRow: 'table__header-row',

package/dist/cjs/helperComponents/ColumnsSettings/ColumnsSettings.js

@@ -29,6 +29,7 @@ function ColumnsSettings(_ref) {
       mode: 'multiple'
     },
     placement: 'bottom-end',
+    "data-test-id": 'table__column-settings-droplist',
     children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
       size: 'm',
       "data-test-id": 'table__column-settings',

package/dist/cjs/types.d.ts

@@ -2,10 +2,11 @@ import { CellContext, ColumnDef, ColumnMeta, HeaderContext, PaginationState, Row
 import { ReactNode } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
-import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
+import { COLUMN_ALIGN, COLUMN_PIN_POSITION, COLUMN_SETTINGS_MODE } from './constants';
 import { EmptyStateProps, Except } from './helperComponents';
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
+type ColumnSettingsMode = ValueOf<typeof COLUMN_SETTINGS_MODE>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
     /** Заголовок колонки */
     header?: ReactNode | ((ctx: HeaderContext<TData, unknown>) => ReactNode);
@@ -39,14 +40,16 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 type FilterableProps = {
+    columnSettings?: {
+        /** Название колонки в настройках таблицы */
+        label?: string;
+        mode?: ColumnSettingsMode;
+    };
+} & ({
     id: string;
-    /** Название колонки в настройках таблицы */
-    headerConfigLabel?: string;
 } | {
     accessorKey: string;
-    /** Название колонки в настройках таблицы */
-    headerConfigLabel?: string;
-};
+});
 type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
 type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;
 export type FilterableColumnDefinition<TData> = FilterableNormalColumnDefinition<TData> | FilterablePinnedColumnDefinition<TData>;

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

@@ -26,11 +26,11 @@ import { CellAutoResizeContext, useCellAutoResizeController } from '../../contex
 import { BodyRow, ColumnsSettings, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { customDateParser, fuzzyFilter } from '../../utils';
-import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks';
+import { useColumnOrderByDrag, useColumnSettings, useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.css';
-import { getColumnIdentifier, getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getInitialColumnsOpenValue, isFilterableColumn, prepareColumnsSettings, prepareColumnsSettingsMap, saveStateToLocalStorage, } from './utils';
+import { getColumnIdentifier, getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getInitialColumnsOpenValue, isFilterableColumn, prepareColumnsSettings, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
     var { data, rowPinning = {
@@ -81,7 +81,7 @@ export function Table(_a) {
     }, [columnFilters, areColumnFiltersOpen, filter, setFilter, filterVisibility, setFilterVisibility]);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     const manualPagination = infiniteLoading || manualPaginationProp;
-    const [enabledColumns, setEnabledColumns] = useState(() => prepareColumnsSettingsMap(columnDefinitions));
+    const { enabledColumns, setEnabledColumns } = useColumnSettings(columnDefinitions, savedState);
     const areColumnsSettingsEnabled = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
     const filteredColumnDefinitions = useMemo(() => {
         if (!areColumnsSettingsEnabled) {
@@ -105,7 +105,7 @@ export function Table(_a) {
         return cols;
     }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
     const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
-    const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
+    const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns, savedState);
     const dndContextProps = useMemo(() => {
         if (!enableColumnsOrderSortByDrag) {
             return {};

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

@@ -1,3 +1,4 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
 export * from './useColumnOrderByDrag';
+export * from './useColumnSettings';

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

@@ -1,3 +1,4 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
 export * from './useColumnOrderByDrag';
+export * from './useColumnSettings';

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

@@ -1,8 +1,10 @@
 import { DragEndEvent, SensorOptions } from '@dnd-kit/core';
+import { Dispatch, SetStateAction } from 'react';
 import { ColumnDefinition } from '../../../types';
-export declare function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[]): {
+import { TableProps } from '../../types';
+export declare function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[], savedState: TableProps<TData>['savedState']): {
     columnOrder: string[];
-    setColumnOrder: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    setColumnOrder: Dispatch<SetStateAction<string[]>>;
     handleDragEnd: ({ active, over }: DragEndEvent) => void;
     sensors: import("@dnd-kit/core").SensorDescriptor<SensorOptions>[];
 };

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

@@ -2,16 +2,42 @@ import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from
 import { arrayMove } from '@dnd-kit/sortable';
 import { useCallback, useState } from 'react';
 import { getColumnIdentifier } from '../utils';
-function prepareInitialState(tableColumns) {
-    return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(getColumnIdentifier);
+const validateColumnOrderLocalStorageValue = (value) => Array.isArray(value) && value.every(setting => typeof setting === 'string');
+const getLocalStorageColumnOrderKey = (id) => `${id}_columnOrder`;
+function prepareInitialState(tableColumns, savedState) {
+    const columnOrder = tableColumns
+        .filter(column => column.pinned !== 'left' && column.pinned !== 'right')
+        .map(getColumnIdentifier);
+    if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+        const persistState = JSON.parse(localStorage.getItem(getLocalStorageColumnOrderKey(savedState.id)) || 'null');
+        const persistValue = validateColumnOrderLocalStorageValue(persistState) ? persistState : null;
+        if (persistValue !== null) {
+            return [...persistValue, ...columnOrder.filter(column => !(persistValue === null || persistValue === void 0 ? void 0 : persistValue.includes(column)))];
+        }
+        localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(columnOrder));
+    }
+    return columnOrder;
 }
 const draggingOptions = {
     activationConstraint: {
         distance: 5, // Is required to differ click (sort) from drag
     },
 };
-export function useColumnOrderByDrag(tableColumns) {
-    const [columnOrder, setColumnOrder] = useState(() => prepareInitialState(tableColumns));
+export function useColumnOrderByDrag(tableColumns, savedState) {
+    const [columnOrder, setColumnOrderState] = useState(() => prepareInitialState(tableColumns, savedState));
+    const setColumnOrder = useCallback(value => {
+        let updatedOrder;
+        if (value instanceof Function) {
+            updatedOrder = value(columnOrder);
+        }
+        else {
+            updatedOrder = value;
+        }
+        if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+            localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(updatedOrder));
+        }
+        setColumnOrderState(updatedOrder);
+    }, [columnOrder, savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings, savedState === null || savedState === void 0 ? void 0 : savedState.id]);
     const handleDragEnd = useCallback(({ active, over }) => {
         if (!active || !over) {
             return;
@@ -29,7 +55,7 @@ export function useColumnOrderByDrag(tableColumns) {
             const newIndex = columnOrder.indexOf(overId);
             return arrayMove(columnOrder, oldIndex, newIndex);
         });
-    }, [columnOrder]);
+    }, [columnOrder, setColumnOrder]);
     const sensors = useSensors(useSensor(MouseSensor, draggingOptions), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
     return {
         columnOrder,

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

@@ -0,0 +1,6 @@
+import { ColumnDefinition } from '../../../types';
+import { TableProps } from '../../types';
+export declare function useColumnSettings<TData extends object, TFilter extends Record<string, unknown>>(columnDefinitions: ColumnDefinition<TData>[], savedState: TableProps<TFilter>['savedState']): {
+    enabledColumns: string[];
+    setEnabledColumns: (value: string[]) => void;
+};

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

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { getColumnIdentifier } from '../utils';
+const validateSettingsLocalStorageValue = (value) => Array.isArray(value) && value.every(setting => typeof setting === 'string');
+export function useColumnSettings(columnDefinitions, savedState) {
+    const localStorageKey = `${savedState === null || savedState === void 0 ? void 0 : savedState.id}_columnSettings`;
+    const [enabledColumns, setEnabledColumns] = useState(() => {
+        const persistState = JSON.parse(localStorage.getItem(localStorageKey) || 'null');
+        const persistValue = validateSettingsLocalStorageValue(persistState) ? persistState : null;
+        return columnDefinitions
+            .filter(colDef => {
+            var _a, _b;
+            const columnIdentifier = getColumnIdentifier(colDef);
+            if ('columnSettings' in colDef) {
+                if (((_a = colDef.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) === 'hidden') {
+                    return true;
+                }
+                else if (persistValue !== null && (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings)) {
+                    if (persistValue.find(el => el === columnIdentifier)) {
+                        return true;
+                    }
+                    return false;
+                }
+                return ((_b = colDef.columnSettings) === null || _b === void 0 ? void 0 : _b.mode) !== 'defaultFalse';
+            }
+            return true;
+        })
+            .map(getColumnIdentifier);
+    });
+    return {
+        enabledColumns,
+        setEnabledColumns: (value) => {
+            if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+                localStorage.setItem(localStorageKey, JSON.stringify(value));
+            }
+            setEnabledColumns(value);
+        },
+    };
+}

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

@@ -36,7 +36,10 @@ export function saveStateToLocalStorage({ id, columnId, size }) {
     localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, (savedStateFromStorage || {})), { resizeState: newResizeState })));
 }
 export function isFilterableColumn(colDef) {
-    return ('id' in colDef || 'accessorKey' in colDef) && 'headerConfigLabel' in colDef;
+    var _a;
+    return (('id' in colDef || 'accessorKey' in colDef) &&
+        'columnSettings' in colDef &&
+        ((_a = colDef.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) !== 'hidden');
 }
 export function getColumnIdentifier(colDef) {
     if ('id' in colDef && colDef.id) {
@@ -47,19 +50,22 @@ export function getColumnIdentifier(colDef) {
     // @ts-ignore
     return colDef.accessorKey;
 }
-export function prepareColumnsSettingsMap(columnDefinitions) {
-    return columnDefinitions.filter(isFilterableColumn).map(getColumnIdentifier);
-}
 const sortColumnDefinitions = (columnOrder) => function sortColDefs(colDefA, colDefB) {
     const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefA));
     const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefB));
     return indexItemA - indexItemB;
 };
+export function prepareColumnsSettingsMap(columnDefinitions) {
+    return columnDefinitions
+        .filter(el => { var _a; return isFilterableColumn(el) && ((_a = el.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) !== 'defaultFalse'; })
+        .map(getColumnIdentifier);
+}
 function createColumnsSettingsOption(columnDefinition) {
+    var _a;
     return {
         id: getColumnIdentifier(columnDefinition),
         content: {
-            option: columnDefinition.headerConfigLabel,
+            option: (_a = columnDefinition.columnSettings) === null || _a === void 0 ? void 0 : _a.label,
         },
         switch: true,
         showSwitchIcon: true,

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

@@ -131,6 +131,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         id: string;
         filterQueryKey?: string;
         resize?: boolean;
+        columnSettings?: boolean;
     };
 }>;
 export type InfiniteTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {

package/dist/esm/constants.d.ts

@@ -6,6 +6,11 @@ export declare const COLUMN_ALIGN: {
     readonly Left: "left";
     readonly Right: "right";
 };
+export declare const COLUMN_SETTINGS_MODE: {
+    readonly Hidden: "hidden";
+    readonly DefaultTrue: "defaultTrue";
+    readonly DefaultFalse: "defaultFalse";
+};
 export declare const TEST_IDS: {
     headerSortIndicator: string;
     headerRow: string;

package/dist/esm/constants.js

@@ -6,6 +6,12 @@ export const COLUMN_ALIGN = {
     Left: 'left',
     Right: 'right',
 };
+export const COLUMN_SETTINGS_MODE = {
+    /* Скрыто в настройках, значение всегда True */
+    Hidden: 'hidden',
+    DefaultTrue: 'defaultTrue',
+    DefaultFalse: 'defaultFalse',
+};
 export const TEST_IDS = {
     headerSortIndicator: 'table__header__sort-indicator',
     headerRow: 'table__header-row',

package/dist/esm/helperComponents/ColumnsSettings/ColumnsSettings.js

@@ -8,5 +8,5 @@ export function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledCol
             value: enabledColumns,
             onChange: setEnabledColumns,
             mode: 'multiple',
-        }, placement: 'bottom-end', children: _jsx(ButtonFunction, { size: 'm', "data-test-id": 'table__column-settings', icon: _jsx(FunctionSettingsSVG, {}) }) }));
+        }, placement: 'bottom-end', "data-test-id": 'table__column-settings-droplist', children: _jsx(ButtonFunction, { size: 'm', "data-test-id": 'table__column-settings', icon: _jsx(FunctionSettingsSVG, {}) }) }));
 }

package/dist/esm/types.d.ts

@@ -2,10 +2,11 @@ import { CellContext, ColumnDef, ColumnMeta, HeaderContext, PaginationState, Row
 import { ReactNode } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
-import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
+import { COLUMN_ALIGN, COLUMN_PIN_POSITION, COLUMN_SETTINGS_MODE } from './constants';
 import { EmptyStateProps, Except } from './helperComponents';
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
+type ColumnSettingsMode = ValueOf<typeof COLUMN_SETTINGS_MODE>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
     /** Заголовок колонки */
     header?: ReactNode | ((ctx: HeaderContext<TData, unknown>) => ReactNode);
@@ -39,14 +40,16 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 type FilterableProps = {
+    columnSettings?: {
+        /** Название колонки в настройках таблицы */
+        label?: string;
+        mode?: ColumnSettingsMode;
+    };
+} & ({
     id: string;
-    /** Название колонки в настройках таблицы */
-    headerConfigLabel?: string;
 } | {
     accessorKey: string;
-    /** Название колонки в настройках таблицы */
-    headerConfigLabel?: string;
-};
+});
 type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
 type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;
 export type FilterableColumnDefinition<TData> = FilterableNormalColumnDefinition<TData> | FilterablePinnedColumnDefinition<TData>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.34.9",
+  "version": "0.35.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
+  "gitHead": "fe98ae1edb6c3d6ccd3a4fc67bf4a4ba55b13e35"
 }

package/src/components/Table/Table.tsx

@@ -52,7 +52,7 @@ import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../../types';
 import { customDateParser, fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
-import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks';
+import { useColumnOrderByDrag, useColumnSettings, useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.scss';
@@ -64,7 +64,6 @@ import {
   getInitialColumnsOpenValue,
   isFilterableColumn,
   prepareColumnsSettings,
-  prepareColumnsSettingsMap,
   saveStateToLocalStorage,
 } from './utils';
 
@@ -199,7 +198,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
   const manualPagination = infiniteLoading || manualPaginationProp;
 
-  const [enabledColumns, setEnabledColumns] = useState<string[]>(() => prepareColumnsSettingsMap(columnDefinitions));
+  const { enabledColumns, setEnabledColumns } = useColumnSettings(columnDefinitions, savedState);
   const areColumnsSettingsEnabled = Boolean(columnsSettingsProp?.enableSettingsMenu);
 
   const filteredColumnDefinitions = useMemo(() => {
@@ -228,7 +227,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
 
   const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp?.enableDrag);
-  const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
+  const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns, savedState);
   const dndContextProps: DndContextProps = useMemo(() => {
     if (!enableColumnsOrderSortByDrag) {
       return {};

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

@@ -1,3 +1,4 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
 export * from './useColumnOrderByDrag';
+export * from './useColumnSettings';

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

@@ -8,13 +8,37 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
-import { useCallback, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 
 import { ColumnDefinition } from '../../../types';
+import { TableProps } from '../../types';
 import { getColumnIdentifier } from '../utils';
 
-function prepareInitialState<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
-  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(getColumnIdentifier);
+const validateColumnOrderLocalStorageValue = (value: unknown): value is string[] =>
+  Array.isArray(value) && value.every(setting => typeof setting === 'string');
+
+const getLocalStorageColumnOrderKey = (id: string) => `${id}_columnOrder`;
+
+function prepareInitialState<TData extends object>(
+  tableColumns: ColumnDefinition<TData>[],
+  savedState: TableProps<TData>['savedState'],
+) {
+  const columnOrder = tableColumns
+    .filter(column => column.pinned !== 'left' && column.pinned !== 'right')
+    .map(getColumnIdentifier);
+
+  if (savedState?.columnSettings) {
+    const persistState = JSON.parse(localStorage.getItem(getLocalStorageColumnOrderKey(savedState.id)) || 'null');
+    const persistValue: string[] | null = validateColumnOrderLocalStorageValue(persistState) ? persistState : null;
+
+    if (persistValue !== null) {
+      return [...persistValue, ...columnOrder.filter(column => !persistValue?.includes(column))];
+    }
+
+    localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(columnOrder));
+  }
+
+  return columnOrder;
 }
 
 const draggingOptions: SensorOptions = {
@@ -23,8 +47,30 @@ const draggingOptions: SensorOptions = {
   },
 };
 
-export function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
-  const [columnOrder, setColumnOrder] = useState<string[]>(() => prepareInitialState(tableColumns));
+export function useColumnOrderByDrag<TData extends object>(
+  tableColumns: ColumnDefinition<TData>[],
+  savedState: TableProps<TData>['savedState'],
+) {
+  const [columnOrder, setColumnOrderState] = useState<string[]>(() => prepareInitialState(tableColumns, savedState));
+
+  const setColumnOrder: Dispatch<SetStateAction<string[]>> = useCallback(
+    value => {
+      let updatedOrder: string[];
+
+      if (value instanceof Function) {
+        updatedOrder = value(columnOrder);
+      } else {
+        updatedOrder = value;
+      }
+
+      if (savedState?.columnSettings) {
+        localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(updatedOrder));
+      }
+
+      setColumnOrderState(updatedOrder);
+    },
+    [columnOrder, savedState?.columnSettings, savedState?.id],
+  );
 
   const handleDragEnd = useCallback(
     ({ active, over }: DragEndEvent) => {
@@ -49,7 +95,7 @@ export function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnD
         return arrayMove(columnOrder, oldIndex, newIndex);
       });
     },
-    [columnOrder],
+    [columnOrder, setColumnOrder],
   );
 
   const sensors = useSensors(

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

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+import { ColumnDefinition } from '../../../types';
+import { TableProps } from '../../types';
+import { getColumnIdentifier } from '../utils';
+
+const validateSettingsLocalStorageValue = (value: unknown): value is string[] =>
+  Array.isArray(value) && value.every(setting => typeof setting === 'string');
+
+export function useColumnSettings<TData extends object, TFilter extends Record<string, unknown>>(
+  columnDefinitions: ColumnDefinition<TData>[],
+  savedState: TableProps<TFilter>['savedState'],
+) {
+  const localStorageKey = `${savedState?.id}_columnSettings`;
+
+  const [enabledColumns, setEnabledColumns] = useState<string[]>(() => {
+    const persistState = JSON.parse(localStorage.getItem(localStorageKey) || 'null');
+    const persistValue: string[] | null = validateSettingsLocalStorageValue(persistState) ? persistState : null;
+
+    return columnDefinitions
+      .filter(colDef => {
+        const columnIdentifier = getColumnIdentifier(colDef);
+
+        if ('columnSettings' in colDef) {
+          if (colDef.columnSettings?.mode === 'hidden') {
+            return true;
+          } else if (persistValue !== null && savedState?.columnSettings) {
+            if (persistValue.find(el => el === columnIdentifier)) {
+              return true;
+            }
+
+            return false;
+          }
+
+          return colDef.columnSettings?.mode !== 'defaultFalse';
+        }
+
+        return true;
+      })
+      .map(getColumnIdentifier);
+  });
+
+  return {
+    enabledColumns,
+    setEnabledColumns: (value: string[]) => {
+      if (savedState?.columnSettings) {
+        localStorage.setItem(localStorageKey, JSON.stringify(value));
+      }
+
+      setEnabledColumns(value);
+    },
+  };
+}

package/src/components/Table/utils.ts

@@ -72,7 +72,11 @@ export function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocal
 export function isFilterableColumn<TData extends object>(
   colDef: ColumnDefinition<TData>,
 ): colDef is FilterableColumnDefinition<TData> {
-  return ('id' in colDef || 'accessorKey' in colDef) && 'headerConfigLabel' in colDef;
+  return (
+    ('id' in colDef || 'accessorKey' in colDef) &&
+    'columnSettings' in colDef &&
+    colDef.columnSettings?.mode !== 'hidden'
+  );
 }
 
 export function getColumnIdentifier<TData extends object>(colDef: ColumnDefinition<TData>): string {
@@ -86,12 +90,6 @@ export function getColumnIdentifier<TData extends object>(colDef: ColumnDefiniti
   return colDef.accessorKey as unknown as string;
 }
 
-export function prepareColumnsSettingsMap<TData extends object>(
-  columnDefinitions: ColumnDefinition<TData>[],
-): string[] {
-  return columnDefinitions.filter(isFilterableColumn).map(getColumnIdentifier);
-}
-
 const sortColumnDefinitions = (columnOrder: string[]) =>
   function sortColDefs<TData extends object>(
     colDefA: FilterableColumnDefinition<TData>,
@@ -103,13 +101,21 @@ const sortColumnDefinitions = (columnOrder: string[]) =>
     return indexItemA - indexItemB;
   };
 
+export function prepareColumnsSettingsMap<TData extends object>(
+  columnDefinitions: ColumnDefinition<TData>[],
+): string[] {
+  return columnDefinitions
+    .filter(el => isFilterableColumn(el) && el.columnSettings?.mode !== 'defaultFalse')
+    .map(getColumnIdentifier);
+}
+
 function createColumnsSettingsOption<TData extends object>(
   columnDefinition: FilterableColumnDefinition<TData>,
 ): BaseItemProps {
   return {
     id: getColumnIdentifier(columnDefinition),
     content: {
-      option: columnDefinition.headerConfigLabel as string,
+      option: columnDefinition.columnSettings?.label as string,
     },
     switch: true,
     showSwitchIcon: true,

package/src/components/types.ts

@@ -161,6 +161,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     id: string;
     filterQueryKey?: string;
     resize?: boolean;
+    columnSettings?: boolean;
   };
 }>;
 

package/src/constants.tsx

@@ -8,6 +8,13 @@ export const COLUMN_ALIGN = {
   Right: 'right',
 } as const;
 
+export const COLUMN_SETTINGS_MODE = {
+  /* Скрыто в настройках, значение всегда True */
+  Hidden: 'hidden',
+  DefaultTrue: 'defaultTrue',
+  DefaultFalse: 'defaultFalse',
+} as const;
+
 export const TEST_IDS = {
   headerSortIndicator: 'table__header__sort-indicator',
   headerRow: 'table__header-row',

package/src/helperComponents/ColumnsSettings/ColumnsSettings.tsx

@@ -21,6 +21,7 @@ export function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledCol
         mode: 'multiple',
       }}
       placement='bottom-end'
+      data-test-id='table__column-settings-droplist'
     >
       <ButtonFunction size='m' data-test-id='table__column-settings' icon={<FunctionSettingsSVG />} />
     </Droplist>

package/src/types.ts

@@ -13,13 +13,15 @@ import { ReactNode } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
 
-import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
+import { COLUMN_ALIGN, COLUMN_PIN_POSITION, COLUMN_SETTINGS_MODE } from './constants';
 import { EmptyStateProps, Except } from './helperComponents';
 
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 
 type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 
+type ColumnSettingsMode = ValueOf<typeof COLUMN_SETTINGS_MODE>;
+
 type BaseColumnDefinition<TData> = Except<
   ColumnDef<TData>,
   | 'footer'
@@ -63,17 +65,20 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
   size: number;
 };
 
-type FilterableProps =
+type FilterableProps = {
+  columnSettings?: {
+    /** Название колонки в настройках таблицы */
+    label?: string;
+    mode?: ColumnSettingsMode;
+  };
+} & (
   | {
       id: string;
-      /** Название колонки в настройках таблицы */
-      headerConfigLabel?: string;
     }
   | {
       accessorKey: string;
-      /** Название колонки в настройках таблицы */
-      headerConfigLabel?: string;
-    };
+    }
+);
 
 type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;