mig-schema-table 3.0.100 → 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/index.js

@@ -54,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);
@@ -205,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 ||
@@ -587,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",
@@ -596,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.100",
+  "version": "3.0.101",
   "main": "dist/index.js",
   "files": [
     "dist/"