mig-schema-table 3.0.117 → 3.0.119

package/dist/SchemaTable/ColumnResizers/index.d.ts

@@ -1,7 +1,9 @@
 interface IColumnResizersProps {
     columnWidths: number[];
     onColumnWidthsChange: (newColumnWidths: number[]) => void;
+    resizeColumnIndex: number;
+    setResizeColumnIndex: (newResizeColumnIndex: number) => void;
     tableBodyHeight: number;
 }
-declare const ColumnResizers: ({ columnWidths, onColumnWidthsChange, tableBodyHeight, }: IColumnResizersProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColumnResizers: ({ columnWidths, onColumnWidthsChange, resizeColumnIndex, setResizeColumnIndex, tableBodyHeight, }: IColumnResizersProps) => import("react/jsx-runtime").JSX.Element;
 export default ColumnResizers;

package/dist/SchemaTable/ColumnResizers/index.js

@@ -1,32 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { MINIMUM_COLUMN_WIDTH } from "../../inc/constant";
-const ColumnResizers = ({ columnWidths, onColumnWidthsChange, tableBodyHeight, }) => {
-    const [dragColumnIndex, setDragColumnIndex] = React.useState(-1);
+const ColumnResizers = ({ columnWidths, onColumnWidthsChange, resizeColumnIndex, setResizeColumnIndex, tableBodyHeight, }) => {
     const [dragStartX, setDragStartX] = React.useState(0);
     const setColumnDelta = React.useCallback((columnDelta) => {
         const newColumnWidths = columnWidths.map((columnWidth, columnWidthIndex) => {
-            if (columnWidthIndex === dragColumnIndex) {
+            if (columnWidthIndex === resizeColumnIndex) {
                 return Math.max(columnWidth + columnDelta, MINIMUM_COLUMN_WIDTH);
             }
             return columnWidth;
         });
         onColumnWidthsChange(newColumnWidths);
-    }, [columnWidths, dragColumnIndex, onColumnWidthsChange]);
+    }, [columnWidths, resizeColumnIndex, onColumnWidthsChange]);
     let pointer = 0;
     const onDragStart = React.useCallback((e) => {
-        setDragColumnIndex(parseInt(e.currentTarget.dataset.columnIndex));
+        setResizeColumnIndex(parseInt(e.currentTarget.dataset.columnIndex));
         setDragStartX(e.clientX);
-    }, []);
+    }, [setResizeColumnIndex]);
     const onDragEnd = React.useCallback((e) => {
         setColumnDelta(e.clientX - dragStartX);
         setDragStartX(0);
-        setDragColumnIndex(-1);
-    }, [dragStartX, setColumnDelta]);
+        setResizeColumnIndex(-1);
+    }, [dragStartX, setColumnDelta, setResizeColumnIndex]);
     return (_jsx("div", { children: columnWidths.map((columnWidth, columnIndex) => {
             pointer += columnWidth;
             const classNames = ["schema-table__column_resizer"];
-            if (columnIndex === dragColumnIndex) {
+            if (columnIndex === resizeColumnIndex) {
                 classNames.push("schema-table__column_resizer--dragged");
             }
             return (_jsx("div", { style: { left: pointer, bottom: tableBodyHeight }, className: classNames.join(" "), draggable: "true", "data-column-index": columnIndex, onDragStart: onDragStart, onDragEnd: onDragEnd }, columnIndex));

package/dist/SchemaTable/Th/index.d.ts

@@ -12,6 +12,7 @@ interface IThProps {
     isAllChecked?: boolean;
     isSortable: boolean;
     numberOfSelectedRows?: number;
+    onColumnPositionChange?: (sourceColumnName: string, destinationColumnName: string) => void;
     onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     propConfig?: IColumnConfig<any>;
     propIsRequired: boolean;
@@ -24,5 +25,5 @@ interface IThProps {
     style: CSSProperties;
     translate: (key: string, ...args: Array<string | number>) => string;
 }
-declare const _default: ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, translate, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onColumnPositionChange, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, translate, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -8,7 +8,9 @@ export var EColumnFilterStatus;
     EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
     EColumnFilterStatus["ACTIVE"] = "ACTIVE";
 })(EColumnFilterStatus || (EColumnFilterStatus = {}));
-const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, translate, }) => {
+const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onColumnPositionChange, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, translate, }) => {
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [isDropTarget, setIsDropTarget] = React.useState(false);
     const classNames = [
         `schema-table__th`,
         `schema-table__th--filter-${columnFilterStatus}`,
@@ -18,6 +20,12 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
     if (sortAsc !== undefined) {
         classNames.push("schema-table__th--sorted");
     }
+    if (isDragging) {
+        classNames.push(`schema-table__th--dragging`);
+    }
+    if (isDropTarget) {
+        classNames.push(`schema-table__th--drop-target`);
+    }
     const onLabelClick = React.useCallback(() => {
         if (!isSortable) {
             return;
@@ -67,11 +75,49 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
         schema === null || schema === void 0 ? void 0 : schema.format,
         translate,
     ]);
+    const onDragStart = React.useCallback((e) => {
+        if (!onColumnPositionChange) {
+            return;
+        }
+        setIsDragging(true);
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.dropEffect = "move";
+        e.dataTransfer.setData("text/plain", propName);
+    }, [onColumnPositionChange, propName]);
+    const onDragEnd = React.useCallback((e) => {
+        if (!onColumnPositionChange) {
+            return;
+        }
+        setIsDragging(false);
+    }, [onColumnPositionChange]);
+    const onDragOver = React.useCallback((e) => {
+        if (!onColumnPositionChange) {
+            return;
+        }
+        e.preventDefault();
+        setIsDropTarget(true);
+    }, [onColumnPositionChange]);
+    const onDragLeave = React.useCallback(() => {
+        if (!onColumnPositionChange) {
+            return;
+        }
+        setIsDropTarget(false);
+    }, [onColumnPositionChange]);
+    const onDrop = React.useCallback((e) => {
+        if (!onColumnPositionChange || !propName) {
+            return;
+        }
+        const sourcePropName = e.dataTransfer.getData("text/plain");
+        if (!sourcePropName) {
+            return;
+        }
+        onColumnPositionChange(sourcePropName, propName);
+    }, [onColumnPositionChange, propName]);
     if (propName === SELECT_ALL_COLUMN_NAME) {
         return (_jsx("div", Object.assign({ style: style, className: classNames.join(" ") }, { children: _jsx("div", Object.assign({ style: {
                     width: "100%",
                     textAlign: "center",
-                }, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
+                }, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", name: "selectAll", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
     }
     const title = typeof labelBody === "string" ? labelBody : undefined;
     if (!schema && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
@@ -90,6 +136,6 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
                 classNames.push(`text-${propConfig.align}`);
             }
     }
-    return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" "), title: title }, { children: [_jsxs("div", Object.assign({ className: "schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick }, { children: [_jsx("span", Object.assign({ className: "schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "schema-table__th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
+    return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" "), title: title }, { children: [_jsxs("div", Object.assign({ className: "schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }, { children: [_jsx("span", Object.assign({ className: "schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "schema-table__th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
 };
 export default React.memo(Th);

package/dist/SchemaTable/index.js

@@ -23,7 +23,7 @@ import Th, { EColumnFilterStatus } from "./Th";
 import ThMenu from "./ThMenu";
 import { saveAs } from "file-saver";
 import ColumnResizers from "./ColumnResizers";
-import { difference, sum } from "lodash";
+import { difference, isFinite, sum } from "lodash";
 import { Workbook } from "exceljs";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 const numberFormatter = new Intl.NumberFormat("nl-NL");
@@ -51,6 +51,8 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
         (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
 }
 function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus = true, enableRowCounter = true, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isResizable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, settingsStorageKey, style, translate = defaultTranslate, useFilterStateHash, width, tableRef, }) {
+    const [columnNames, setColumnNames] = React.useState();
+    const [resizeColumnIndex, setResizeColumnIndex] = React.useState(-1);
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [thMenuConfig, setThMenuConfig] = React.useState();
@@ -98,50 +100,61 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         sourceData,
     ]);
     const { properties = {}, required = [] } = schema;
-    const columnNames = React.useMemo(() => {
-        const columns = Object.keys(properties);
+    const serializedStoredColumnNames = settingsStorageKey
+        ? localStorage.getItem(`${settingsStorageKey}.columnNames`)
+        : null;
+    const serializedStoredColumnWidths = settingsStorageKey
+        ? localStorage.getItem(`${settingsStorageKey}.columnWidths`)
+        : null;
+    React.useEffect(() => {
+        const storedColumnNames = serializedStoredColumnNames
+            ? JSON.parse(serializedStoredColumnNames)
+            : undefined;
+        let freshColumnNames = Object.keys(properties);
         if (onCheckedIndexesChange) {
-            columns.unshift(SELECT_ALL_COLUMN_NAME);
+            freshColumnNames.unshift(SELECT_ALL_COLUMN_NAME);
         }
-        if (!config) {
-            return columns;
+        if (config) {
+            Object.keys(config).forEach((configKey) => {
+                if (!freshColumnNames.includes(configKey)) {
+                    freshColumnNames.push(configKey);
+                }
+            });
+            const invisibleColumns = Object.entries(config).reduce((prev, [propName, propConfig]) => {
+                if (propConfig.hidden) {
+                    prev.push(propName);
+                }
+                return prev;
+            }, []);
+            freshColumnNames = freshColumnNames
+                .filter((key) => !invisibleColumns.includes(key))
+                .sort((columnA, columnB) => {
+                let orderA = config[columnA] ? config[columnA].order : undefined;
+                if (orderA === undefined) {
+                    orderA = Object.keys(properties).findIndex((propName) => propName === columnA);
+                }
+                let orderB = config[columnB] ? config[columnB].order : undefined;
+                if (orderB === undefined) {
+                    orderB = Object.keys(properties).findIndex((propName) => propName === columnB);
+                }
+                if (columnB === SELECT_ALL_COLUMN_NAME ||
+                    columnA === SELECT_ALL_COLUMN_NAME) {
+                    return 0;
+                }
+                if (orderA === -1) {
+                    return 1;
+                }
+                if (orderB === -1) {
+                    return -1;
+                }
+                return orderA - orderB;
+            });
         }
-        Object.keys(config).forEach((configKey) => {
-            if (!columns.includes(configKey)) {
-                columns.push(configKey);
-            }
-        });
-        const invisibleColumns = Object.entries(config).reduce((prev, [propName, propConfig]) => {
-            if (propConfig.hidden) {
-                prev.push(propName);
-            }
-            return prev;
-        }, []);
-        return columns
-            .filter((key) => !invisibleColumns.includes(key))
-            .sort((columnA, columnB) => {
-            let orderA = config[columnA] ? config[columnA].order : undefined;
-            if (orderA === undefined) {
-                orderA = Object.keys(properties).findIndex((propName) => propName === columnA);
-            }
-            let orderB = config[columnB] ? config[columnB].order : undefined;
-            if (orderB === undefined) {
-                orderB = Object.keys(properties).findIndex((propName) => propName === columnB);
-            }
-            if (columnB === SELECT_ALL_COLUMN_NAME ||
-                columnA === SELECT_ALL_COLUMN_NAME) {
-                return 0;
-            }
-            if (orderA === -1) {
-                return 1;
-            }
-            if (orderB === -1) {
-                return -1;
-            }
-            return orderA - orderB;
-        });
-    }, [config, onCheckedIndexesChange, properties]);
-    const renderData = React.useMemo(() => sourceData
+        setColumnNames((storedColumnNames === null || storedColumnNames === void 0 ? void 0 : storedColumnNames.length) === freshColumnNames.length
+            ? storedColumnNames
+            : freshColumnNames);
+    }, [config, onCheckedIndexesChange, properties, serializedStoredColumnNames]);
+    const renderData = React.useMemo(() => sourceData && columnNames
         ? sourceData.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
             var _a;
             const schema = properties[propName];
@@ -200,11 +213,11 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             }
         }, { _index: rowIndex }))
         : undefined, [sourceData, columnNames, properties, config, translate]);
-    const columnCount = columnNames.length;
+    const columnCount = columnNames ? columnNames.length : 0;
     const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
         let fixedWidthColumnsWidth = 0;
         let dynamicWidthColumnCount = 0;
-        columnNames.forEach((propName) => {
+        (columnNames || []).forEach((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
                 fixedWidthColumnsWidth += SELECT_ALL_COLUMN_WIDTH;
                 return;
@@ -219,17 +232,16 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }, 0);
         return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
     }, [columnNames, config]);
-    const serializedStoredSettings = settingsStorageKey
-        ? localStorage.getItem(settingsStorageKey)
-        : null;
     React.useEffect(() => {
-        var _a;
-        const storedSettings = serializedStoredSettings
-            ? JSON.parse(serializedStoredSettings)
-            : {};
+        if (!columnNames) {
+            return;
+        }
+        const storedColumnWidths = serializedStoredColumnWidths
+            ? JSON.parse(serializedStoredColumnWidths)
+            : undefined;
         const dynamicColumnWidth = Math.max(Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount), MINIMUM_COLUMN_WIDTH);
         let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
-        const newColumnWidths = columnNames.map((propName) => {
+        const freshColumnWidths = columnNames.map((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
                 return SELECT_ALL_COLUMN_WIDTH;
             }
@@ -243,15 +255,15 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             }
             return dynamicColumnWidth;
         });
-        setColumnWidths(((_a = storedSettings === null || storedSettings === void 0 ? void 0 : storedSettings.columnWidths) === null || _a === void 0 ? void 0 : _a.length) === newColumnWidths.length
-            ? storedSettings.columnWidths
-            : newColumnWidths);
+        setColumnWidths((storedColumnWidths === null || storedColumnWidths === void 0 ? void 0 : storedColumnWidths.length) === freshColumnWidths.length
+            ? storedColumnWidths
+            : freshColumnWidths);
     }, [
         columnNames,
         config,
         dynamicWidthColumnCount,
         fixedWidthColumnsWidth,
-        serializedStoredSettings,
+        serializedStoredColumnWidths,
         settingsStorageKey,
         width,
     ]);
@@ -265,6 +277,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         return renderData.filter((item) => {
             const lcSearchQuery = searchQuery.toLowerCase();
             if (searchQuery &&
+                columnNames &&
                 !columnNames.find((columnName) => `${item[columnName]}`.toLowerCase().includes(lcSearchQuery))) {
                 return false;
             }
@@ -459,7 +472,35 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         setSortAsc(x);
     }, [isDataFunction]);
+    const onColumnWidthsChange = React.useCallback((newColumnWidths) => {
+        if (settingsStorageKey) {
+            localStorage.setItem(`${settingsStorageKey}.columnWidths`, JSON.stringify(newColumnWidths));
+        }
+        setColumnWidths(newColumnWidths);
+    }, [settingsStorageKey]);
+    const onColumnPositionChange = React.useCallback((dragColumnName, dropColumnName) => {
+        if (!columnNames || !columnWidths) {
+            return;
+        }
+        // First move the actual name...
+        const dragColumnIndex = columnNames.indexOf(dragColumnName);
+        let newColumnNames = [...columnNames];
+        newColumnNames.splice(dragColumnIndex, 1);
+        const dropColumnIndex = newColumnNames.indexOf(dropColumnName);
+        newColumnNames.splice(dropColumnIndex + 1, 0, dragColumnName);
+        localStorage.setItem(`${settingsStorageKey}.columnNames`, JSON.stringify(newColumnNames));
+        setColumnNames(newColumnNames);
+        // ...then make sure the width of column is moved as well
+        let newColumnWidths = [...columnWidths];
+        const draggedColumnWidth = newColumnWidths[dragColumnIndex];
+        newColumnWidths.splice(dragColumnIndex, 1);
+        newColumnWidths.splice(dropColumnIndex + 1, 0, draggedColumnWidth);
+        onColumnWidthsChange(newColumnWidths);
+    }, [columnNames, columnWidths, onColumnWidthsChange, settingsStorageKey]);
     const ConfiguredTh = React.useCallback(({ style, index }) => {
+        if (!columnNames || !isFinite(style.left)) {
+            return null;
+        }
         const propName = columnNames[index];
         const propSchema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
@@ -475,7 +516,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         return (_jsx(Th, { columnFilterStatus: columnFilterStatus, 
             // disableColumnFilter={disableColumnFilter}
-            isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig: setThMenuConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, translate: translate }));
+            isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, onColumnPositionChange: resizeColumnIndex === -1 && settingsStorageKey
+                ? onColumnPositionChange
+                : undefined, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig: setThMenuConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, translate: translate }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
@@ -484,11 +527,14 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         isAllRowsChecked,
         isColumnFilterable,
         isSortable,
+        onColumnPositionChange,
         onSelectAllIndexesHandler,
         onSetSortAsc,
         onSetSortColumn,
         properties,
         required,
+        resizeColumnIndex,
+        settingsStorageKey,
         sortAsc,
         sortColumn,
         translate,
@@ -647,20 +693,15 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             console.error("Error generating Excel file:", error);
         });
     }, [sortedRenderData]);
-    const onColumnWidthsChange = React.useCallback((newColumnWidths) => {
-        if (settingsStorageKey) {
-            localStorage.setItem(settingsStorageKey, JSON.stringify({ columnWidths: newColumnWidths }));
-        }
-        setColumnWidths(newColumnWidths);
-    }, [settingsStorageKey]);
     const onClearSettingsButtonClick = React.useCallback(() => {
         if (!settingsStorageKey) {
             return;
         }
-        localStorage.removeItem(settingsStorageKey);
+        localStorage.removeItem(`${settingsStorageKey}.columnNames`);
+        localStorage.removeItem(`${settingsStorageKey}.columnWidths`);
         setColumnWidths(undefined);
     }, [settingsStorageKey]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: Math.min(rowWidth, width) }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null, settingsStorageKey ? (_jsx("button", Object.assign({ onClick: onClearSettingsButtonClick, style: { marginLeft: 8 }, disabled: !serializedStoredSettings }, { children: translate("clearSettings") }))) : null] })), columnWidths ? (_jsxs("div", Object.assign({ className: "schema-table__column_resize_container" }, { children: [_jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: Math.min(rowWidth, width) }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", name: "search", autoComplete: "off", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null, settingsStorageKey ? (_jsx("button", Object.assign({ onClick: onClearSettingsButtonClick, style: { marginLeft: 8 }, disabled: !serializedStoredColumnNames && !serializedStoredColumnWidths }, { children: translate("clearSettings") }))) : null] })), columnNames && columnWidths ? (_jsxs("div", Object.assign({ className: "schema-table__column_resize_container" }, { children: [_jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
                             width: rowWidth,
                             height: Math.max(50, tableBodyHeight),
                             border: "1px solid #BBB",
@@ -669,6 +710,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                             backgroundColor: "#CCC",
                             alignItems: "center",
                             justifyContent: "center",
-                        } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), isResizable ? (_jsx(ColumnResizers, { columnWidths: columnWidths, onColumnWidthsChange: onColumnWidthsChange, tableBodyHeight: tableBodyHeight })) : null] }))) : null, createPortal(thMenuConfig ? (_jsx(ThMenu, { isFilterable: !!isColumnFilterable, isSortable: getIsColumnSortable(!!isSortable, schema.properties[thMenuConfig.propName], thMenuConfig.propConfig), onChange: onSchemaColumnFilterChange, onClose: onPopoverClose, onInputKeyDown: onInputKeyDown, propConfig: thMenuConfig.propConfig, propIsRequired: thMenuConfig.propIsRequired, propName: thMenuConfig.propName, propSchema: schema.properties[thMenuConfig.propName], referenceElement: thMenuConfig.referenceElement, setSortAsc: setSortAsc, setSortColumn: setSortColumn, translate: translate, value: columnFilterMap[thMenuConfig.propName] })) : null, document.body)] })));
+                        } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), isResizable ? (_jsx(ColumnResizers, { columnWidths: columnWidths, onColumnWidthsChange: onColumnWidthsChange, resizeColumnIndex: resizeColumnIndex, setResizeColumnIndex: setResizeColumnIndex, tableBodyHeight: tableBodyHeight })) : null] }))) : null, createPortal(thMenuConfig ? (_jsx(ThMenu, { isFilterable: !!isColumnFilterable, isSortable: getIsColumnSortable(!!isSortable, schema.properties[thMenuConfig.propName], thMenuConfig.propConfig), onChange: onSchemaColumnFilterChange, onClose: onPopoverClose, onInputKeyDown: onInputKeyDown, propConfig: thMenuConfig.propConfig, propIsRequired: thMenuConfig.propIsRequired, propName: thMenuConfig.propName, propSchema: schema.properties[thMenuConfig.propName], referenceElement: thMenuConfig.referenceElement, setSortAsc: setSortAsc, setSortColumn: setSortColumn, translate: translate, value: columnFilterMap[thMenuConfig.propName] })) : null, document.body)] })));
 }
 export default React.memo(SchemaTable);

package/dist/index.css

@@ -74,6 +74,18 @@
 .schema-table__th--sorted {
   background-color: #eff6fb;
 }
+.schema-table__th--dragging {
+  opacity: 0.5;
+}
+.schema-table__th--dragging .schema-table__th__trigger-el {
+  display: none !important;
+}
+.schema-table__th--drop-target {
+  border-right: 3px dashed green;
+}
+.schema-table__th--drop-target .schema-table__th__trigger-el {
+  display: none !important;
+}
 .schema-table__th--filter-ACTIVE .schema-table__th__label-body-text {
   text-decoration: underline;
   font-style: italic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.117",
+  "version": "3.0.119",
   "main": "dist/index.js",
   "files": [
     "dist/"