mig-schema-table 3.0.114 → 3.0.116

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

@@ -1,8 +1,7 @@
-import { Dispatch, SetStateAction } from "react";
 interface IColumnResizersProps {
     columnWidths: number[];
-    setColumnWidths: Dispatch<SetStateAction<undefined | number[]>>;
+    onColumnWidthsChange: (newColumnWidths: number[]) => void;
     tableBodyHeight: number;
 }
-declare const ColumnResizers: ({ columnWidths, setColumnWidths, tableBodyHeight, }: IColumnResizersProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColumnResizers: ({ columnWidths, onColumnWidthsChange, tableBodyHeight, }: IColumnResizersProps) => import("react/jsx-runtime").JSX.Element;
 export default ColumnResizers;

package/dist/SchemaTable/ColumnResizers/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { MINIMUM_COLUMN_WIDTH } from "../../inc/constant";
-const ColumnResizers = ({ columnWidths, setColumnWidths, tableBodyHeight, }) => {
+const ColumnResizers = ({ columnWidths, onColumnWidthsChange, tableBodyHeight, }) => {
     const [dragColumnIndex, setDragColumnIndex] = React.useState(-1);
     const [dragStartX, setDragStartX] = React.useState(0);
     const setColumnDelta = React.useCallback((columnDelta) => {
@@ -9,14 +9,10 @@ const ColumnResizers = ({ columnWidths, setColumnWidths, tableBodyHeight, }) =>
             if (columnWidthIndex === dragColumnIndex) {
                 return Math.max(columnWidth + columnDelta, MINIMUM_COLUMN_WIDTH);
             }
-            // Do not allow oversized tables?
-            // if (columnWidthIndex - 1 === dragColumnIndex) {
-            //   return Math.max(columnWidth - columnDelta, MINIMUM_COLUMN_WIDTH);
-            // }
             return columnWidth;
         });
-        setColumnWidths(newColumnWidths);
-    }, [columnWidths, dragColumnIndex, setColumnWidths]);
+        onColumnWidthsChange(newColumnWidths);
+    }, [columnWidths, dragColumnIndex, onColumnWidthsChange]);
     let pointer = 0;
     const onDragStart = React.useCallback((e) => {
         setDragColumnIndex(parseInt(e.currentTarget.dataset.columnIndex));

package/dist/SchemaTable/index.d.ts

@@ -43,6 +43,7 @@ export interface ISchemaTableProps<T> {
     rowHeight?: number;
     schema: oas31.SchemaObject;
     searchPlaceholder?: string;
+    settingsStorageKey: string;
     style?: React.CSSProperties;
     translate?: (key: string, ...args: Array<string | number>) => string;
     useFilterStateHash?: boolean;
@@ -61,6 +62,6 @@ export interface INumberColumnFilterValue {
     filterEmpty?: true;
 }
 export type TColumnFilterValue = string | boolean | number | IDateColumnFilterValue | INumberColumnFilterValue;
-declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isResizable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, tableRef, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isResizable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, settingsStorageKey, style, translate, useFilterStateHash, width, tableRef, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -24,7 +24,7 @@ import ThMenu from "./ThMenu";
 import { saveAs } from "file-saver";
 import ColumnResizers from "./ColumnResizers";
 import { difference, sum } from "lodash";
-import * as ExcelJS from "exceljs";
+import { Workbook } from "exceljs";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 const numberFormatter = new Intl.NumberFormat("nl-NL");
 const currencyFormatter = new Intl.NumberFormat("nl-NL", {
@@ -50,7 +50,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
         (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isSortable) !== false &&
         (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, style, translate = defaultTranslate, useFilterStateHash, width, tableRef, }) {
+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 [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [thMenuConfig, setThMenuConfig] = React.useState();
@@ -219,10 +219,17 @@ 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)
+            : {};
         const dynamicColumnWidth = Math.max(Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount), MINIMUM_COLUMN_WIDTH);
         let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
-        setColumnWidths(columnNames.map((propName) => {
+        const newColumnWidths = columnNames.map((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
                 return SELECT_ALL_COLUMN_WIDTH;
             }
@@ -235,12 +242,17 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 return dynamicColumnWidth + 1;
             }
             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);
     }, [
         columnNames,
         config,
         dynamicWidthColumnCount,
         fixedWidthColumnsWidth,
+        serializedStoredSettings,
+        settingsStorageKey,
         width,
     ]);
     const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
@@ -608,7 +620,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (!sortedRenderData) {
             return;
         }
-        const workbook = new ExcelJS.Workbook();
+        const workbook = new Workbook();
         const worksheet = workbook.addWorksheet("Data");
         if (!sortedRenderData.length) {
             return;
@@ -617,6 +629,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             "_index",
             "SELECT_ALL_COLUMN_NAME",
         ]));
+        worksheet.getRow(1).font = { bold: true };
         worksheet.addRows(sortedRenderData.map((row) => {
             const { _index, SELECT_ALL_COLUMN_NAME } = row, data = __rest(row, ["_index", "SELECT_ALL_COLUMN_NAME"]);
             return Object.values(data);
@@ -634,7 +647,17 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             console.error("Error generating Excel file:", error);
         });
     }, [sortedRenderData]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), 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] })), 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: {
+    const onColumnWidthsChange = React.useCallback((newColumnWidths) => {
+        if (settingsStorageKey) {
+            localStorage.setItem(settingsStorageKey, JSON.stringify({ columnWidths: newColumnWidths }));
+        }
+        setColumnWidths(newColumnWidths);
+    }, [settingsStorageKey]);
+    const onClearSettingsButtonClick = React.useCallback(() => {
+        localStorage.removeItem(settingsStorageKey);
+        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: {
                             width: rowWidth,
                             height: Math.max(50, tableBodyHeight),
                             border: "1px solid #BBB",
@@ -643,6 +666,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, setColumnWidths: setColumnWidths, 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, 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/package.json

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