mig-schema-table 3.0.27 → 3.0.29

package/dist/component/SchemaTable/Th/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { uncamel } from "../../inc/string";
+import { SELECT_ALL_COLUMN_NAME } from "../constants";
+export var EColumnFilterStatus;
+(function (EColumnFilterStatus) {
+    EColumnFilterStatus["UNAVAILABLE"] = "UNAVAILABLE";
+    EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
+    EColumnFilterStatus["ACTIVE"] = "ACTIVE";
+})(EColumnFilterStatus || (EColumnFilterStatus = {}));
+const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
+    const thDivProps = {
+        style,
+        className: `schema-table__th schema-table__th--column-filter-status-${columnFilterStatus} ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
+    };
+    const onSortButtonClick = React.useCallback(() => {
+        if (sortAsc === undefined) {
+            setSortColumn(propName);
+            setSortAsc(!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc));
+            return;
+        }
+        setSortAsc((sortAsc) => !sortAsc);
+    }, [
+        propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc,
+        propName,
+        setSortAsc,
+        setSortColumn,
+        sortAsc,
+    ]);
+    const onFilterButtonClick = React.useCallback((e) => {
+        if (columnFilterStatus === EColumnFilterStatus.ACTIVE &&
+            disableColumnFilter) {
+            disableColumnFilter(propName);
+            return;
+        }
+        if (!setPopoverConfig) {
+            return;
+        }
+        const referenceElement = e.currentTarget;
+        setPopoverConfig((popoverConfig) => {
+            if (popoverConfig) {
+                return undefined;
+            }
+            return {
+                referenceElement,
+                propName,
+            };
+        });
+    }, [columnFilterStatus, disableColumnFilter, propName, setPopoverConfig]);
+    if (propName === SELECT_ALL_COLUMN_NAME) {
+        return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
+                    width: "100%",
+                    textAlign: "center",
+                }, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
+    }
+    if (!schema) {
+        return _jsx("div", Object.assign({}, thDivProps));
+    }
+    switch (schema.type) {
+        case "boolean":
+            thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
+            break;
+        case "integer":
+        case "number":
+            thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
+            break;
+        default:
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
+                thDivProps.className += ` text-${propConfig.align}`;
+            }
+    }
+    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortable) === false, onClick: onSortButtonClick }, { children: [(propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined
+                        ? uncamel(propName)
+                        : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined
+                    ? uncamel(propName)
+                    : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" }, fill: "currentColor" }, { children: _jsx("polygon", { points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
+};
+export default React.memo(Th);

package/dist/component/SchemaTable/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
+export declare const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/component/SchemaTable/constants.js

@@ -0,0 +1,2 @@
+export const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
+export const SELECT_ALL_COLUMN_WIDTH = 40;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { IColumnConfig } from "../types";
+export interface ISchemaTableProps<T> {
+    Heading?: any;
+    checkedIndexes?: number[];
+    config?: {
+        [propName: string]: IColumnConfig<T>;
+    };
+    customElement?: React.ReactNode;
+    data: T[];
+    defaultSortAsc?: boolean;
+    defaultSortColumn?: keyof T;
+    getRowClassName?: (rowData: T, dataIndex: number) => string;
+    getRowSelected?: (rowData: T) => boolean;
+    maxHeight?: number;
+    isSearchable?: boolean;
+    isColumnFilterable?: boolean;
+    isSortable?: boolean;
+    onCheckedIndexesChange?: (dataIndex: number[]) => void;
+    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
+    rowHeight?: number;
+    schema: oas31.SchemaObject;
+    searchPlaceholder?: string;
+    style?: React.CSSProperties;
+    width: number;
+}
+export type TColumnFilterValue = string | number | boolean | {
+    from?: Date;
+    to?: Date;
+};
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof SchemaTable;
+export default _default;

package/dist/component/SchemaTable/index.js

@@ -0,0 +1,343 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { VariableSizeGrid, VariableSizeList } from "react-window";
+import { localeFormat } from "../inc/date";
+import { uncamel } from "../inc/string";
+import Th, { EColumnFilterStatus } from "./Th";
+import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
+import Td from "./Td";
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
+import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
+import { sum } from "lodash";
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
+    const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
+    const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [columnFilterMap, setColumnFilterMap] = React.useState({});
+    const [popoverConfig, setPopoverConfig] = React.useState();
+    const { properties = {} } = schema;
+    const columnNames = React.useMemo(() => {
+        const columns = Object.keys(properties);
+        if (onCheckedIndexesChange) {
+            columns.unshift(SELECT_ALL_COLUMN_NAME);
+        }
+        if (!config) {
+            return columns;
+        }
+        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(() => data
+        ? data.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
+            var _a;
+            const schema = properties[propName];
+            const propConfig = config ? config[propName] : undefined;
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) {
+                prev[propName] = propConfig.renderData(object, rowIndex);
+                return prev;
+            }
+            if (!schema || propName === SELECT_ALL_COLUMN_NAME) {
+                prev[propName] = "?";
+                return prev;
+            }
+            const rawValue = object[propName];
+            switch (schema.type) {
+                case "array":
+                    prev[propName] =
+                        ((_a = schema.items) === null || _a === void 0 ? void 0 : _a.type) === "string" &&
+                            rawValue
+                            ? rawValue.map(uncamel).join(", ")
+                            : JSON.stringify(rawValue);
+                    return prev;
+                case "boolean":
+                    prev[propName] = rawValue ? "✓" : "✕";
+                    return prev;
+                case "integer":
+                    prev[propName] = [undefined, null].includes(rawValue)
+                        ? ""
+                        : `${rawValue}`;
+                    return prev;
+                // @ts-ignore
+                case "string":
+                    if (schema.format === "date" && rawValue) {
+                        prev[propName] =
+                            rawValue === "2999-12-31"
+                                ? "-"
+                                : localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
+                        return prev;
+                    }
+                    if (schema.format === "date-time" && rawValue) {
+                        prev[propName] = localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_TIME_FORMAT);
+                        return prev;
+                    }
+                    if (schema.enum) {
+                        prev[propName] = rawValue ? uncamel(rawValue) : "";
+                        return prev;
+                    }
+                // fallthrough
+                default:
+                    prev[propName] = rawValue ? `${rawValue}` : "";
+                    return prev;
+            }
+        }, { _index: rowIndex }))
+        : undefined, [columnNames, config, data, properties]);
+    const columnCount = columnNames.length;
+    const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
+        let fixedWidthColumnsWidth = 0;
+        let dynamicWidthColumnCount = 0;
+        columnNames.forEach((propName) => {
+            if (propName === SELECT_ALL_COLUMN_NAME) {
+                fixedWidthColumnsWidth += SELECT_ALL_COLUMN_WIDTH;
+                return;
+            }
+            const propConfig = config ? config[propName] : undefined;
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
+                fixedWidthColumnsWidth += propConfig.width;
+            }
+            else {
+                dynamicWidthColumnCount += 1;
+            }
+        }, 0);
+        return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
+    }, [columnNames, config]);
+    const columnWidths = React.useMemo(() => {
+        const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
+        const result = columnNames.map((propName) => {
+            if (propName === SELECT_ALL_COLUMN_NAME) {
+                return SELECT_ALL_COLUMN_WIDTH;
+            }
+            const propConfig = config ? config[propName] : undefined;
+            return (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) || dynamicColumnWidth;
+        });
+        const totalWidth = sum(result);
+        if (totalWidth < width && dynamicWidthColumnCount) {
+            // find the last dynamic width column and adjust to overcome rounding differences
+            const lastDynamicColumnName = [...columnNames]
+                .reverse()
+                .find((propName) => !config || !config[propName].width);
+            if (lastDynamicColumnName) {
+                const lastDynamicColumnIndex = columnNames.indexOf(lastDynamicColumnName);
+                result[lastDynamicColumnIndex] += width - totalWidth;
+            }
+        }
+        return result;
+    }, [
+        columnNames,
+        config,
+        dynamicWidthColumnCount,
+        fixedWidthColumnsWidth,
+        width,
+    ]);
+    const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
+    const filteredRenderData = React.useMemo(() => {
+        if (!renderData || (!isColumnFilterable && !isSearchable)) {
+            return renderData;
+        }
+        return renderData.filter((item) => {
+            const lcSearchQuery = searchQuery.toLowerCase();
+            if (searchQuery &&
+                !columnNames.find((columnName) => `${item[columnName]}`.toLowerCase().includes(lcSearchQuery))) {
+                return false;
+            }
+            let result = true;
+            Object.entries(columnFilterMap).forEach(([propName, columnFilterValue]) => {
+                if (!result || columnFilterValue === undefined) {
+                    return;
+                }
+                const propSchema = properties[propName];
+                // @ts-ignore
+                const rawValue = data[item._index][propName];
+                switch (propSchema.type) {
+                    case "boolean":
+                    case "integer":
+                        result = rawValue === columnFilterValue;
+                        break;
+                    // @ts-ignore
+                    case "string":
+                        if (typeof columnFilterValue === "object" &&
+                            (propSchema.format === "date" ||
+                                propSchema.format === "date-time")) {
+                            const { from, to } = columnFilterValue;
+                            const rawDate = rawValue ? new Date(rawValue) : undefined;
+                            if ((from && (!rawDate || rawDate < from)) ||
+                                (to && (!rawDate || rawDate > to))) {
+                                result = false;
+                            }
+                            return;
+                        }
+                    // fall through
+                    default:
+                        // fallback by looking at the render value
+                        result = `${item[propName]}`
+                            .toLowerCase()
+                            .includes(`${columnFilterValue}`.toLowerCase());
+                }
+            });
+            return result;
+        });
+    }, [
+        renderData,
+        isColumnFilterable,
+        isSearchable,
+        searchQuery,
+        columnNames,
+        columnFilterMap,
+        properties,
+        data,
+    ]);
+    // Sort the filtered data
+    const sortedRenderData = React.useMemo(() => {
+        if (!sortColumn || !filteredRenderData) {
+            return filteredRenderData;
+        }
+        const sortSchema = properties[sortColumn];
+        const propConfig = config ? config[sortColumn] : undefined;
+        const columnSort = propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort;
+        if (columnSort) {
+            return filteredRenderData.sort((a, b) => {
+                const aData = data[a._index];
+                const bData = data[b._index];
+                if (!aData) {
+                    return 1;
+                }
+                if (!bData) {
+                    return -1;
+                }
+                return columnSort(aData, bData, sortAsc);
+            });
+        }
+        return filteredRenderData.sort((a, b) => {
+            const sortByValue = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortByValue) === undefined
+                ? !sortSchema ||
+                    sortSchema.type === "boolean" ||
+                    sortSchema.type === "integer" ||
+                    sortSchema.format === "date" ||
+                    sortSchema.format === "date-time" ||
+                    (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)
+                : propConfig.sortByValue;
+            const x = sortByValue && data[a._index]
+                ? // @ts-ignore
+                    data[a._index][sortColumn]
+                : a[sortColumn].toLowerCase();
+            const y = sortByValue && data[b._index]
+                ? // @ts-ignore
+                    data[b._index][sortColumn]
+                : b[sortColumn].toLowerCase();
+            if (x === y) {
+                return 0;
+            }
+            return (x < y ? 1 : -1) * (sortAsc ? -1 : 1);
+        });
+    }, [config, data, filteredRenderData, properties, sortAsc, sortColumn]);
+    const onSelectAllIndexesHandler = React.useCallback(() => {
+        if (!onCheckedIndexesChange || !filteredRenderData) {
+            return;
+        }
+        onCheckedIndexesChange(filteredRenderData.map((el) => el._index));
+    }, [onCheckedIndexesChange, filteredRenderData]);
+    const isAllRowsChecked = React.useMemo(() => {
+        return ((checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) !== 0 &&
+            (filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.length) === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) &&
+            (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.every((checkedIndex) => filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.some((el) => el._index === checkedIndex))));
+    }, [checkedIndexes, filteredRenderData]);
+    const disableColumnFilter = React.useCallback((propName) => {
+        const newColumnFilterMap = Object.assign({}, columnFilterMap);
+        delete newColumnFilterMap[propName];
+        setColumnFilterMap(newColumnFilterMap);
+    }, [columnFilterMap]);
+    const SchemaTableTh = React.useCallback(({ style, index }) => {
+        const propName = columnNames[index];
+        const propConfig = config ? config[propName] : undefined;
+        let columnFilterStatus = isColumnFilterable && (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) !== false
+            ? EColumnFilterStatus.AVAILABLE
+            : EColumnFilterStatus.UNAVAILABLE;
+        if (columnFilterMap[propName] !== undefined) {
+            columnFilterStatus = EColumnFilterStatus.ACTIVE;
+        }
+        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propName: propName, schema: properties[propName], setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+    }, [
+        checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
+        columnFilterMap,
+        columnNames,
+        config,
+        disableColumnFilter,
+        isAllRowsChecked,
+        isColumnFilterable,
+        isSortable,
+        onSelectAllIndexesHandler,
+        properties,
+        sortAsc,
+        sortColumn,
+    ]);
+    const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
+        const propName = columnNames[columnIndex];
+        return (_jsx(Td, { checkedIndexes: checkedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
+    }, [
+        checkedIndexes,
+        columnNames,
+        config,
+        data,
+        getRowClassName,
+        getRowSelected,
+        onCheckedIndexesChange,
+        onRowClick,
+        properties,
+        rowHeight,
+        sortedRenderData,
+    ]);
+    const onSearchChange = React.useCallback((e) => {
+        setSearchQuery(e.currentTarget.value);
+    }, []);
+    const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
+    const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
+    const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
+    const tableBodyHeight = React.useMemo(() => {
+        const rowsHeight = rowHeight * rowCount;
+        const rowsMaxHeight = maxHeight ? maxHeight - (isSearchable ? 50 : 0) : 0;
+        return rowsMaxHeight && rowsMaxHeight < rowsHeight
+            ? rowsMaxHeight
+            : rowsHeight;
+    }, [maxHeight, isSearchable, rowCount, rowHeight]);
+    const onPopoverClose = React.useCallback(() => {
+        setPopoverConfig(undefined);
+    }, []);
+    const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue) => {
+        if (!popoverConfig) {
+            return;
+        }
+        if (newColumnFilterValue === undefined) {
+            disableColumnFilter(popoverConfig.propName);
+            return;
+        }
+        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
+    }, [disableColumnFilter, popoverConfig]);
+    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", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _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}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
+}
+export default React.memo(SchemaTable);

package/dist/component/SchemaTable/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/component/SchemaTable/index.test.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import SchemaTable from "./index";
+import exampleData, { exampleDataSchema } from "../../exampleData";
+it("renders an empty table", () => {
+    render(_jsx(SchemaTable, { data: [], schema: {}, width: 1 }));
+    const table = screen.getByRole("table");
+    expect(table).toBeInTheDocument();
+});
+it("should match the configured width without configuration", () => {
+    render(_jsx(SchemaTable, { data: exampleData, schema: exampleDataSchema, width: 1000 }));
+    const table = screen.getByRole("table");
+    // eslint-disable-next-line testing-library/no-node-access
+    const renderedWidth = [...table.querySelectorAll(".schema-table__th")].reduce((prev, node) => prev + parseInt(node.style.width), 0);
+    expect(renderedWidth).toBe(1000);
+});

package/dist/component/inc/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
+export declare const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";

package/dist/component/inc/constant.js

@@ -0,0 +1,2 @@
+export const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
+export const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";

package/dist/component/inc/date.d.ts

@@ -0,0 +1 @@
+export declare const localeFormat: (date: Date | number, dateFormat: string) => string;

package/dist/component/inc/date.js

@@ -0,0 +1,3 @@
+import { format } from "date-fns";
+import nl from "date-fns/locale/nl";
+export const localeFormat = (date, dateFormat) => format(date, dateFormat, { locale: nl });

package/dist/component/inc/schema.d.ts

@@ -0,0 +1,2 @@
+import { SchemaObject } from "openapi3-ts/oas31";
+export declare function getEmptyObject<T>(schema: SchemaObject): T;

package/dist/component/inc/schema.js

@@ -0,0 +1,32 @@
+export function getEmptyObject(schema) {
+    const { properties = {} } = schema;
+    return Object.keys(properties).reduce((prev, propName) => {
+        const prop = properties[propName];
+        let propValue;
+        switch (prop.type) {
+            case "string":
+                propValue = prop.enum ? prop.enum[0] : prop.default || "";
+                break;
+            case "array":
+                propValue = prop.default || [];
+                break;
+            case "number":
+            case "integer":
+                propValue = prop.default || 0;
+                break;
+            case "boolean":
+                propValue = prop.default || false;
+                break;
+            case "object":
+                propValue = prop.default || getEmptyObject(prop);
+                break;
+            // eslint-disable-next-line no-fallthrough
+            default:
+                console.log(prop);
+                throw new Error("Unsupported property");
+        }
+        // @ts-ignore
+        prev[propName] = propValue;
+        return prev;
+    }, {});
+}

package/dist/component/inc/string.d.ts

@@ -0,0 +1 @@
+export declare function uncamel(camel: string): string;

package/dist/component/inc/string.js

@@ -0,0 +1,17 @@
+import { upperFirst } from "lodash";
+function isUpperCase(letter) {
+    return !!letter.match(/[A-Z]/);
+}
+export function uncamel(camel) {
+    return upperFirst(camel.replaceAll(/[A-Z]/g, (letter, position) => {
+        const prevLetter = camel[position - 1];
+        const prevIsUppercase = prevLetter ? isUpperCase(prevLetter) : false;
+        const nextLetter = camel[position + 1];
+        const nextIsUppercase = nextLetter ? isUpperCase(nextLetter) : false;
+        if (position === 0 ||
+            (prevIsUppercase && (!nextLetter || nextIsUppercase))) {
+            return letter;
+        }
+        return ` ${nextIsUppercase ? letter : letter.toLowerCase()}`;
+    }));
+}

package/dist/component/index.d.ts

@@ -0,0 +1,4 @@
+import SchemaTable from "./SchemaTable";
+import { IColumnConfig, IRenderData } from "./types";
+export type { IColumnConfig, IRenderData };
+export { SchemaTable };

package/dist/component/index.js

@@ -0,0 +1,2 @@
+import SchemaTable from "./SchemaTable";
+export { SchemaTable };

package/dist/component/types.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface IColumnConfig<T> {
+    align?: "start" | "center" | "end";
+    defaultSortDesc?: boolean;
+    hidden?: boolean;
+    hoverTitle?: string;
+    renderCell?: (rowData: T, dataIndex: number, rowIndex: number) => React.ReactElement | null;
+    renderData?: (rowData: T, dataIndex: number) => string;
+    sort?: (a: T, b: T, sortAsc: boolean) => number;
+    sortByValue?: boolean;
+    sortable?: boolean;
+    title?: string | React.ReactElement;
+    width?: number;
+    order?: number;
+    isFilterable?: boolean;
+    dateFormat?: string;
+}
+export interface IRenderData {
+    _index: number;
+    [key: string]: string | any;
+}

package/dist/component/types.js

@@ -0,0 +1 @@
+export {};

package/dist/exampleData.d.ts

@@ -0,0 +1,29 @@
+import { oas31 } from "openapi3-ts";
+export interface IExampleData {
+    jobId: string;
+    /** @enum {string} */
+    jobType: "scrape" | "clean";
+    topLevelId: number;
+    domainId: string;
+    hostId: string;
+    sourceId: string;
+    /** @enum {string} */
+    sources: ("fromIndexPage" | "manual")[];
+    priority: number;
+    /** Format: date-time */
+    insertDateTime: string;
+    /** Format: date-time */
+    scrapeStartDateTime?: string;
+    /** Format: date-time */
+    scrapeEndDateTime?: string;
+    scraperHost?: string;
+    scraperContainer?: string;
+    errorMessage?: string;
+    /** Format: url */
+    url?: string;
+    retryCount: number;
+    isError: boolean;
+}
+export declare const exampleDataSchema: oas31.SchemaObject;
+declare const exampleData: IExampleData[];
+export default exampleData;