@snack-uikit/table 0.33.4 → 0.34.0

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

@@ -10,9 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import cn from 'classnames';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
@@ -21,19 +23,19 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
 import { DEFAULT_FILTER_VISIBILITY, DEFAULT_PAGE_SIZE, DEFAULT_ROW_SELECTION, DEFAULT_SORTING, TEST_IDS, } from '../../constants';
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
-import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
+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 { useLoadingTable, useStateControl } from './hooks';
+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, saveStateToLocalStorage, } from './utils';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, isFilterableColumn, prepareColumnsSettings, prepareColumnsSettingsMap, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, 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", "columnsSettings"]);
     const { setDataToStorages, defaultFilter } = useSaveTableSettings({
         options: savedState,
         filterSettings: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters,
@@ -56,6 +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);
     useEffect(() => {
         setDataToStorages({ pagination, sorting, filter, search: globalFilter || '' });
     }, [pagination, sorting, filter, setDataToStorages, globalFilter]);
@@ -70,12 +73,23 @@ export function Table(_a) {
         // Только для первого рендера, чтобы проинициализировать фильтр
         // eslint-disable-next-line
     }, [defaultFilter]);
-    const patchedFilter = useMemo(() => columnFilters
-        ? Object.assign(Object.assign({}, columnFilters), { value: filter, onChange: setFilter, visibleFilters: filterVisibility, onVisibleFiltersChange: setFilterVisibility }) : undefined, [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility]);
+    const patchedFilter = 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] = useState(() => prepareColumnsSettingsMap(columnDefinitions));
+    const filteredColumnDefinitions = useMemo(() => columnDefinitions.filter(colDef => {
+        if (isFilterableColumn(colDef)) {
+            return enabledColumns.includes(colDef.id);
+        }
+        return true;
+    }), [columnDefinitions, enabledColumns]);
     const tableColumns = useMemo(() => {
-        let cols = columnDefinitions;
+        let cols = filteredColumnDefinitions;
         if (enableSelection && !expanding) {
             cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
         }
@@ -83,7 +97,18 @@ export function Table(_a) {
             cols = [getTreeColumnDef(expanding.expandingColumnDefinition), ...cols];
         }
         return cols;
-    }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+    }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
+    const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
+    const filterableColumns = useMemo(() => columnDefinitions.filter(isFilterableColumn), [columnDefinitions]);
+    const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
+    const { t } = useLocale('Table');
+    const columnsSettings = useMemo(() => 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 = useMemo(() => {
         var _a;
         const pinningState = { left: [], right: [] };
@@ -110,6 +135,7 @@ export function Table(_a) {
         columns: tableColumns,
         state: {
             columnPinning,
+            columnOrder,
             globalFilter,
             rowSelection,
             sorting,
@@ -128,6 +154,7 @@ export function Table(_a) {
                 return _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 });
             },
         },
+        onColumnOrderChange: setColumnOrder,
         manualSorting,
         manualPagination,
         manualFiltering,
@@ -163,7 +190,7 @@ export function Table(_a) {
     }, [expanding, table]);
     const { loadingTable } = useLoadingTable({
         pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
-        columnDefinitions: tableColumns,
+        columnDefinitions: filteredColumnDefinitions,
         columnPinning,
     });
     const handleOnRefresh = useCallback(() => {
@@ -261,7 +288,6 @@ export function Table(_a) {
         ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
         : topRows;
     const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
-    const { t } = useLocale('Table');
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     usePageReset({
         manualPagination,
@@ -272,6 +298,8 @@ export function Table(_a) {
     });
     const { updateCellMap } = 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 (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
                         ? undefined
                         : {
@@ -279,7 +307,7 @@ export function Table(_a) {
                             onChange: onGlobalFilterChange,
                             loading: search === null || search === void 0 ? void 0 : search.loading,
                             placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                        }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
+                        }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || showColumnsSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), showColumnsSettings && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

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

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

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

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

@@ -0,0 +1,39 @@
+import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useCallback, useState } from '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
+    },
+};
+export function useColumnOrderByDrag(tableColumns) {
+    const [columnOrder, setColumnOrder] = useState(() => prepareInitialState(tableColumns));
+    const handleDragEnd = useCallback(({ active, over }) => {
+        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 arrayMove(columnOrder, oldIndex, newIndex);
+        });
+    }, [columnOrder]);
+    const sensors = useSensors(useSensor(MouseSensor, draggingOptions), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+    return {
+        columnOrder,
+        setColumnOrder,
+        handleDragEnd,
+        sensors,
+    };
+}

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

@@ -35,3 +35,73 @@ export function saveStateToLocalStorage({ id, columnId, size }) {
     newResizeState[`${RESIZED_KEY}-${columnId}`] = size;
     localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, (savedStateFromStorage || {})), { resizeState: newResizeState })));
 }
+export function isFilterableColumn(colDef) {
+    return 'id' in colDef && 'headerConfigLabel' in colDef;
+}
+export 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,
+    };
+}
+export function prepareColumnsSettings({ columnDefinitions, columnOrder, columnsSettingsHeader, areAllColumnsEnabled, t, }) {
+    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/esm/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/esm/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/esm/constants.js

@@ -38,3 +38,4 @@ export const DEFAULT_PAGE_SIZE = 10;
 export const DEFAULT_SORTING = [];
 export const DEFAULT_FILTER_VISIBILITY = [];
 export const DEFAULT_ROW_SELECTION = {};
+export const DEFAULT_COLUMNS = ['snack_predefined_statusColumn', 'selectionCell', 'rowActions'];

package/dist/esm/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/esm/helperComponents/Cells/BodyCell/BodyCell.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
 import { flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
 import { TEST_IDS } from '../../../constants';
@@ -17,8 +18,11 @@ import { useCellSizes } from '../../hooks';
 import { Cell } from '../Cell';
 import styles from './styles.module.css';
 export function BodyCell(_a) {
-    var { cell, className, rowAutoHeight } = _a, props = __rest(_a, ["cell", "className", "rowAutoHeight"]);
+    var { cell, className, rowAutoHeight, isDraggable } = _a, props = __rest(_a, ["cell", "className", "rowAutoHeight", "isDraggable"]);
     const columnDef = cell.column.columnDef;
-    const style = useCellSizes(cell);
-    return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-row-auto-height": rowAutoHeight || undefined, "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
+    const style = useCellSizes(cell, { isDraggable });
+    const { setNodeRef } = useSortable({
+        id: cell.column.id,
+    });
+    return (_jsx(Cell, Object.assign({}, props, { ref: setNodeRef, style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-row-auto-height": rowAutoHeight || undefined, "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
 }

package/dist/esm/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 {};

package/dist/esm/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
 import { flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
 import { useRef } from 'react';
 import { TruncateString } from '@snack-uikit/truncate-string';
-import { TEST_IDS } from '../../../constants';
+import { DEFAULT_COLUMNS, TEST_IDS } from '../../../constants';
 import { useCellSizes } from '../../hooks';
 import { Cell } from '../Cell';
 import { getSortingIcon } from './helpers';
 import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.css';
-export function HeaderCell({ header, pinPosition, className, rowAutoHeight }) {
+export function HeaderCell({ header, pinPosition, className, rowAutoHeight, isDraggable, }) {
     const cellRef = useRef(null);
     const isSortable = header.column.getCanSort();
     const isResizable = header.column.getCanResize();
@@ -19,12 +20,21 @@ export function HeaderCell({ header, pinPosition, className, rowAutoHeight }) {
     const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
     const isSomeColumnResizing = columnSizingInfo.isResizingColumn;
     const columnDef = header.column.columnDef;
-    const style = useCellSizes(header);
+    const style = useCellSizes(header, { isDraggable });
+    const { attributes, listeners, setNodeRef, isDragging } = useSortable({
+        id: header.column.id,
+    });
     const sortingHandler = (e) => {
         var _a;
         if (isSomeColumnResizing)
             return;
         return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
     };
-    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, "data-row-auto-height": rowAutoHeight || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+    const isAvailableForDrag = !DEFAULT_COLUMNS.includes(header.column.id);
+    const dragAttributes = isAvailableForDrag ? attributes : {};
+    const listenersAttributes = isAvailableForDrag ? listeners : {};
+    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-draggable": isDraggable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, "data-row-auto-height": rowAutoHeight || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: element => {
+            setNodeRef(element);
+            return cellRef;
+        }, children: [_jsx("div", Object.assign({ className: styles.tableHeaderCellDragWrapper, "data-dragging": isDragging || undefined }, dragAttributes, listenersAttributes, { children: _jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }) })), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/esm/helperComponents/Cells/HeaderCell/styles.module.css

@@ -71,6 +71,9 @@
 .tableHeaderCell:hover .tableHeaderResizeHandle:not([data-resizing]){
   opacity:1;
 }
+.tableHeaderCell[data-draggable]{
+  cursor:grab;
+}
 .tableHeaderCell[data-sortable]{
   cursor:pointer;
 }
@@ -111,6 +114,13 @@
   padding-bottom:0;
 }
 
+.tableHeaderCellDragWrapper{
+  width:100%;
+}
+.tableHeaderCellDragWrapper[data-dragging]:active{
+  cursor:grabbing;
+}
+
 .tableHeaderCellMain{
   overflow:auto;
   display:flex;

package/dist/esm/helperComponents/ColumnsSettings/ColumnsSettings.d.ts

@@ -0,0 +1,8 @@
+import { GroupSelectItemProps } from '@snack-uikit/list';
+type ColumnsSettingsProps = {
+    enabledColumns: string[];
+    setEnabledColumns(enabledColumns: string[]): void;
+    columnsSettings: [GroupSelectItemProps];
+};
+export declare function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }: ColumnsSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonFunction } from '@snack-uikit/button';
+import { FunctionSettingsSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import styles from './styles.module.css';
+export function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }) {
+    return (_jsx(Droplist, { className: styles.columnsSettings, items: columnsSettings, selection: {
+            value: enabledColumns,
+            onChange: setEnabledColumns,
+            mode: 'multiple',
+        }, placement: 'bottom-end', children: _jsx(ButtonFunction, { size: 'm', "data-test-id": 'table__column-settings', icon: _jsx(FunctionSettingsSVG, {}) }) }));
+}

package/dist/esm/helperComponents/ColumnsSettings/index.d.ts

@@ -0,0 +1 @@
+export * from './ColumnsSettings';

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

@@ -0,0 +1 @@
+export * from './ColumnsSettings';

package/dist/esm/helperComponents/ColumnsSettings/styles.module.css

@@ -0,0 +1,3 @@
+.columnsSettings{
+  min-width:256px;
+}

package/dist/esm/helperComponents/Rows/BodyRow.d.ts

@@ -1,5 +1,6 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
+import { ColumnOrder } from '../../types';
 import { RowProps } from './Row';
 export type RowInfo<TData> = {
     id: string;
@@ -11,5 +12,7 @@ export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInf
 export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
+    columnOrder: ColumnOrder;
+    enableColumnsOrderSortByDrag?: boolean;
 };
-export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Rows/BodyRow.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { useState } from 'react';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
@@ -7,8 +8,8 @@ import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function BodyRow({ row, onRowClick, rowAutoHeight }) {
-    const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
+export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }) {
+    const { leftPinned, rightPinned, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
     const handleRowClick = (e) => {
@@ -23,5 +24,5 @@ export function BodyRow({ row, onRowClick, rowAutoHeight }) {
     };
     return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() ||
                 (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded()) ||
-                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) }))] }) }));
+                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
 }

package/dist/esm/helperComponents/Rows/HeaderRow.d.ts

@@ -1,2 +1,8 @@
+import { ColumnOrder } from '../../types';
 import { RowProps } from './Row';
-export declare function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>): import("react/jsx-runtime").JSX.Element;
+type Props = Pick<RowProps, 'rowAutoHeight'> & {
+    columnOrder: ColumnOrder;
+    enableColumnsOrderSortByDrag?: boolean;
+};
+export declare function HeaderRow({ rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/Rows/HeaderRow.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function HeaderRow({ rowAutoHeight }) {
+export function HeaderRow({ rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag }) {
     const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
-    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, rowAutoHeight: rowAutoHeight }, header.id)))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header, rowAutoHeight: rowAutoHeight }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right, rowAutoHeight: rowAutoHeight }, header.id)))) }))] }));
+    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, rowAutoHeight: rowAutoHeight }, header.id)))) })), _jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: unpinned.map(headerGroup => headerGroup.headers.map(header => (_jsx(HeaderCell, { header: header, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag && columnOrder.length > 1 }, header.id)))) }), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right, rowAutoHeight: rowAutoHeight }, header.id)))) }))] }));
 }

package/dist/esm/helperComponents/hooks.d.ts

@@ -1,4 +1,5 @@
 import { Cell, Header, HeaderGroup, Row } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
 export declare function useHeaderGroups(): {
     unpinned: HeaderGroup<any>[];
     leftPinned?: undefined;
@@ -10,16 +11,15 @@ export declare function useHeaderGroups(): {
 };
 export declare function useRowCells<TData>(row: Row<TData>): {
     unpinned: Cell<TData, unknown>[];
-    pinnedLeft?: undefined;
-    pinnedRight?: undefined;
+    leftPinned?: undefined;
+    rightPinned?: undefined;
 } | {
-    pinnedLeft: Cell<TData, unknown>[] | undefined;
-    pinnedRight: Cell<TData, unknown>[] | undefined;
+    leftPinned: Cell<TData, unknown>[] | undefined;
+    rightPinned: Cell<TData, unknown>[] | undefined;
     unpinned: Cell<TData, unknown>[];
 };
-export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>): {
-    minWidth: number | undefined;
-    width: string;
-    maxWidth: number | undefined;
-    flexShrink: string;
+type CellSizesOptions = {
+    isDraggable?: boolean;
 };
+export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>, options?: CellSizesOptions): CSSProperties;
+export {};