mig-schema-table 3.0.99 → 3.0.101

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

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

package/dist/SchemaTable/ColumnResizers/index.js

@@ -5,16 +5,14 @@ const ColumnResizers = ({ columnWidths, setColumnWidths, tableBodyHeight, }) =>
     const [dragColumnIndex, setDragColumnIndex] = React.useState(-1);
     const [dragStartX, setDragStartX] = React.useState(0);
     const setColumnDelta = React.useCallback((columnDelta) => {
-        if (!columnWidths) {
-            throw new Error("Missing column widths?");
-        }
         const newColumnWidths = columnWidths.map((columnWidth, columnWidthIndex) => {
             if (columnWidthIndex === dragColumnIndex) {
                 return Math.max(columnWidth + columnDelta, MINIMUM_COLUMN_WIDTH);
             }
-            if (columnWidthIndex - 1 === 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);
@@ -35,7 +33,7 @@ const ColumnResizers = ({ columnWidths, setColumnWidths, tableBodyHeight, }) =>
             if (columnIndex === dragColumnIndex) {
                 classNames.push("schema-table__column_resizer--dragged");
             }
-            return columnIndex === columnWidths.length - 1 ? null : (_jsx("div", { style: { left: pointer, bottom: tableBodyHeight }, className: classNames.join(" "), draggable: "true", "data-column-index": columnIndex, onDragStart: onDragStart, onDragEnd: onDragEnd }, columnIndex));
+            return (_jsx("div", { style: { left: pointer, bottom: tableBodyHeight }, className: classNames.join(" "), draggable: "true", "data-column-index": columnIndex, onDragStart: onDragStart, onDragEnd: onDragEnd }, columnIndex));
         }) }));
 };
 export default ColumnResizers;

package/dist/SchemaTable/index.js

@@ -23,6 +23,7 @@ import ThMenu from "./ThMenu";
 import { saveAs } from "file-saver";
 import { unparse } from "papaparse";
 import ColumnResizers from "./ColumnResizers";
+import { sum } from "lodash";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 const numberFormatter = new Intl.NumberFormat("nl-NL");
 const currencyFormatter = new Intl.NumberFormat("nl-NL", {
@@ -53,6 +54,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     const [thMenuConfig, setThMenuConfig] = React.useState();
     const isDataFunction = data instanceof Function;
     const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
+    const [columnWidths, setColumnWidths] = React.useState();
     const [locationHash, setLocationHash] = React.useState(useFilterStateHash ? parseLocationHash(window.location.hash) : {});
     const [searchQuery, setSearchQuery] = React.useState(locationHash.searchQuery || "");
     const [columnFilterMap, setColumnFilterMap] = React.useState(locationHash.columnFilterMap || defaultColumnFilters);
@@ -204,22 +206,30 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }, 0);
         return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
     }, [columnNames, config]);
-    const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
-    let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
-    const [columnWidths, setColumnWidths] = React.useState(columnNames.map((propName) => {
-        if (propName === SELECT_ALL_COLUMN_NAME) {
-            return SELECT_ALL_COLUMN_WIDTH;
-        }
-        const propConfig = config ? config[propName] : undefined;
-        if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
-            return propConfig === null || propConfig === void 0 ? void 0 : propConfig.width;
-        }
-        if (roundingDifference) {
-            roundingDifference -= 1;
-            return dynamicColumnWidth + 1;
-        }
-        return dynamicColumnWidth;
-    }));
+    React.useEffect(() => {
+        const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
+        let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
+        setColumnWidths(columnNames.map((propName) => {
+            if (propName === SELECT_ALL_COLUMN_NAME) {
+                return SELECT_ALL_COLUMN_WIDTH;
+            }
+            const propConfig = config ? config[propName] : undefined;
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
+                return propConfig === null || propConfig === void 0 ? void 0 : propConfig.width;
+            }
+            if (roundingDifference) {
+                roundingDifference -= 1;
+                return dynamicColumnWidth + 1;
+            }
+            return dynamicColumnWidth;
+        }));
+    }, [
+        columnNames,
+        config,
+        dynamicWidthColumnCount,
+        fixedWidthColumnsWidth,
+        width,
+    ]);
     const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
     const filteredRenderData = React.useMemo(() => {
         if (!renderData ||
@@ -498,7 +508,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
     }, [isDirty, searchQuery, onSearchEnter, refreshData]);
     const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
-    const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
+    const rowWidth = React.useMemo(() => sum(columnWidths), [columnWidths]);
     const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
     const tableBodyHeight = React.useMemo(() => {
         const rowsHeight = rowHeight * rowCount;
@@ -586,7 +596,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             type: "text/csv;charset=utf-8",
         }), "export.csv");
     }, [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] })), _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 }, { 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: 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 }, { 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",
@@ -595,6 +605,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] })), 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] })));
+                        } }, { 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, 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] })));
 }
 export default React.memo(SchemaTable);

package/package.json

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