@uxf/data-grid 11.92.2 → 11.93.0

package/_store/reducer.js

@@ -186,6 +186,14 @@ const reducer = (state, action) => {
                     },
                 },
             };
+        case "SET_COLUMNS_ORDER":
+            return {
+                ...state,
+                userConfig: {
+                    ...state.userConfig,
+                    columnsOrder: action.columns,
+                },
+            };
         case "UPDATE_USER_CONFIG":
             return {
                 ...state,

package/data-grid-v2.js

@@ -29,7 +29,7 @@ function DataGridV2(props) {
         react_1.default.createElement(root_1.DataGridRoot, { className: props.className },
             react_1.default.createElement(toolbar_1.DataGridToolbar, null,
                 react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, variant: props.tabsVariant }),
-                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { HiddenColumnsComponent: props.HiddenColumnsComponent, actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),

package/data-grid-v2.stories.js

@@ -89,8 +89,13 @@ const FILTER_BEHAVIOR_OPTIONS = [
     { id: "sharedFiltersAndSearch", label: "sharedFiltersAndSearch" },
     { id: "sharedFiltersAndSearchAndSort", label: "sharedFiltersAndSearchAndSort" },
 ];
+const HIDDEN_COLUMNS_SORTABLE_OPTIONS = [
+    { id: "default", label: "Vypnuto" },
+    { id: "sortable", label: "Zapnuto" },
+];
 function Default() {
     const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
+    const [hiddenColumnsBehavior, setHiddenColumnsBehavior] = (0, react_1.useState)("default");
     const { middleware, useUserConfig } = (0, local_storage_1.useUserConfigLocalStorageAdapter)(schema_1.schema);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
@@ -102,8 +107,10 @@ function Default() {
         schema: schema_1.schema,
         state,
     });
+    const clearLocalStorageUserConfig = (0, local_storage_1.useClearLocalStorageUserConfig)(schema_1.schema);
     return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior, variant: "row" }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, getCsvDownloadUrl: () => ``, isLoading: isLoading, isRowSelectDisabled: (row) => row.id === 6, isRowsSelectable: true, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), rowHeight: "auto", schema: schemaWithFrontendConfig, state: state, tabsVariant: "segmented" }),
+        react_1.default.createElement(radio_group_1.RadioGroup, { className: "mb-2 mt-4", label: "\u0158azen\u00ED sloupc\u016F (Drag&Drop)", name: "hiddenColumnsSortable", onChange: (value) => setHiddenColumnsBehavior(value), options: HIDDEN_COLUMNS_SORTABLE_OPTIONS, value: hiddenColumnsBehavior, variant: "row" }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", customActions: [{ onClick: clearLocalStorageUserConfig, label: "Smazat user config" }], data: data, error: error, getCsvDownloadUrl: () => ``, isHiddenColumnsSortable: hiddenColumnsBehavior === "sortable", isLoading: isLoading, isRowSelectDisabled: (row) => row.id === 6, isRowsSelectable: true, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), rowHeight: "auto", schema: schemaWithFrontendConfig, state: state, tabsVariant: "segmented" }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/data-grid.js

@@ -28,7 +28,7 @@ function DataGrid(props) {
         react_1.default.createElement(root_1.DataGridRoot, { className: props.className },
             react_1.default.createElement(toolbar_1.DataGridToolbar, null,
                 react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, variant: props.tabsVariant }),
-                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { HiddenColumnsComponent: props.HiddenColumnsComponent, actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),

package/hidden-columns/column-item.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ColumnWithId } from "./types";
+interface DataGridColumnsItemProps {
+    column: ColumnWithId;
+    isChecked: boolean;
+    id: string;
+    onToggle: (id: string, value: boolean) => void;
+}
+export declare function ColumnItem(props: DataGridColumnsItemProps): React.JSX.Element;
+export {};

package/hidden-columns/column-item.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnItem = ColumnItem;
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const icon_1 = require("@uxf/ui/icon");
+const toggle_1 = require("@uxf/ui/toggle");
+const react_1 = __importDefault(require("react"));
+function ColumnItem(props) {
+    const { attributes, listeners, isDragging, transform, transition, setNodeRef } = (0, sortable_1.useSortable)({
+        id: props.id,
+    });
+    const style = {
+        opacity: isDragging ? 0.4 : undefined,
+        transform: utilities_1.CSS.Translate.toString(transform),
+        transition,
+    };
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-column-item", id: props.id, ref: setNodeRef, style: style },
+        react_1.default.createElement("button", { type: "button", ...attributes, ...listeners },
+            react_1.default.createElement(icon_1.Icon, { name: "grip-dots-vertical", size: 20 })),
+        react_1.default.createElement(toggle_1.Toggle, { key: props.column.name, label: typeof props.column.label === "string" ? props.column.label : "", name: props.column.name, onChange: (value) => ((0, is_not_nil_1.isNotNil)(value) ? props.onToggle(props.column.name, value) : void null), size: "sm", value: props.isChecked, variant: "reversed" })));
+}

package/hidden-columns/drop-placeholder.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    id: string;
+    type: "hidden" | "visible";
+}
+export declare function DropPlaceholder(props: Props): React.JSX.Element;
+export {};

package/hidden-columns/drop-placeholder.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropPlaceholder = DropPlaceholder;
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const translations_1 = require("@uxf/core-react/translations");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+function DropPlaceholder(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    const { setNodeRef, transform, transition, isOver } = (0, sortable_1.useSortable)({ id: props.id });
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__hidden-columns-drop-placeholder", isOver && "uxf-data-grid__hidden-columns-drop-placeholder--over"), ref: setNodeRef, style: {
+            transform: utilities_1.CSS.Translate.toString(transform),
+            transition,
+        } }, props.type === "hidden"
+        ? t("uxf-data-grid-hidden-columns:drag-columns-hide")
+        : t("uxf-data-grid-hidden-columns:drag-columns-show")));
+}

package/hidden-columns/hidden-columns-sortable.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DataGridHiddenColumnsProps } from "./types";
+export declare function DataGridHiddenColumnsSortable(props: DataGridHiddenColumnsProps): React.JSX.Element;

package/hidden-columns/hidden-columns-sortable.js

@@ -0,0 +1,166 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHiddenColumnsSortable = DataGridHiddenColumnsSortable;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const show_1 = require("@uxf/core-react/components/show");
+const use_sortable_multi_1 = require("@uxf/core-react/dnd/hooks/use-sortable-multi");
+const translations_1 = require("@uxf/core-react/translations");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const icon_1 = require("@uxf/ui/icon");
+const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importStar(require("react"));
+const column_item_1 = require("./column-item");
+const drop_placeholder_1 = require("./drop-placeholder");
+const types_1 = require("./types");
+function DataGridHiddenColumnsSortable(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    const columnsWithId = (0, react_1.useMemo)(() => props.schema.columns.filter((c) => !c.hidden).map((c) => ({ ...c, id: c.name })), [props.schema.columns]);
+    // Sort columns according to columnsOrder if it exists
+    const sortedColumnsWithId = (0, react_1.useMemo)(() => {
+        if (!props.state.userConfig.columnsOrder) {
+            return columnsWithId;
+        }
+        return [...columnsWithId].sort((a, b) => {
+            const aIndex = props.state.userConfig.columnsOrder.indexOf(a.name);
+            const bIndex = props.state.userConfig.columnsOrder.indexOf(b.name);
+            // If both columns are in the order array, sort by their position
+            if (aIndex !== -1 && bIndex !== -1) {
+                return aIndex - bIndex;
+            }
+            // If only one column is in the order array, prioritize it
+            if (aIndex !== -1) {
+                return -1;
+            }
+            if (bIndex !== -1) {
+                return 1;
+            }
+            // If neither is in the order array, maintain original order
+            return 0;
+        });
+    }, [columnsWithId, props.state.userConfig.columnsOrder]);
+    const visibleColumns = (0, react_1.useMemo)(() => sortedColumnsWithId.filter((c) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[c.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = c.config) === null || _d === void 0 ? void 0 : _d.isHidden); }), [sortedColumnsWithId, props.state.userConfig.columns]);
+    const hiddenColumns = (0, react_1.useMemo)(() => sortedColumnsWithId.filter((c) => { var _a, _b, _c, _d; return (_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[c.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = c.config) === null || _d === void 0 ? void 0 : _d.isHidden; }), [sortedColumnsWithId, props.state.userConfig.columns]);
+    const [sections, setSections] = (0, react_1.useState)({
+        visible: visibleColumns,
+        hidden: hiddenColumns,
+    });
+    // Sync sections when visible/hidden columns change (e.g., after refresh when userConfig loads)
+    (0, react_1.useEffect)(() => {
+        setSections({
+            visible: visibleColumns,
+            hidden: hiddenColumns,
+        });
+    }, [visibleColumns, hiddenColumns]);
+    const onChangeAll = (value) => () => {
+        const allColumns = [...sections.visible, ...sections.hidden];
+        setSections({
+            visible: value ? allColumns : [],
+            hidden: !value ? allColumns : [],
+        });
+        // update all columns visibility in a single action to avoid multiple action calls
+        const newUserConfigColumns = {}; // TODO finalize typing after merging https://gitlab.uxf.cz/uxf/npm-packages/fe-monorepo/-/merge_requests/720
+        allColumns.forEach((column) => {
+            newUserConfigColumns[column.name] = { isHidden: !value };
+        });
+        props.actions.updateUserConfig({ columns: newUserConfigColumns });
+    };
+    const { getSectionItemsIds, activeItem, onDragStart, onDragEnd, onDragCancel, sensors, dropAnimationConfig } = (0, use_sortable_multi_1.useSortableMulti)(sections, setSections, (fromSection, toSection, fromIndex, toIndex, nextState) => {
+        const movedItem = nextState[toSection][toIndex];
+        const isNowVisible = toSection === "visible";
+        props.actions[isNowVisible ? "showColumn" : "hideColumn"](movedItem.name);
+        props.actions.setColumnsOrder(nextState.visible.map((c) => c.name));
+    });
+    const handleToggle = (0, react_1.useCallback)((id, isVisible) => {
+        const fromKey = isVisible ? "hidden" : "visible";
+        const toKey = isVisible ? "visible" : "hidden";
+        let newVisibleOrder = [];
+        setSections((prev) => {
+            const column = [...prev[fromKey]].find((c) => c.id === id);
+            if (!column) {
+                return prev;
+            }
+            const from = prev[fromKey].filter((c) => c.id !== id);
+            // When making visible, insert at proper position based on original order
+            let to;
+            if (isVisible) {
+                // Find the correct position based on sortedColumnsWithId order
+                const allColumnsInOrder = sortedColumnsWithId;
+                const targetIndex = allColumnsInOrder.findIndex((c) => c.id === id);
+                // Find insertion position in the 'to' array
+                let insertIndex = 0;
+                for (let i = 0; i < prev[toKey].length; i++) {
+                    const currentColIndex = allColumnsInOrder.findIndex((c) => c.id === prev[toKey][i].id);
+                    if (currentColIndex < targetIndex) {
+                        insertIndex = i + 1;
+                    }
+                }
+                to = [...prev[toKey]];
+                to.splice(insertIndex, 0, column);
+            }
+            else {
+                // When hiding, just append to the end of hidden columns
+                to = [...prev[toKey], column];
+            }
+            const result = { ...prev, [fromKey]: from, [toKey]: to };
+            // Store the new visible order to update after setState
+            newVisibleOrder = result.visible.map((c) => c.name);
+            return result;
+        });
+        props.actions.setColumnsOrder(newVisibleOrder);
+        props.actions[isVisible ? "showColumn" : "hideColumn"](id);
+    }, [props.actions, sortedColumnsWithId]);
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" },
+        react_1.default.createElement(core_1.DndContext, { collisionDetection: core_1.rectIntersection, onDragCancel: onDragCancel, onDragEnd: onDragEnd, onDragStart: onDragStart, sensors: sensors },
+            react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title" },
+                react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title-text" }, t("uxf-data-grid-hidden-columns:visible-columns")),
+                react_1.default.createElement(text_link_1.TextLink, { isDisabled: (0, is_empty_1.isEmpty)(sections.visible), onClick: onChangeAll(false), variant: "text" }, t("uxf-data-grid-hidden-columns:hide-all"))),
+            react_1.default.createElement(show_1.Show, { when: (0, is_empty_1.isEmpty)(sections.visible) },
+                react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-empty-box" },
+                    react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation-solid", size: 20 }),
+                    t("uxf-data-grid-hidden-columns:empty-message"))),
+            react_1.default.createElement(sortable_1.SortableContext, { items: getSectionItemsIds("visible"), strategy: sortable_1.verticalListSortingStrategy }, (0, is_empty_1.isEmpty)(sections.visible) ? (react_1.default.createElement(drop_placeholder_1.DropPlaceholder, { id: types_1.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID, type: "visible" })) : (sections.visible.map((column) => (react_1.default.createElement(column_item_1.ColumnItem, { column: column, id: column.id, isChecked: true, key: `visible-${column.id}`, onToggle: handleToggle }))))),
+            react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(sections.hidden) || (0, is_not_nil_1.isNotNil)(activeItem) },
+                react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title" },
+                    react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title-text" }, t("uxf-data-grid-hidden-columns:hidden-columns")),
+                    ((0, is_nil_1.isNil)(activeItem) || (0, is_not_empty_1.isNotEmpty)(sections.hidden)) && (react_1.default.createElement(text_link_1.TextLink, { onClick: onChangeAll(true), variant: "text" }, t("uxf-data-grid-hidden-columns:show-all")))),
+                (0, is_empty_1.isEmpty)(sections.hidden) ? (react_1.default.createElement(drop_placeholder_1.DropPlaceholder, { id: types_1.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID, type: "hidden" })) : (sections.hidden.map((column) => (react_1.default.createElement(column_item_1.ColumnItem, { column: column, id: column.id, isChecked: false, key: `hidden-${column.id}`, onToggle: handleToggle }))))),
+            react_1.default.createElement(core_1.DragOverlay, { dropAnimation: dropAnimationConfig }, (0, is_not_nil_1.isNotNil)(activeItem) ? (react_1.default.createElement(column_item_1.ColumnItem, { column: activeItem, id: activeItem.id, isChecked: Boolean(sections.visible.find((c) => c.name === activeItem.name)), onToggle: () => void null })) : null))));
+}

package/hidden-columns/hidden-columns.d.ts

@@ -1,8 +1,3 @@
-import React, { ReactNode } from "react";
-import { Schema } from "../types";
-import { DataGridControl } from "../use-data-grid-control";
-export interface DataGridHiddenColumnsProps extends DataGridControl {
-    schema: Schema<any>;
-    title?: ReactNode;
-}
+import React from "react";
+import { DataGridHiddenColumnsProps } from "./types";
 export declare function DataGridHiddenColumns(props: DataGridHiddenColumnsProps): React.JSX.Element;

package/hidden-columns/hidden-columns.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function Sortable(): React.JSX.Element;

package/hidden-columns/hidden-columns.stories.js

@@ -4,14 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.Sortable = Sortable;
 const react_1 = __importDefault(require("react"));
 const json_renderer_1 = require("../_story-utils/json-renderer");
 const schema_1 = require("../_story-utils/schema");
 const use_data_grid_control_1 = require("../use-data-grid-control");
 const hidden_columns_1 = require("./hidden-columns");
+const hidden_columns_sortable_1 = require("./hidden-columns-sortable");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hidden_columns_1.DataGridHiddenColumns, { actions: actions, schema: schema_1.schema, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
+function Sortable() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(hidden_columns_sortable_1.DataGridHiddenColumnsSortable, { actions: actions, schema: schema_1.schema, state: state }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}

package/hidden-columns/index.d.ts

@@ -1 +1,2 @@
 export * from "./hidden-columns";
+export * from "./hidden-columns-sortable";

package/hidden-columns/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./hidden-columns"), exports);
+__exportStar(require("./hidden-columns-sortable"), exports);

package/hidden-columns/types.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+import { Column, Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+export type ColumnWithId = Column<any, any> & {
+    id: string;
+};
+export type SectionKey = "visible" | "hidden";
+export type Sections = Record<SectionKey, ColumnWithId[]>;
+export declare const EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID = "__empty-visible-placeholder__";
+export declare const EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID = "__empty-hidden-placeholder__";
+export interface DataGridHiddenColumnsProps extends DataGridControl {
+    schema: Schema<any>;
+}
+export type HiddenColumnsComponentComponent = FunctionComponent<DataGridHiddenColumnsProps>;

package/hidden-columns/types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID = exports.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID = void 0;
+exports.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID = "__empty-visible-placeholder__";
+exports.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID = "__empty-hidden-placeholder__";

package/hidden-columns-button/hidden-columns-button.d.ts

@@ -1,8 +1,10 @@
 import React, { ReactNode } from "react";
+import { HiddenColumnsComponentComponent } from "../hidden-columns/types";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 export interface DataGridHiddenColumnsButtonProps extends DataGridControl {
     drawerTitle?: ReactNode;
+    HiddenColumnsComponent?: HiddenColumnsComponentComponent;
     schema: Schema<any>;
 }
 export declare function DataGridHiddenColumnsButton(props: DataGridHiddenColumnsButtonProps): React.JSX.Element;

package/hidden-columns-button/hidden-columns-button.js

@@ -42,13 +42,14 @@ const react_1 = __importStar(require("react"));
 const drawer_1 = require("../_components/drawer");
 const hidden_columns_1 = require("../hidden-columns");
 function DataGridHiddenColumnsButton(props) {
-    var _a;
+    var _a, _b;
     const t = (0, translations_1.useUxfTranslation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const closeHandler = () => setIsOpen(false);
+    const HiddenColumnsComponent = (_a = props.HiddenColumnsComponent) !== null && _a !== void 0 ? _a : hidden_columns_1.DataGridHiddenColumns;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-data-grid__plugin-button", iconName: "table-columns", label: t("uxf-data-grid-hidden-columns-button:column-settings-label"), onClick: () => setIsOpen(true), size: "sm", variant: "secondary" }),
+        react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-data-grid__plugin-button", iconName: "table-columns", label: t("uxf-data-grid-hidden-columns-button:column-settings-label"), onClick: () => setIsOpen(true), size: "sm", title: t("uxf-data-grid-hidden-columns-button:column-settings-label"), variant: "secondary" }),
         react_1.default.createElement(modal_1.Modal, { className: "uxf-dg-modal", isOpen: isOpen, onClose: closeHandler, variant: "drawer-right" },
-            react_1.default.createElement(drawer_1.Drawer, { onClose: closeHandler, title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : t("uxf-data-grid-hidden-columns-button:columns-title") },
-                react_1.default.createElement(hidden_columns_1.DataGridHiddenColumns, { actions: props.actions, schema: props.schema, state: props.state })))));
+            react_1.default.createElement(drawer_1.Drawer, { onClose: closeHandler, title: (_b = props.drawerTitle) !== null && _b !== void 0 ? _b : t("uxf-data-grid-hidden-columns-button:columns-title") },
+                react_1.default.createElement(HiddenColumnsComponent, { actions: props.actions, schema: props.schema, state: props.state })))));
 }

package/hidden-columns-button/hidden-columns-button.stories.js

@@ -7,11 +7,15 @@ exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const json_renderer_1 = require("../_story-utils/json-renderer");
 const schema_1 = require("../_story-utils/schema");
+const hidden_columns_1 = require("../hidden-columns");
 const use_data_grid_control_1 = require("../use-data-grid-control");
 const hidden_columns_button_1 = require("./hidden-columns-button");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: actions, schema: schema_1.schema, state: state }),
+        react_1.default.createElement("div", { className: "mt-10" },
+            react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: actions, schema: schema_1.schema, state: state })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { HiddenColumnsComponent: hidden_columns_1.DataGridHiddenColumnsSortable, actions: actions, schema: schema_1.schema, state: state })),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/icons-config.js

@@ -11,6 +11,11 @@ module.exports = {
         height: 512,
         data: `<path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z" fill="currentColor"/>`,
     },
+    "grip-dots-vertical": {
+        width: 256,
+        height: 512,
+        data: `<path fill="currentColor" d="M64 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm0 160a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM96 416a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96-288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 128a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM192 448a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/>`,
+    },
     pen: {
         width: 512,
         height: 512,

package/icons.d.ts

@@ -26,6 +26,7 @@ declare module "@uxf/ui/icon/theme" {
         "file-arrow-down": true;
         "file-download": true;
         filter: true;
+        "grip-dots-vertical": true;
         imageFile: true;
         minus: true;
         pen: true;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.92.2",
+    "version": "11.93.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -21,6 +21,9 @@
         "data-grid",
         "uxf"
     ],
+    "engines": {
+        "node": ">=24"
+    },
     "scripts": {
         "dev": "next dev",
         "build": "tsc -P tsconfig.json",
@@ -31,9 +34,11 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.91.0",
-        "@uxf/core-react": "11.91.0",
-        "@uxf/ui": "11.92.2",
+        "@dnd-kit/core": "6.3.1",
+        "@dnd-kit/sortable": "10.0.0",
+        "@uxf/core": "11.93.0",
+        "@uxf/core-react": "11.93.0",
+        "@uxf/ui": "11.93.0",
         "dayjs": "1.11.19",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.3",

package/styles.css

@@ -437,13 +437,26 @@ o
         font-weight: theme("fontWeight.medium");
     }
 
+    &__hidden-columns-column-item {
+        align-items: center;
+        display: flex;
+        gap: 12px;
+        width: 100%;
+
+        & > .uxf-toggle__wrapper {
+            flex-grow: 1;
+            padding-left: 0;
+        }
+    }
+
     &__hidden-columns-title {
         display: flex;
         gap: 8px;
         justify-content: space-between;
         padding: 24px 0 12px;
 
-        div {
+        &-text {
+            color: theme("colors.lightMedium");
             text-transform: uppercase;
         }
 
@@ -464,11 +477,27 @@ o
         display: flex;
         gap: 12px;
         margin: 8px 0;
-        padding: 8px 16px;
+        padding: 12px 16px;
 
         .uxf-icon {
             color: theme("colors.warning_icon_on_muted");
-            margin-top: 4px;
+        }
+    }
+
+    &__hidden-columns-drop-placeholder {
+        align-items: center;
+        background-color: var(--gray-50);
+        border: 1px dashed var(--gray-300);
+        border-radius: 4px;
+        color: var(--gray-500);
+        display: grid;
+        justify-content: center;
+        min-height: 64px;
+        min-width: 100%;
+        padding: 16px;
+
+        &--over {
+            background-color: var(--gray-100);
         }
     }
 

package/table-v2/components/header-cell.d.ts

@@ -4,6 +4,7 @@ import { Column, DataGridSort } from "../../types";
 export interface HeaderCellProps {
     column: Column<any, any>;
     onResizeStart: () => void;
+    onAutoSize?: () => void;
     sort: DataGridSort | Nullish;
     onClick?: () => void;
 }

package/table-v2/components/header-cell.js

@@ -51,7 +51,11 @@ function HeaderCellComponent(props, ref) {
     react_1.default.createElement("div", { className: (0, cx_1.cx)(`uxf-dg-table__cell uxf-dg-table__cell--header uxf-dg-table__cell--type-${props.column.type}`, props.column.sort && "is-sortable", ((_c = props.sort) === null || _c === void 0 ? void 0 : _c.dir) === "asc" && "is-sorted-asc", ((_d = props.sort) === null || _d === void 0 ? void 0 : _d.dir) === "desc" && "is-sorted-desc"), onClick: props.onClick, ref: ref },
         props.column.label,
         iconName && react_1.default.createElement(icon_1.Icon, { className: "ml-auto", name: iconName }),
-        react_1.default.createElement("button", { className: "uxf-dg-table__column-resize-handle", onClick: (event) => event.stopPropagation(), onMouseDown: props.onResizeStart })));
+        react_1.default.createElement("button", { className: "uxf-dg-table__column-resize-handle", onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
+                var _a;
+                event.stopPropagation();
+                (_a = props.onAutoSize) === null || _a === void 0 ? void 0 : _a.call(props);
+            }, onMouseDown: props.onResizeStart })));
 }
 exports.HeaderCell = (0, react_1.forwardRef)(HeaderCellComponent);
 exports.HeaderCell.displayName = "HeaderCell";

package/table-v2/hooks/use-resizable-columns.d.ts

@@ -6,4 +6,5 @@ export declare function useResizableColumns(columns: Column<any, any>[], actionC
     tableRef: import("react").RefObject<HTMLDivElement>;
     columnRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     onResizeStart(index: number): void;
+    onAutoSize: (index: number) => void;
 };

package/table-v2/hooks/use-resizable-columns.js

@@ -6,6 +6,7 @@ const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = require("react");
 const get_grid_template_columns_1 = require("../utils/get-grid-template-columns");
 const COLUMN_ABSOLUTE_MIN_WIDTH = 50;
+const COLUMN_PADDING = 24;
 function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const tableRef = (0, react_1.useRef)(null);
@@ -59,11 +60,50 @@ function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth)
             window.removeEventListener("mouseup", onMouseUp);
         };
     }, [columns, actions, actionCellWidth, activeIndex, selectRowsCellWidth]);
+    const onAutoSize = (index) => {
+        var _a, _b;
+        const table = tableRef.current;
+        if (!table) {
+            return;
+        }
+        const column = columns[index];
+        const columnRef = columnRefs.current[index];
+        if (!columnRef) {
+            return;
+        }
+        // Get all cells in this column (including header)
+        const cells = table.querySelectorAll(`.uxf-dg-table__cell--type-${column.type}:nth-child(${index + 1 + (selectRowsCellWidth ? 1 : 0)})`);
+        let maxWidth = COLUMN_ABSOLUTE_MIN_WIDTH;
+        // Measure content width of each cell
+        cells.forEach((cell) => {
+            const cellElement = cell;
+            // Create a temporary element to measure content width
+            const tempElement = document.createElement("span");
+            tempElement.style.visibility = "hidden";
+            tempElement.style.position = "absolute";
+            tempElement.style.whiteSpace = "nowrap";
+            tempElement.innerHTML = cellElement.innerHTML;
+            document.body.appendChild(tempElement);
+            const contentWidth = tempElement.offsetWidth + COLUMN_PADDING;
+            maxWidth = Math.max(maxWidth, contentWidth);
+            document.body.removeChild(tempElement);
+        });
+        // Apply min width constraint
+        const columnMinWidth = (_b = (_a = column.config) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : COLUMN_ABSOLUTE_MIN_WIDTH;
+        const finalWidth = Math.max(maxWidth, columnMinWidth);
+        // Update the user config with the auto-sized width
+        actions.updateUserConfig({
+            columns: {
+                [column.name]: { width: finalWidth },
+            },
+        });
+    };
     return {
         tableRef,
         columnRefs,
         onResizeStart(index) {
             setActiveIndex(index);
         },
+        onAutoSize,
     };
 }

package/table-v2/table-v2.js

@@ -27,9 +27,13 @@ function DataGridTableV2(props) {
     const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
     const visibleColumns = props.schema.columns
         .filter((column) => !column.hidden)
-        .filter((column) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
+        .filter((column) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); })
+        .sort((a, b) => props.state.userConfig.columnsOrder
+        ? props.state.userConfig.columnsOrder.indexOf(a.name) -
+            props.state.userConfig.columnsOrder.indexOf(b.name)
+        : 0);
     const selectedRowColumnWidth = props.isRowsSelectable ? SELECT_ROWS_CELL_WIDTH : null;
-    const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth);
+    const { tableRef, columnRefs, onResizeStart, onAutoSize } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth);
     const gridTemplateRows = (0, get_grid_template_rows_1.getGridTemplateRows)(props.data, (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36, (_c = props.rowHeight) !== null && _c !== void 0 ? _c : 44);
     const gridTemplateBasicColumns = visibleColumns
         .map((column) => {
@@ -66,7 +70,7 @@ function DataGridTableV2(props) {
                     react_1.default.createElement(header_select_all_rows_checkbox_1.HeaderSelectAllRowsCheckbox, { actions: props.actions, data: props.data, isRowSelectDisabled: props.isRowSelectDisabled, keyExtractor: keyExtractor, state: props.state })),
                 visibleColumns.map((column, index) => {
                     var _a;
-                    return (react_1.default.createElement(components_1.Table.HeaderCell, { column: column, key: column.name, onClick: column.sort ? () => props.actions.sort(column.name) : undefined, onResizeStart: () => onResizeStart(index), ref: (el) => {
+                    return (react_1.default.createElement(components_1.Table.HeaderCell, { column: column, key: column.name, onAutoSize: () => onAutoSize(index), onClick: column.sort ? () => props.actions.sort(column.name) : undefined, onResizeStart: () => onResizeStart(index), ref: (el) => {
                             columnRefs.current[index] = el;
                         }, sort: ((_a = props.state.request.s) === null || _a === void 0 ? void 0 : _a.name) === column.name ? props.state.request.s : null }));
                 }),

package/toolbar-control/toolbar-control.d.ts

@@ -1,13 +1,15 @@
 import { Nullish } from "@uxf/core/types";
 import React from "react";
 import { FilterHandlers } from "../filter-handler";
+import { HiddenColumnsComponentComponent } from "../hidden-columns/types";
 import { CsvDownloadGetUrl, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 export interface DataGridToolbarControlProps extends DataGridControl {
-    schema: Schema<any>;
+    HiddenColumnsComponent?: HiddenColumnsComponentComponent;
     filterHandlers: FilterHandlers;
+    fulltextInputPlaceholder?: string;
     getCsvDownloadUrl?: CsvDownloadGetUrl;
     isBorderHidden?: boolean | Nullish;
-    fulltextInputPlaceholder?: string;
+    schema: Schema<any>;
 }
 export declare function DataGridToolbarControl(props: DataGridToolbarControlProps): React.JSX.Element;

package/toolbar-control/toolbar-control.js

@@ -17,6 +17,6 @@ function DataGridToolbarControl(props) {
         react_1.default.createElement(hide_1.Hide, { when: !props.schema.fullText },
             react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { actions: props.actions, placeholder: props.fulltextInputPlaceholder, state: props.state })),
         (0, is_not_nil_1.isNotNil)(props.getCsvDownloadUrl) && (react_1.default.createElement(export_button_1.DataGridExportButton, { actions: props.actions, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state })),
-        react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: props.actions, schema: props.schema, state: props.state }),
+        react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { HiddenColumnsComponent: props.HiddenColumnsComponent, actions: props.actions, schema: props.schema, state: props.state }),
         react_1.default.createElement(filters_button_1.DataGridFiltersButton, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state })));
 }

package/translations/cs.json

@@ -4,7 +4,9 @@
     "hide-all": "skrýt vše",
     "empty-message": "Tabulka má všechny sloupce skryté. Pro zobrazení vyberte sloupec níže.",
     "hidden-columns": "Skryté sloupce",
-    "show-all": "zobrazit vše"
+    "show-all": "zobrazit vše",
+    "drag-columns-hide": "Přetáhněte sem sloupce pro skrytí sloupců",
+    "drag-columns-show": "Přetáhněte sem sloupce pro zobrazení sloupců"
   },
   "uxf-data-grid-fulltext-input": {
     "search-label": "Vyhledávání",

package/translations/de.json

@@ -4,7 +4,9 @@
     "hide-all": "alle ausblenden",
     "empty-message": "Die Tabelle hat alle Spalten ausgeblendet. Um sie anzuzeigen, wählen Sie eine Spalte unten aus.",
     "hidden-columns": "Ausgeblendete Spalten",
-    "show-all": "alle anzeigen"
+    "show-all": "alle anzeigen",
+    "drag-columns-hide": "Ziehen Sie hier Spalten hin, um Spalten zu verbergen",
+    "drag-columns-show": "Ziehen Sie hier Spalten hin, um Spalten anzuzeigen"
   },
   "uxf-data-grid-fulltext-input": {
     "search-label": "Suche",

package/translations/en.json

@@ -4,7 +4,9 @@
     "hide-all": "hide all",
     "empty-message": "The table has all columns hidden. To display them, select a column below.",
     "hidden-columns": "Hidden columns",
-    "show-all": "show all"
+    "show-all": "show all",
+    "drag-columns-hide": "Drag columns here to hide columns",
+    "drag-columns-show": "Drag columns here to show columns"
   },
   "uxf-data-grid-fulltext-input": {
     "search-label": "Search",

package/translations/sk.json

@@ -4,7 +4,9 @@
     "hide-all": "skryť všetko",
     "empty-message": "Tabuľka má všetky stĺpce skryté. Pre zobrazenie vyberte stĺpec nižšie.",
     "hidden-columns": "Skryté stĺpce",
-    "show-all": "zobraziť všetko"
+    "show-all": "zobraziť všetko",
+    "drag-columns-hide": "Potiahnite sem stĺpce na skrytie stĺpcov",
+    "drag-columns-show": "Potiahnite sem stĺpce na zobrazenie stĺpcov"
   },
   "uxf-data-grid-fulltext-input": {
     "search-label": "Vyhľadávanie",

package/translations/translations.d.ts

@@ -30,6 +30,18 @@ declare const _default: {
             sk: string;
             de: string;
         };
+        "drag-columns-hide": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+        "drag-columns-show": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
     };
     "uxf-data-grid-fulltext-input": {
         "search-label": {

package/translations/translations.js

@@ -32,6 +32,18 @@ exports.default = {
             sk: "zobraziť všetko",
             de: "alle anzeigen",
         },
+        "drag-columns-hide": {
+            cs: "Přetáhněte sem sloupce pro skrytí sloupců",
+            en: "Drag columns here to hide columns",
+            sk: "Potiahnite sem stĺpce na skrytie stĺpcov",
+            de: "Ziehen Sie hier Spalten hin, um Spalten zu verbergen",
+        },
+        "drag-columns-show": {
+            cs: "Přetáhněte sem sloupce pro zobrazení sloupců",
+            en: "Drag columns here to show columns",
+            sk: "Potiahnite sem stĺpce na zobrazenie stĺpcov",
+            de: "Ziehen Sie hier Spalten hin, um Spalten anzuzeigen",
+        },
     },
     "uxf-data-grid-fulltext-input": {
         "search-label": {

package/types/data-grid-props.d.ts

@@ -1,5 +1,6 @@
 import { Nullish } from "@uxf/core/types";
 import { FilterHandlers } from "../filter-handler";
+import { HiddenColumnsComponentComponent } from "../hidden-columns/types";
 import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
 import { NoRowsFallbackComponent } from "../table-v2/no-rows-fallback";
 import { DataGridTableProps } from "../table-v2/types";
@@ -12,6 +13,7 @@ import { BaseGridType, Schema } from "./schema";
 export type DataGridControlProps = DataGridControl;
 export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
 export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
+    HiddenColumnsComponent?: HiddenColumnsComponentComponent;
     NoRowsFallback?: NoRowsFallbackComponent;
     SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
     actionCell?: DataGridTableProps<Row>["actionCell"];
@@ -24,6 +26,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     gridName?: string;
     headerRowHeight?: number;
     isDebug?: boolean;
+    isHiddenColumnsSortable?: boolean;
     isRowSelectDisabled?: (row: Row) => boolean;
     isRowsSelectable?: boolean;
     keyExtractor?: KeyExtractor;

package/types/state.d.ts

@@ -10,6 +10,7 @@ export type GridRequest = {
 };
 export interface DataGridUserConfig<GridType extends BaseGridType> {
     columns?: Partial<Record<keyof GridType["columns"], ColumnConfig>>;
+    columnsOrder?: (keyof GridType["columns"])[];
     perPage?: number;
 }
 export interface DataGridFrontendConfig<GridType extends BaseGridType> extends DataGridUserConfig<GridType> {

package/use-data-grid-control/action.d.ts

@@ -31,6 +31,9 @@ export type Action = {
 } | {
     type: "SET_SELECTED_ROWS";
     rows: any;
+} | {
+    type: "SET_COLUMNS_ORDER";
+    columns: string[];
 } | {
     type: "HIDE_COLUMN";
     name: string;

package/use-data-grid-control/action.js

@@ -6,4 +6,5 @@ exports.ACTIONS_CHANGING_USER_CONFIG = [
     "HIDE_COLUMN",
     "SHOW_COLUMN",
     "UPDATE_USER_CONFIG",
+    "SET_COLUMNS_ORDER",
 ];

package/use-data-grid-control/actions-factory.d.ts

@@ -14,6 +14,7 @@ export declare function createActions(dispatch: Dispatch<Action>): {
     search: (search: string) => void;
     changeTab: (tab: Tab, filterBehavior: ChangeTabFilterBehavior) => void;
     setSelectedRows: (rows: any[]) => void;
+    setColumnsOrder: (columns: string[]) => void;
     hideColumn: (name: string) => void;
     showColumn: (name: string) => void;
     updateUserConfig: (userConfig: DataGridUserConfig<any>) => void;

package/use-data-grid-control/actions-factory.js

@@ -13,6 +13,7 @@ function createActions(dispatch) {
         search: (search) => dispatch({ type: "FULLTEXT", search }),
         changeTab: (tab, filterBehavior) => dispatch({ type: "CHANGE_TAB", tab, filterBehavior }),
         setSelectedRows: (rows) => dispatch({ type: "SET_SELECTED_ROWS", rows }),
+        setColumnsOrder: (columns) => dispatch({ type: "SET_COLUMNS_ORDER", columns }),
         hideColumn: (name) => dispatch({ type: "HIDE_COLUMN", name }),
         showColumn: (name) => dispatch({ type: "SHOW_COLUMN", name }),
         updateUserConfig: (userConfig) => dispatch({ type: "UPDATE_USER_CONFIG", userConfig }),

package/use-data-grid-control/use-data-grid-control.d.ts

@@ -23,6 +23,7 @@ export declare function useDataGridControl<T extends BaseGridType>(config: UseDa
         search: (search: string) => void;
         changeTab: (tab: import("../types/schema").Tab, filterBehavior: import("..").ChangeTabFilterBehavior) => void;
         setSelectedRows: (rows: any[]) => void;
+        setColumnsOrder: (columns: string[]) => void;
         hideColumn: (name: string) => void;
         showColumn: (name: string) => void;
         updateUserConfig: (userConfig: DataGridUserConfig<any>) => void;

package/user-config-storage-adapters/local-storage.d.ts

@@ -1,3 +1,4 @@
 import { Schema } from "../types";
 import { UserConfigStorageAdapter } from "../types/user-config-storage-adapter";
 export declare function useUserConfigLocalStorageAdapter(schema: Schema<any>): UserConfigStorageAdapter;
+export declare function useClearLocalStorageUserConfig(schema: Schema<any>): () => void;

package/user-config-storage-adapters/local-storage.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUserConfigLocalStorageAdapter = useUserConfigLocalStorageAdapter;
+exports.useClearLocalStorageUserConfig = useClearLocalStorageUserConfig;
 const react_1 = require("react");
 const action_1 = require("../use-data-grid-control/action");
 const get_config_key_1 = require("../utils/get-config-key");
@@ -30,3 +31,10 @@ function useUserConfigLocalStorageAdapter(schema) {
         },
     }), [configKey]);
 }
+function useClearLocalStorageUserConfig(schema) {
+    const configKey = (0, get_config_key_1.getConfigKey)(schema);
+    return () => {
+        window.localStorage.setItem(configKey, "");
+        window.location.reload();
+    };
+}