@snack-uikit/table 0.34.0 → 0.34.1

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.34.1 (2025-03-07)
+
+
+### Bug Fixes
+
+* **PDS-1483:** translation and initial column filters open state improvements for table ([d4ef555](https://github.com/cloud-ru-tech/snack-uikit/commit/d4ef5552a9a7883b01cdabcb96a22f1ee08d8d29))
+
+
+
+
+
 # 0.34.0 (2025-03-06)
 
 

package/README.md

@@ -115,7 +115,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | copyPinnedRows | `boolean` | - | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
-| columnsSettings | `{ enableDrag?: boolean; headerLabel?: string; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br> <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br> |
+| columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; }` | - | Параметр отвечает за общие настройки раскрывающихся строк |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
@@ -127,7 +127,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
-| columnFilters | `FilterRow<TFilters>` | - | Фильтры |
+| columnFilters | `Omit<ChipChoiceRowProps<TFilters>, "size" \| "data-test-id"> & { open?: boolean; onOpenChange?(isOpen: boolean): void; } & { initialOpen?: boolean; }` | - | Фильтры |
 | dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
 | dataError | `boolean` | - | Флаг, показывающий что произошла ошибка запроса при пустых данных |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
@@ -187,7 +187,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | copyPinnedRows | `boolean` | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
-| columnsSettings | `{ enableDrag?: boolean; headerLabel?: string; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br> <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br> |
+| columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | 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` | - | Включить нечеткий поиск |
@@ -195,7 +195,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | loading | `boolean` | - | Состояние загрузки |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
-| columnFilters | `FilterRow<TFilters>` | - | Фильтры |
+| columnFilters | `Omit<ChipChoiceRowProps<TFilters>, "size" \| "data-test-id"> & { open?: boolean; onOpenChange?(isOpen: boolean): void; } & { initialOpen?: boolean; }` | - | Фильтры |
 | dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
 | dataError | `boolean` | - | Флаг, показывающий что произошла ошибка запроса при пустых данных |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |

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

@@ -114,7 +114,7 @@ function Table(_a) {
     initialState: [],
     onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onVisibleFiltersChange
   }, constants_1.DEFAULT_FILTER_VISIBILITY);
-  const [areColumnFiltersOpen, setAreColumnFiltersOpen] = (0, react_1.useState)(true);
+  const [areColumnFiltersOpen, setAreColumnFiltersOpen] = (0, react_1.useState)(() => (0, utils_3.getInitialColumnsOpenValue)(columnFilters));
   (0, react_1.useEffect)(() => {
     setDataToStorages({
       pagination,
@@ -138,9 +138,10 @@ function Table(_a) {
     if (!columnFilters) {
       return undefined;
     }
-    return Object.assign(Object.assign({}, columnFilters), {
+    return Object.assign(Object.assign({
       open: areColumnFiltersOpen,
-      onOpenChange: setAreColumnFiltersOpen,
+      onOpenChange: setAreColumnFiltersOpen
+    }, columnFilters), {
       value: filter,
       onChange: setFilter,
       visibleFilters: filterVisibility,
@@ -181,9 +182,8 @@ function Table(_a) {
     columnDefinitions,
     columnOrder,
     areAllColumnsEnabled,
-    columnsSettingsHeader: columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.headerLabel,
     t
-  }), [areAllColumnsEnabled, columnDefinitions, columnOrder, columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.headerLabel, t]);
+  }), [areAllColumnsEnabled, columnDefinitions, columnOrder, t]);
   const columnPinning = (0, react_1.useMemo)(() => {
     var _a;
     const pinningState = {
@@ -404,7 +404,7 @@ function Table(_a) {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
-  const showColumnsSettings = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.headerLabel);
+  const showColumnsSettings = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
   const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)

package/dist/cjs/components/Table/utils.d.ts

@@ -1,6 +1,7 @@
 import { GroupSelectItemProps } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 import { ColumnDefinition, FilterableColumnDefinition } from '../../types';
+import { TableProps } from '../types';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -23,8 +24,8 @@ type PrepareColumnsSettingsProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     columnOrder: string[];
     areAllColumnsEnabled: boolean;
-    columnsSettingsHeader?: string;
     t: ReturnType<typeof useLocale<'Table'>>['t'];
 };
-export declare function prepareColumnsSettings<TData extends object>({ columnDefinitions, columnOrder, columnsSettingsHeader, areAllColumnsEnabled, t, }: PrepareColumnsSettingsProps<TData>): [GroupSelectItemProps];
+export declare function prepareColumnsSettings<TData extends object>({ columnDefinitions, columnOrder, areAllColumnsEnabled, t, }: PrepareColumnsSettingsProps<TData>): [GroupSelectItemProps];
+export declare function getInitialColumnsOpenValue<TData extends object>(columnFilters: TableProps<TData>['columnFilters']): boolean;
 export {};

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

@@ -10,6 +10,7 @@ exports.saveStateToLocalStorage = saveStateToLocalStorage;
 exports.isFilterableColumn = isFilterableColumn;
 exports.prepareColumnsSettingsMap = prepareColumnsSettingsMap;
 exports.prepareColumnsSettings = prepareColumnsSettings;
+exports.getInitialColumnsOpenValue = getInitialColumnsOpenValue;
 const utils_1 = require("@snack-uikit/utils");
 function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
@@ -85,7 +86,6 @@ function prepareColumnsSettings(_ref3) {
   let {
     columnDefinitions,
     columnOrder,
-    columnsSettingsHeader,
     areAllColumnsEnabled,
     t
   } = _ref3;
@@ -123,8 +123,14 @@ function prepareColumnsSettings(_ref3) {
       type: 'group'
     }],
     selectButtonLabel: areAllColumnsEnabled ? t('groupSelectButton.hide') : t('groupSelectButton.show'),
-    label: columnsSettingsHeader || 'Display settings',
+    label: t('settingsHeaderLabel'),
     mode: 'primary',
     type: 'group-select'
   }];
+}
+function getInitialColumnsOpenValue(columnFilters) {
+  if (!columnFilters) {
+    return false;
+  }
+  return 'initialOpen' in columnFilters && typeof columnFilters.initialOpen === 'boolean' ? columnFilters.initialOpen : true;
 }

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

@@ -32,12 +32,11 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     };
     /** Параметры отвечают за настройки колонок <br>
      *  <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br>
-     *  <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br>
-     *  <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br>
+     *  <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br>
      *  */
     columnsSettings?: {
         enableDrag?: boolean;
-        headerLabel?: string;
+        enableSettingsMenu?: boolean;
     };
     /** Параметр отвечает за общие настройки раскрывающихся строк*/
     expanding?: {
@@ -89,7 +88,9 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
-    columnFilters?: FilterRow<TFilters>;
+    columnFilters?: FilterRow<TFilters> & {
+        initialOpen?: boolean;
+    };
     /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
     dataFiltered?: boolean;
     /** Флаг, показывающий что произошла ошибка запроса при пустых данных */

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

@@ -30,7 +30,7 @@ import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks'
 import { usePageReset } from './hooks/usePageReset';
 import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.css';
-import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, isFilterableColumn, prepareColumnsSettings, prepareColumnsSettingsMap, saveStateToLocalStorage, } from './utils';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getInitialColumnsOpenValue, isFilterableColumn, prepareColumnsSettings, prepareColumnsSettingsMap, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
     var { data, rowPinning = {
@@ -58,7 +58,7 @@ export function Table(_a) {
         initialState: [],
         onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onVisibleFiltersChange,
     }, DEFAULT_FILTER_VISIBILITY);
-    const [areColumnFiltersOpen, setAreColumnFiltersOpen] = useState(true);
+    const [areColumnFiltersOpen, setAreColumnFiltersOpen] = useState(() => getInitialColumnsOpenValue(columnFilters));
     useEffect(() => {
         setDataToStorages({ pagination, sorting, filter, search: globalFilter || '' });
     }, [pagination, sorting, filter, setDataToStorages, globalFilter]);
@@ -77,7 +77,7 @@ export function Table(_a) {
         if (!columnFilters) {
             return undefined;
         }
-        return Object.assign(Object.assign({}, columnFilters), { open: areColumnFiltersOpen, onOpenChange: setAreColumnFiltersOpen, value: filter, onChange: setFilter, visibleFilters: filterVisibility, onVisibleFiltersChange: setFilterVisibility });
+        return Object.assign(Object.assign({ open: areColumnFiltersOpen, onOpenChange: setAreColumnFiltersOpen }, columnFilters), { value: filter, onChange: setFilter, visibleFilters: filterVisibility, onVisibleFiltersChange: setFilterVisibility });
     }, [columnFilters, areColumnFiltersOpen, filter, setFilter, filterVisibility, setFilterVisibility]);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     const manualPagination = infiniteLoading || manualPaginationProp;
@@ -106,9 +106,8 @@ export function Table(_a) {
         columnDefinitions,
         columnOrder,
         areAllColumnsEnabled,
-        columnsSettingsHeader: columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.headerLabel,
         t,
-    }), [areAllColumnsEnabled, columnDefinitions, columnOrder, columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.headerLabel, t]);
+    }), [areAllColumnsEnabled, columnDefinitions, columnOrder, t]);
     const columnPinning = useMemo(() => {
         var _a;
         const pinningState = { left: [], right: [] };
@@ -298,7 +297,7 @@ export function Table(_a) {
     });
     const { updateCellMap } = useCellAutoResizeController(table);
     const showToolbar = !suppressToolbar;
-    const showColumnsSettings = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.headerLabel);
+    const showColumnsSettings = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
     const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
     return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
                         ? undefined

package/dist/esm/components/Table/utils.d.ts

@@ -1,6 +1,7 @@
 import { GroupSelectItemProps } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 import { ColumnDefinition, FilterableColumnDefinition } from '../../types';
+import { TableProps } from '../types';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -23,8 +24,8 @@ type PrepareColumnsSettingsProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     columnOrder: string[];
     areAllColumnsEnabled: boolean;
-    columnsSettingsHeader?: string;
     t: ReturnType<typeof useLocale<'Table'>>['t'];
 };
-export declare function prepareColumnsSettings<TData extends object>({ columnDefinitions, columnOrder, columnsSettingsHeader, areAllColumnsEnabled, t, }: PrepareColumnsSettingsProps<TData>): [GroupSelectItemProps];
+export declare function prepareColumnsSettings<TData extends object>({ columnDefinitions, columnOrder, areAllColumnsEnabled, t, }: PrepareColumnsSettingsProps<TData>): [GroupSelectItemProps];
+export declare function getInitialColumnsOpenValue<TData extends object>(columnFilters: TableProps<TData>['columnFilters']): boolean;
 export {};

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

@@ -56,7 +56,7 @@ function createColumnsSettingsOption(columnDefinition) {
         showSwitchIcon: true,
     };
 }
-export function prepareColumnsSettings({ columnDefinitions, columnOrder, columnsSettingsHeader, areAllColumnsEnabled, t, }) {
+export function prepareColumnsSettings({ columnDefinitions, columnOrder, areAllColumnsEnabled, t, }) {
     const groupedItems = columnDefinitions
         .filter(isFilterableColumn)
         .sort(sortColumnDefinitions(columnOrder))
@@ -99,9 +99,17 @@ export function prepareColumnsSettings({ columnDefinitions, columnOrder, columns
                 },
             ],
             selectButtonLabel: areAllColumnsEnabled ? t('groupSelectButton.hide') : t('groupSelectButton.show'),
-            label: columnsSettingsHeader || 'Display settings',
+            label: t('settingsHeaderLabel'),
             mode: 'primary',
             type: 'group-select',
         },
     ];
 }
+export function getInitialColumnsOpenValue(columnFilters) {
+    if (!columnFilters) {
+        return false;
+    }
+    return 'initialOpen' in columnFilters && typeof columnFilters.initialOpen === 'boolean'
+        ? columnFilters.initialOpen
+        : true;
+}

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

@@ -32,12 +32,11 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     };
     /** Параметры отвечают за настройки колонок <br>
      *  <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br>
-     *  <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br>
-     *  <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br>
+     *  <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br>
      *  */
     columnsSettings?: {
         enableDrag?: boolean;
-        headerLabel?: string;
+        enableSettingsMenu?: boolean;
     };
     /** Параметр отвечает за общие настройки раскрывающихся строк*/
     expanding?: {
@@ -89,7 +88,9 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
-    columnFilters?: FilterRow<TFilters>;
+    columnFilters?: FilterRow<TFilters> & {
+        initialOpen?: boolean;
+    };
     /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
     dataFiltered?: boolean;
     /** Флаг, показывающий что произошла ошибка запроса при пустых данных */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "cafb29b74a6ac4d38594e9d46599617925165935"
+  "gitHead": "d2606dfcde2dbcc674adc2d7765c3f1eee55aa7a"
 }

package/src/components/Table/Table.tsx

@@ -60,6 +60,7 @@ import {
   getColumnStyleVars,
   getCurrentlyConfiguredHeaderWidth,
   getInitColumnSizeFromLocalStorage,
+  getInitialColumnsOpenValue,
   isFilterableColumn,
   prepareColumnsSettings,
   prepareColumnsSettingsMap,
@@ -157,7 +158,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     DEFAULT_FILTER_VISIBILITY,
   );
 
-  const [areColumnFiltersOpen, setAreColumnFiltersOpen] = useState<boolean>(true);
+  const [areColumnFiltersOpen, setAreColumnFiltersOpen] = useState<boolean>(() =>
+    getInitialColumnsOpenValue(columnFilters),
+  );
 
   useEffect(() => {
     setDataToStorages({ pagination, sorting, filter, search: globalFilter || '' });
@@ -181,9 +184,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     }
 
     return {
-      ...columnFilters,
       open: areColumnFiltersOpen,
       onOpenChange: setAreColumnFiltersOpen,
+      ...columnFilters,
       value: filter,
       onChange: setFilter,
       visibleFilters: filterVisibility,
@@ -233,10 +236,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         columnDefinitions,
         columnOrder,
         areAllColumnsEnabled,
-        columnsSettingsHeader: columnsSettingsProp?.headerLabel,
         t,
       }),
-    [areAllColumnsEnabled, columnDefinitions, columnOrder, columnsSettingsProp?.headerLabel, t],
+    [areAllColumnsEnabled, columnDefinitions, columnOrder, t],
   );
 
   const columnPinning = useMemo(() => {
@@ -469,7 +471,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const { updateCellMap } = useCellAutoResizeController(table);
 
   const showToolbar = !suppressToolbar;
-  const showColumnsSettings = Boolean(columnsSettingsProp?.headerLabel);
+  const showColumnsSettings = Boolean(columnsSettingsProp?.enableSettingsMenu);
   const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp?.enableDrag);
 
   return (

package/src/components/Table/utils.ts

@@ -3,6 +3,7 @@ import { useLocale } from '@snack-uikit/locale';
 import { isBrowser } from '@snack-uikit/utils';
 
 import { ColumnDefinition, FilterableColumnDefinition } from '../../types';
+import { TableProps } from '../types';
 
 export function getCurrentlyConfiguredHeaderWidth(id: string): number {
   if (isBrowser()) {
@@ -114,14 +115,12 @@ type PrepareColumnsSettingsProps<TData extends object> = {
   columnDefinitions: ColumnDefinition<TData>[];
   columnOrder: string[];
   areAllColumnsEnabled: boolean;
-  columnsSettingsHeader?: string;
   t: ReturnType<typeof useLocale<'Table'>>['t'];
 };
 
 export function prepareColumnsSettings<TData extends object>({
   columnDefinitions,
   columnOrder,
-  columnsSettingsHeader,
   areAllColumnsEnabled,
   t,
 }: PrepareColumnsSettingsProps<TData>): [GroupSelectItemProps] {
@@ -175,9 +174,19 @@ export function prepareColumnsSettings<TData extends object>({
         },
       ],
       selectButtonLabel: areAllColumnsEnabled ? t('groupSelectButton.hide') : t('groupSelectButton.show'),
-      label: columnsSettingsHeader || 'Display settings',
+      label: t('settingsHeaderLabel'),
       mode: 'primary',
       type: 'group-select',
     },
   ];
 }
+
+export function getInitialColumnsOpenValue<TData extends object>(columnFilters: TableProps<TData>['columnFilters']) {
+  if (!columnFilters) {
+    return false;
+  }
+
+  return 'initialOpen' in columnFilters && typeof columnFilters.initialOpen === 'boolean'
+    ? columnFilters.initialOpen
+    : true;
+}

package/src/components/types.ts

@@ -44,12 +44,11 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
 
   /** Параметры отвечают за настройки колонок <br>
    *  <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br>
-   *  <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br>
-   *  <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br>
+   *  <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br>
    *  */
   columnsSettings?: {
     enableDrag?: boolean;
-    headerLabel?: string;
+    enableSettingsMenu?: boolean;
   };
 
   /** Параметр отвечает за общие настройки раскрывающихся строк*/
@@ -111,7 +110,9 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
   outline?: boolean;
 
   /** Фильтры */
-  columnFilters?: FilterRow<TFilters>;
+  columnFilters?: FilterRow<TFilters> & {
+    initialOpen?: boolean;
+  };
 
   /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
   dataFiltered?: boolean;