mig-schema-table 3.0.96 → 3.0.97

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

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

package/dist/SchemaTable/ColumnResizers/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import "./index.scss";
+const MINIMUM_COLUMN_WIDTH = 25;
+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);
+            }
+            return columnWidth;
+        });
+        setColumnWidths(newColumnWidths);
+    }, [columnWidths, dragColumnIndex, setColumnWidths]);
+    let pointer = 0;
+    const onDragStart = React.useCallback((e) => {
+        setDragColumnIndex(parseInt(e.currentTarget.dataset.columnIndex));
+        setDragStartX(e.clientX);
+    }, []);
+    const onDragEnd = React.useCallback((e) => {
+        setColumnDelta(e.clientX - dragStartX);
+        setDragStartX(0);
+        setDragColumnIndex(-1);
+    }, [dragStartX, setColumnDelta]);
+    return (_jsx("div", { children: columnWidths.map((columnWidth, columnIndex) => {
+            pointer += columnWidth;
+            const classNames = ["schema-table__column_resizer"];
+            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));
+        }) }));
+};
+export default ColumnResizers;

package/dist/SchemaTable/index.d.ts

@@ -31,6 +31,7 @@ export interface ISchemaTableProps<T> {
     getRowSelected?: (rowData: T, dataIndex: number) => boolean;
     isColumnFilterable?: boolean;
     isExportable?: boolean;
+    isResizable?: boolean;
     isSearchable?: boolean;
     isSortable?: boolean;
     maxHeight?: number;
@@ -58,6 +59,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, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: 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, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -22,6 +22,7 @@ import Th, { EColumnFilterStatus } from "./Th";
 import ThMenu from "./ThMenu";
 import { saveAs } from "file-saver";
 import { unparse } from "papaparse";
+import ColumnResizers from "./ColumnResizers";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 const numberFormatter = new Intl.NumberFormat("nl-NL");
 const currencyFormatter = new Intl.NumberFormat("nl-NL", {
@@ -46,7 +47,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
     return !!(isTableSortable &&
         (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, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, style, translate = defaultTranslate, useFilterStateHash, width, }) {
+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, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [thMenuConfig, setThMenuConfig] = React.useState();
@@ -203,30 +204,22 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }, 0);
         return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
     }, [columnNames, config]);
-    const columnWidths = React.useMemo(() => {
-        const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
-        let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
-        return 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 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;
+    }));
     const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
     const filteredRenderData = React.useMemo(() => {
         if (!renderData ||
@@ -593,15 +586,15 @@ 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] })), _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}`), 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}`)) : (_jsx("div", Object.assign({ style: {
-                    width: rowWidth,
-                    height: Math.max(50, tableBodyHeight),
-                    border: "1px solid #BBB",
-                    textAlign: "center",
-                    display: "flex",
-                    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..." })) }))), 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] })));
+    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: {
+                            width: rowWidth,
+                            height: Math.max(50, tableBodyHeight),
+                            border: "1px solid #BBB",
+                            textAlign: "center",
+                            display: "flex",
+                            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] })));
 }
 export default React.memo(SchemaTable);

package/dist/index.css

@@ -47,6 +47,9 @@
 .schema-table__row_counter {
   font-size: 0.835rem;
 }
+.schema-table__column_resize_container {
+  position: relative;
+}
 
 .schema-table__th {
   background-color: #fcfcfc;

package/package.json

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