@snack-uikit/table 0.33.3 → 0.34.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.34.0 (2025-03-06)
+
+
+### Features
+
+* **PDS-1483:** table columns reorder by drag and columns settings ([80d43af](https://github.com/cloud-ru-tech/snack-uikit/commit/80d43af40c6acca38e2d788fcfa4fbd944818059))
+
+
+
+
+
+## 0.33.4 (2025-03-05)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.26.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/list@0.27.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.12.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
 ## 0.33.3 (2025-03-05)
 
 ### Only dependencies have been changed

package/README.md

@@ -115,6 +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> |
 | 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 строки поиска |
@@ -126,7 +127,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
-| columnFilters | `ChipChoiceRowProps<TFilters>` | - | Фильтры |
+| columnFilters | `FilterRow<TFilters>` | - | Фильтры |
 | dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
 | dataError | `boolean` | - | Флаг, показывающий что произошла ошибка запроса при пустых данных |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
@@ -178,6 +179,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
+| className | `string` | - | CSS-класс |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
@@ -185,15 +187,15 @@ 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> |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; }` | - | Параметр отвечает за общие настройки раскрывающихся строк |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | rowAutoHeight | `boolean` | - |  |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
-| className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
-| columnFilters | `ChipChoiceRowProps<TFilters>` | - | Фильтры |
+| columnFilters | `FilterRow<TFilters>` | - | Фильтры |
 | dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
 | dataError | `boolean` | - | Флаг, показывающий что произошла ошибка запроса при пустых данных |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |

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

@@ -1,7 +1,7 @@
 import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, columnsSettings: columnsSettingsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

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

@@ -18,6 +18,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Table = Table;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const modifiers_1 = require("@dnd-kit/modifiers");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -83,9 +85,10 @@ function Table(_a) {
       savedState,
       expanding,
       bulkActions: bulkActionsProp,
-      rowAutoHeight
+      rowAutoHeight,
+      columnsSettings: columnsSettingsProp
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight", "columnsSettings"]);
   const {
     setDataToStorages,
     defaultFilter
@@ -111,6 +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);
   (0, react_1.useEffect)(() => {
     setDataToStorages({
       pagination,
@@ -130,16 +134,30 @@ function Table(_a) {
     // Только для первого рендера, чтобы проинициализировать фильтр
     // eslint-disable-next-line
   }, [defaultFilter]);
-  const patchedFilter = (0, react_1.useMemo)(() => columnFilters ? Object.assign(Object.assign({}, columnFilters), {
-    value: filter,
-    onChange: setFilter,
-    visibleFilters: filterVisibility,
-    onVisibleFiltersChange: setFilterVisibility
-  }) : undefined, [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility]);
+  const patchedFilter = (0, react_1.useMemo)(() => {
+    if (!columnFilters) {
+      return undefined;
+    }
+    return Object.assign(Object.assign({}, columnFilters), {
+      open: areColumnFiltersOpen,
+      onOpenChange: setAreColumnFiltersOpen,
+      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;
+  const [enabledColumns, setEnabledColumns] = (0, react_1.useState)(() => (0, utils_3.prepareColumnsSettingsMap)(columnDefinitions));
+  const filteredColumnDefinitions = (0, react_1.useMemo)(() => columnDefinitions.filter(colDef => {
+    if ((0, utils_3.isFilterableColumn)(colDef)) {
+      return enabledColumns.includes(colDef.id);
+    }
+    return true;
+  }), [columnDefinitions, enabledColumns]);
   const tableColumns = (0, react_1.useMemo)(() => {
-    let cols = columnDefinitions;
+    let cols = filteredColumnDefinitions;
     if (enableSelection && !expanding) {
       cols = [(0, helperComponents_1.getSelectionCellColumnDef)(enableSelectPinned), ...cols];
     }
@@ -147,7 +165,25 @@ function Table(_a) {
       cols = [(0, TreeCell_1.getTreeColumnDef)(expanding.expandingColumnDefinition), ...cols];
     }
     return cols;
-  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  const {
+    columnOrder,
+    setColumnOrder,
+    sensors,
+    handleDragEnd
+  } = (0, hooks_1.useColumnOrderByDrag)(tableColumns);
+  const filterableColumns = (0, react_1.useMemo)(() => columnDefinitions.filter(utils_3.isFilterableColumn), [columnDefinitions]);
+  const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
+  const {
+    t
+  } = (0, locale_1.useLocale)('Table');
+  const columnsSettings = (0, react_1.useMemo)(() => (0, utils_3.prepareColumnsSettings)({
+    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]);
   const columnPinning = (0, react_1.useMemo)(() => {
     var _a;
     const pinningState = {
@@ -176,6 +212,7 @@ function Table(_a) {
     columns: tableColumns,
     state: {
       columnPinning,
+      columnOrder,
       globalFilter,
       rowSelection,
       sorting,
@@ -199,6 +236,7 @@ function Table(_a) {
         });
       }
     },
+    onColumnOrderChange: setColumnOrder,
     manualSorting,
     manualPagination,
     manualFiltering,
@@ -236,7 +274,7 @@ function Table(_a) {
     loadingTable
   } = (0, hooks_1.useLoadingTable)({
     pageSize: Math.min(Math.max(pageSize, 5), constants_1.DEFAULT_PAGE_SIZE),
-    columnDefinitions: tableColumns,
+    columnDefinitions: filteredColumnDefinitions,
     columnPinning
   });
   const handleOnRefresh = (0, react_1.useCallback)(() => {
@@ -350,9 +388,6 @@ function Table(_a) {
   const loadingTableRows = loadingTable.getRowModel().rows;
   const filteredTopRows = table.getState().globalFilter ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id)) : topRows;
   const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
-  const {
-    t
-  } = (0, locale_1.useLocale)('Table');
   const emptyStates = (0, helperComponents_1.useEmptyState)({
     noDataState,
     noResultsState,
@@ -369,6 +404,8 @@ 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 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)
   }, (0, utils_1.extractSupportProps)(rest), {
@@ -389,13 +426,17 @@ function Table(_a) {
         indeterminate: table.getIsSomePageRowsSelected(),
         onCheck: enableSelection ? handleOnToolbarCheck : undefined,
         outline: outline,
-        after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        after: toolbarAfter || exportSettings || showColumnsSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
           children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
             settings: exportSettings,
             columnDefinitions: columnDefinitions,
             data: data,
             topRows: filteredTopRows,
             centerRows: centerRows
+          }), showColumnsSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ColumnsSettings, {
+            columnsSettings: columnsSettings,
+            enabledColumns: enabledColumns,
+            setEnabledColumns: setEnabledColumns
           })]
         }) : undefined,
         moreActions: moreActions,
@@ -414,41 +455,59 @@ function Table(_a) {
           value: {
             updateCellMap
           },
-          children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-            value: {
-              table
-            },
-            children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
-              loading: true,
-              children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
-                rowAutoHeight: rowAutoHeight
-              }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                row: row,
-                rowAutoHeight: rowAutoHeight
-              }, row.id))]
-            }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-              children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
-                className: styles_module_scss_1.default.topRowWrapper,
-                children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+          children: (0, jsx_runtime_1.jsx)(core_1.DndContext, {
+            collisionDetection: core_1.closestCenter,
+            modifiers: [modifiers_1.restrictToHorizontalAxis],
+            onDragEnd: handleDragEnd,
+            sensors: sensors,
+            children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
+              value: {
+                table
+              },
+              children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+                loading: true,
+                children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
+                  rowAutoHeight: rowAutoHeight,
+                  columnOrder: columnOrder
+                }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row,
+                  rowAutoHeight: rowAutoHeight,
+                  columnOrder: columnOrder
+                }, row.id))]
+              }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+                children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
+                  rowAutoHeight: rowAutoHeight,
+                  columnOrder: columnOrder,
+                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                }) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
+                  className: styles_module_scss_1.default.topRowWrapper,
+                  children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                    row: row,
+                    onRowClick: onRowClick,
+                    rowAutoHeight: rowAutoHeight,
+                    columnOrder: columnOrder,
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                  }, row.id))
+                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   onRowClick: onRowClick,
-                  rowAutoHeight: rowAutoHeight
-                }, row.id))
-              }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                row: row,
-                onRowClick: onRowClick,
-                rowAutoHeight: rowAutoHeight
-              }, row.id)), data.length > 0 && infiniteLoading && loading && !dataError && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
-                loading: true,
-                children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                  row: row
-                }, row.id))
-              }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
-                emptyStates: emptyStates,
-                dataError: dataError,
-                dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
-                tableRowsLength: tableRows.length + filteredTopRows.length
-              })]
+                  rowAutoHeight: rowAutoHeight,
+                  columnOrder: columnOrder,
+                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                }, row.id)), data.length > 0 && infiniteLoading && loading && !dataError && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
+                  loading: true,
+                  children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                    row: row,
+                    columnOrder: columnOrder,
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                  }, row.id))
+                }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                  emptyStates: emptyStates,
+                  dataError: dataError,
+                  dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
+                  tableRowsLength: tableRows.length + filteredTopRows.length
+                })]
+              })
             })
           })
         })

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

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

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

@@ -23,4 +23,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./useLoadingTable"), exports);
-__exportStar(require("./useStateControl"), exports);
+__exportStar(require("./useStateControl"), exports);
+__exportStar(require("./useColumnOrderByDrag"), exports);

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnOrderByDrag = useColumnOrderByDrag;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+function prepareInitialState(tableColumns) {
+  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(c => c.id);
+}
+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));
+  const handleDragEnd = (0, react_1.useCallback)(_ref => {
+    let {
+      active,
+      over
+    } = _ref;
+    if (!active || !over) {
+      return;
+    }
+    const activeId = active.id.toString();
+    const overId = over.id.toString();
+    if (activeId === overId) {
+      return;
+    }
+    if (!columnOrder.includes(overId)) {
+      return;
+    }
+    setColumnOrder(columnOrder => {
+      const oldIndex = columnOrder.indexOf(activeId);
+      const newIndex = columnOrder.indexOf(overId);
+      return (0, sortable_1.arrayMove)(columnOrder, oldIndex, newIndex);
+    });
+  }, [columnOrder]);
+  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,
+    setColumnOrder,
+    handleDragEnd,
+    sensors
+  };
+}

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

@@ -1,3 +1,6 @@
+import { GroupSelectItemProps } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
+import { ColumnDefinition, FilterableColumnDefinition } from '../../types';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -14,4 +17,14 @@ type SaveStateToLocalStorageProps = {
     size: string;
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
+export declare function isFilterableColumn<TData extends object>(colDef: ColumnDefinition<TData>): colDef is FilterableColumnDefinition<TData>;
+export declare function prepareColumnsSettingsMap<TData extends object>(columnDefinitions: ColumnDefinition<TData>[]): string[];
+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 {};

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

@@ -7,6 +7,9 @@ exports.getCurrentlyConfiguredHeaderWidth = getCurrentlyConfiguredHeaderWidth;
 exports.getColumnStyleVars = getColumnStyleVars;
 exports.getInitColumnSizeFromLocalStorage = getInitColumnSizeFromLocalStorage;
 exports.saveStateToLocalStorage = saveStateToLocalStorage;
+exports.isFilterableColumn = isFilterableColumn;
+exports.prepareColumnsSettingsMap = prepareColumnsSettingsMap;
+exports.prepareColumnsSettings = prepareColumnsSettings;
 const utils_1 = require("@snack-uikit/utils");
 function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
@@ -56,4 +59,72 @@ function saveStateToLocalStorage(_ref2) {
   localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, savedStateFromStorage || {}), {
     resizeState: newResizeState
   })));
+}
+function isFilterableColumn(colDef) {
+  return 'id' in colDef && 'headerConfigLabel' in colDef;
+}
+function prepareColumnsSettingsMap(columnDefinitions) {
+  return columnDefinitions.filter(isFilterableColumn).map(colDef => colDef.id);
+}
+const sortColumnDefinitions = columnOrder => function sortColDefs(colDefA, colDefB) {
+  const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === colDefA.id);
+  const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === colDefB.id);
+  return indexItemA - indexItemB;
+};
+function createColumnsSettingsOption(columnDefinition) {
+  return {
+    id: columnDefinition.id,
+    content: {
+      option: columnDefinition.headerConfigLabel
+    },
+    switch: true,
+    showSwitchIcon: true
+  };
+}
+function prepareColumnsSettings(_ref3) {
+  let {
+    columnDefinitions,
+    columnOrder,
+    columnsSettingsHeader,
+    areAllColumnsEnabled,
+    t
+  } = _ref3;
+  const groupedItems = columnDefinitions.filter(isFilterableColumn).sort(sortColumnDefinitions(columnOrder)).reduce((accSettings, colDef) => {
+    const item = createColumnsSettingsOption(colDef);
+    switch (colDef.pinned) {
+      case 'left':
+        accSettings.pinTop.push(item);
+        break;
+      case 'right':
+        accSettings.pinBottom.push(item);
+        break;
+      default:
+        accSettings.unpinned.push(item);
+    }
+    return accSettings;
+  }, {
+    pinTop: [],
+    unpinned: [],
+    pinBottom: []
+  });
+  return [{
+    divider: false,
+    items: [{
+      divider: false,
+      items: groupedItems.pinTop,
+      type: 'group'
+    }, {
+      divider: true,
+      items: groupedItems.unpinned,
+      type: 'group'
+    }, {
+      divider: true,
+      items: groupedItems.pinBottom,
+      type: 'group'
+    }],
+    selectButtonLabel: areAllColumnsEnabled ? t('groupSelectButton.hide') : t('groupSelectButton.show'),
+    label: columnsSettingsHeader || 'Display settings',
+    mode: 'primary',
+    type: 'group-select'
+  }];
 }

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

@@ -1,7 +1,7 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
-import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
-import { ToolbarProps } from '@snack-uikit/toolbar';
+import { FiltersState } from '@snack-uikit/chips';
+import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
@@ -30,6 +30,15 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         state?: SortingState;
         onChange?(state: SortingState): void;
     };
+    /** Параметры отвечают за настройки колонок <br>
+     *  <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br>
+     *  <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br>
+     *  <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br>
+     *  */
+    columnsSettings?: {
+        enableDrag?: boolean;
+        headerLabel?: string;
+    };
     /** Параметр отвечает за общие настройки раскрывающихся строк*/
     expanding?: {
         /** Метод отвечает за получение дочерних строк*/
@@ -80,7 +89,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
-    columnFilters?: ChipChoiceRowProps<TFilters>;
+    columnFilters?: FilterRow<TFilters>;
     /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
     dataFiltered?: boolean;
     /** Флаг, показывающий что произошла ошибка запроса при пустых данных */

package/dist/cjs/constants.d.ts

@@ -38,3 +38,4 @@ 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: {};
+export declare const DEFAULT_COLUMNS: string[];

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
 exports.COLUMN_PIN_POSITION = {
   Left: 'left',
   Right: 'right'
@@ -43,4 +43,5 @@ exports.SORT_FN = {
 exports.DEFAULT_PAGE_SIZE = 10;
 exports.DEFAULT_SORTING = [];
 exports.DEFAULT_FILTER_VISIBILITY = [];
-exports.DEFAULT_ROW_SELECTION = {};
+exports.DEFAULT_ROW_SELECTION = {};
+exports.DEFAULT_COLUMNS = ['snack_predefined_statusColumn', 'selectionCell', 'rowActions'];

package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.d.ts

@@ -3,6 +3,7 @@ import { CellProps } from '../Cell';
 type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
     cell: TableCell<TData, unknown>;
     rowAutoHeight?: boolean;
+    isDraggable?: boolean;
 };
-export declare function BodyCell<TData>({ cell, className, rowAutoHeight, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyCell<TData>({ cell, className, rowAutoHeight, isDraggable, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BodyCell = BodyCell;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../../constants");
@@ -28,12 +29,21 @@ function BodyCell(_a) {
   var {
       cell,
       className,
-      rowAutoHeight
+      rowAutoHeight,
+      isDraggable
     } = _a,
-    props = __rest(_a, ["cell", "className", "rowAutoHeight"]);
+    props = __rest(_a, ["cell", "className", "rowAutoHeight", "isDraggable"]);
   const columnDef = cell.column.columnDef;
-  const style = (0, hooks_1.useCellSizes)(cell);
+  const style = (0, hooks_1.useCellSizes)(cell, {
+    isDraggable
+  });
+  const {
+    setNodeRef
+  } = (0, sortable_1.useSortable)({
+    id: cell.column.id
+  });
   return (0, jsx_runtime_1.jsx)(Cell_1.Cell, Object.assign({}, props, {
+    ref: setNodeRef,
     style: style,
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableBodyCell, className, columnDef.cellClassName),
     "data-row-auto-height": rowAutoHeight || undefined,

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.d.ts

@@ -5,6 +5,7 @@ type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' |
     header: Header<TData, unknown>;
     pinPosition?: ColumnPinPosition;
     rowAutoHeight?: boolean;
+    isDraggable?: boolean;
 };
-export declare function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeight }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeight, isDraggable, }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};