mig-schema-table 3.0.28 → 3.0.29

package/README.md

@@ -42,6 +42,7 @@ import { SchemaTable, IColumnConfig } from "mig-schema-table";
 import "mig-schema-table/dist/index.css";
 // Add this for default datepicker styling
 import "react-datepicker/dist/react-datepicker.css";
+// Optionally add bootstrap5 styles
 
 const config: { [keyName: string]: IColumnConfig } = {
   id: {

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../../index";
+interface IFilterFormComponentProps {
+    onChange: (newValue?: TColumnFilterValue) => void;
+    propSchema: oas31.SchemaObject;
+    propName: string;
+    columnFilterValue: TColumnFilterValue;
+}
+declare const _default: React.MemoExoticComponent<({ onChange, propSchema, propName, columnFilterValue, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/component/SchemaTable/SchemaColumnFilterPopover/FilterFormComponent/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { uncamel } from "../../../inc/string";
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../../inc/constant";
+import DatePicker from "react-datepicker";
+import nl from "date-fns/locale/nl";
+const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue, }) => {
+    const { type, format, minimum, maximum } = propSchema;
+    const value = columnFilterValue;
+    switch (type) {
+        case "integer":
+            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+                        onChange(e.currentTarget.value === ""
+                            ? undefined
+                            : parseInt(e.currentTarget.value));
+                    }, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
+        case "boolean":
+            let selectValue = value ? "✓" : "✕";
+            if (value === undefined) {
+                selectValue = "";
+            }
+            return (_jsxs("select", Object.assign({ className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
+                    switch (e.currentTarget.value) {
+                        case "✓":
+                            onChange(true);
+                            break;
+                        case "✕":
+                            onChange(false);
+                            break;
+                        default:
+                            onChange(undefined);
+                    }
+                } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), ["✓", "✕"].map((optionValue) => (_jsx("option", Object.assign({ value: optionValue }, { children: optionValue }), `column-filter-select-${optionValue}`)))] })));
+        // @ts-ignore
+        case "string":
+            if (propSchema.enum) {
+                return (_jsxs("select", Object.assign({ className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
+                        onChange(e.currentTarget.value || undefined);
+                    } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => (_jsx("option", Object.assign({ value: name }, { children: uncamel(name) }), `column-filter-select-${name}`)))] })));
+            }
+            if (format === "date-time" || format === "date") {
+                const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;
+                const dateRangeValue = (columnFilterValue || {
+                    from: undefined,
+                    to: undefined,
+                });
+                const startDateChangeHandler = (date) => {
+                    if (!date && !dateRangeValue.to) {
+                        onChange(undefined);
+                        return;
+                    }
+                    if (dateRangeValue.to && date && date > dateRangeValue.to) {
+                        return;
+                    }
+                    onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }));
+                };
+                const endDateChangeHandler = (date) => {
+                    if (!date && !dateRangeValue.from) {
+                        onChange(undefined);
+                        return;
+                    }
+                    if (dateRangeValue.from && date && date < dateRangeValue.from) {
+                        return;
+                    }
+                    onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
+                };
+                return (_jsxs("div", Object.assign({ className: "input-group d-flex" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })));
+            }
+        // falls through
+        default:
+            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, autoFocus: true, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+                        onChange(e.currentTarget.value || undefined);
+                    } }) })));
+    }
+};
+export default React.memo(FilterFormComponent);

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../index";
+export interface ISchemaColumnFilterPopoverConfig {
+    referenceElement: HTMLElement;
+    propName: string;
+}
+type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
+    onChange: (newValue?: TColumnFilterValue) => void;
+    propSchema: oas31.SchemaObject;
+    value: TColumnFilterValue;
+    onClose: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import FilterFormComponent from "./FilterFormComponent";
+import { usePopper } from "react-popper";
+const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, referenceElement, value, }) => {
+    const [popperElement, setPopperElement] = React.useState(null);
+    const [arrowElement, setArrowElement] = React.useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+    });
+    React.useEffect(() => {
+        const onWindowClick = (e) => {
+            if (!popperElement) {
+                return;
+            }
+            let parent = e.target;
+            while (parent && popperElement) {
+                if (parent === popperElement) {
+                    return;
+                }
+                parent =
+                    parent.parentNode === window.document ? null : parent.parentNode;
+            }
+            onClose();
+        };
+        window.addEventListener("click", onWindowClick, { capture: true });
+        return () => {
+            window.removeEventListener("click", onWindowClick, { capture: true });
+        };
+    }, [onClose, popperElement]);
+    const classNames = ["popover", "schema-column-filter-popover"];
+    if (attributes.popper) {
+        classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
+    }
+    return (_jsxs("div", Object.assign({ className: classNames.join(" "), role: "tooltip", ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [_jsx("div", { className: "popover-arrow", ref: setArrowElement, style: styles.arrow }), _jsx("div", Object.assign({ className: "popover-body" }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) }))] })));
+};
+export default React.memo(SchemaColumnFilterPopover);

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { IColumnConfig, IRenderData } from "../../types";
+interface ITdProps<T> {
+    checkedIndexes?: number[];
+    columnIndex: number;
+    data: T[];
+    getRowClassName?: (rowData: T, dataIndex: number) => string;
+    getRowSelected?: (rowData: T) => boolean;
+    rowHeight: number;
+    rowIndex: number;
+    onCheckedIndexesChange?: (dataIndex: number[]) => void;
+    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
+    propConfig?: IColumnConfig<any>;
+    propName: string;
+    propSchema: oas31.SchemaObject;
+    sortedRenderData?: IRenderData[];
+    style: React.CSSProperties;
+}
+declare function Td<T>({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: typeof Td;
+export default _default;

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { SELECT_ALL_COLUMN_NAME } from "../constants";
+function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
+    const onTdClick = React.useCallback((e) => {
+        if (!sortedRenderData || !onRowClick) {
+            return;
+        }
+        const { rowIndex } = e.currentTarget.dataset;
+        if (!rowIndex) {
+            return;
+        }
+        const row = sortedRenderData[parseInt(rowIndex, 10)];
+        onRowClick(data[row._index], row._index, e);
+    }, [data, onRowClick, sortedRenderData]);
+    const row = sortedRenderData ? sortedRenderData[rowIndex] : undefined;
+    const tdDivProps = React.useMemo(() => {
+        if (!row) {
+            return undefined;
+        }
+        return {
+            "data-row-index": rowIndex,
+            "data-column-index": columnIndex,
+            key: propName,
+            style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
+            onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
+            className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${getRowSelected && getRowSelected(data[row._index])
+                ? " schema-table__td--selected"
+                : ""} ${getRowClassName ? getRowClassName(data[row._index], row._index) : ""}`,
+            title: row[propName],
+        };
+    }, [
+        columnIndex,
+        data,
+        getRowClassName,
+        getRowSelected,
+        onTdClick,
+        propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
+        propName,
+        row,
+        rowHeight,
+        rowIndex,
+        style,
+    ]);
+    if (!row || !tdDivProps) {
+        return null;
+    }
+    if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) {
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: propConfig.renderCell(data[row._index], row._index, rowIndex) })));
+    }
+    if (propName === SELECT_ALL_COLUMN_NAME) {
+        const onChecked = () => {
+            if (!onCheckedIndexesChange) {
+                return;
+            }
+            onCheckedIndexesChange([row._index]);
+        };
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index) }) })) })));
+    }
+    if (!propSchema) {
+        return null;
+    }
+    switch (propSchema.type) {
+        case "boolean":
+            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
+            break;
+        case "number":
+        case "integer":
+            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
+            break;
+        default:
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
+                tdDivProps.className += ` text-${propConfig.align}`;
+            }
+    }
+    return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
+}
+export default React.memo(Td);

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

@@ -0,0 +1,27 @@
+import { oas31 } from "openapi3-ts";
+import React, { CSSProperties, Dispatch, SetStateAction } from "react";
+import { IColumnConfig } from "../../types";
+import { ISchemaColumnFilterPopoverConfig } from "../SchemaColumnFilterPopover";
+export declare enum EColumnFilterStatus {
+    UNAVAILABLE = "UNAVAILABLE",
+    AVAILABLE = "AVAILABLE",
+    ACTIVE = "ACTIVE"
+}
+interface IThProps {
+    columnFilterStatus: EColumnFilterStatus;
+    disableColumnFilter: (propName: string) => void;
+    isAllChecked?: boolean;
+    isSortable: boolean;
+    numberOfSelectedRows?: number;
+    onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    propConfig?: IColumnConfig<any>;
+    propName: string;
+    schema: oas31.SchemaObject;
+    setPopoverConfig?: Dispatch<SetStateAction<ISchemaColumnFilterPopoverConfig | undefined>>;
+    setSortAsc: Dispatch<SetStateAction<boolean>>;
+    setSortColumn: Dispatch<SetStateAction<string>>;
+    sortAsc?: boolean;
+    style: CSSProperties;
+}
+declare const _default: ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

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;

package/dist/exampleData.js

@@ -0,0 +1,177 @@
+export const exampleDataSchema = {
+    type: "object",
+    properties: {
+        jobId: {
+            type: "string",
+        },
+        jobType: {
+            type: "string",
+            enum: ["scrape", "clean"],
+        },
+        topLevelId: {
+            type: "integer",
+        },
+        domainId: {
+            type: "string",
+        },
+        hostId: {
+            type: "string",
+        },
+        sourceId: {
+            type: "string",
+        },
+        sources: {
+            type: "array",
+            items: {
+                type: "string",
+                enum: ["fromIndexPage", "manual"],
+            },
+        },
+        priority: {
+            type: "integer",
+            minimum: 1,
+            maximum: 9,
+        },
+        insertDateTime: {
+            type: "string",
+            format: "date-time",
+        },
+        scrapeStartDateTime: {
+            type: "string",
+            format: "date-time",
+        },
+        scrapeEndDateTime: {
+            type: "string",
+            format: "date-time",
+        },
+        scraperHost: {
+            type: "string",
+        },
+        scraperContainer: {
+            type: "string",
+        },
+        errorMessage: {
+            type: "string",
+        },
+        url: {
+            type: "string",
+            format: "url",
+        },
+        retryCount: {
+            type: "integer",
+        },
+        isError: {
+            type: "boolean",
+        },
+    },
+    required: [
+        "jobId",
+        "jobType",
+        "topLevelId",
+        "domainId",
+        "hostId",
+        "sourceId",
+        "source",
+        "priority",
+        "insertDateTime",
+        "retryCount",
+    ],
+};
+const exampleData = [
+    {
+        jobId: "Job-1",
+        jobType: "clean",
+        topLevelId: 1,
+        domainId: "1",
+        hostId: "1",
+        sourceId: "1",
+        sources: ["fromIndexPage"],
+        priority: 1,
+        insertDateTime: "2023-06-01 11:15",
+        scrapeStartDateTime: "2023-06-01 01:00",
+        scrapeEndDateTime: "2023-06-01 01:10",
+        scraperHost: "scraperHost-1",
+        scraperContainer: "scraperContainer-1",
+        errorMessage: "Failed",
+        url: "www.job1.com",
+        retryCount: 1,
+        isError: false,
+    },
+    {
+        jobId: "Job-2",
+        jobType: "scrape",
+        topLevelId: 2,
+        domainId: "2",
+        hostId: "2",
+        sourceId: "2",
+        sources: ["manual", "fromIndexPage"],
+        priority: 2,
+        insertDateTime: "2023-06-05 12:20",
+        scrapeStartDateTime: "2023-06-01 01:00",
+        scrapeEndDateTime: "2023-06-01 01:10",
+        scraperHost: "scraperHost-1",
+        scraperContainer: "scraperContainer-1",
+        errorMessage: "Failed",
+        url: "www.asdasd.com",
+        retryCount: 2,
+        isError: true,
+    },
+    {
+        jobId: "Job-3",
+        jobType: "clean",
+        topLevelId: 3,
+        domainId: "3",
+        hostId: "3",
+        sourceId: "3",
+        sources: ["fromIndexPage"],
+        priority: 1,
+        insertDateTime: "",
+        scrapeStartDateTime: "2023-06-01 01:00",
+        scrapeEndDateTime: "2023-06-01 01:10",
+        scraperHost: "scraperHost-1",
+        scraperContainer: "scraperContainer-1",
+        errorMessage: "Failed",
+        url: "www.job2.com",
+        retryCount: 3,
+        isError: false,
+    },
+    {
+        jobId: "Job-4",
+        jobType: "clean",
+        topLevelId: 3,
+        domainId: "3",
+        hostId: "3",
+        sourceId: "3",
+        sources: ["fromIndexPage"],
+        priority: 1,
+        insertDateTime: "2023-06-01 14:00",
+        scrapeStartDateTime: "2023-06-01 01:00",
+        scrapeEndDateTime: "2023-06-01 01:10",
+        scraperHost: "scraperHost-1",
+        scraperContainer: "scraperContainer-1",
+        errorMessage: "Failed",
+        url: "www.job2.com",
+        retryCount: 3,
+        isError: false,
+    },
+    {
+        jobId: "Job-5",
+        jobType: "clean",
+        topLevelId: 3,
+        domainId: "3",
+        hostId: "3",
+        sourceId: "3",
+        sources: ["fromIndexPage"],
+        priority: 1,
+        insertDateTime: "2023-06-05 14:20",
+        scrapeStartDateTime: "2023-06-01 01:00",
+        scrapeEndDateTime: "2023-06-01 01:10",
+        scraperHost: "scraperHost-1",
+        scraperContainer: "scraperContainer-1",
+        errorMessage: "Failed",
+        url: "www.job2.com",
+        retryCount: 3,
+        isError: false,
+    },
+];
+export default exampleData;

package/dist/index.css

@@ -1,7 +1,6 @@
-.react-datepicker {
-  display: flex;
+.schema-table .popover {
+  --bs-popover-max-width: 1024px;
 }
-
 .schema-table__tbody {
   overflow-x: hidden !important;
   border-collapse: collapse;
@@ -10,22 +9,27 @@
 .schema-table__th-row {
   overflow: hidden !important;
 }
-.schema-table__column-filter {
+.schema-table .schema-column-filter-popover {
   background-color: #eee;
 }
-.schema-table__column-filter input,
-.schema-table__column-filter select {
+.schema-table .schema-column-filter-popover input,
+.schema-table .schema-column-filter-popover select {
   width: 100%;
   padding: 3px;
   margin-top: 3px;
   border-radius: 5px;
 }
-.schema-table__column-filter input[type=checkbox] {
+.schema-table .schema-column-filter-popover input[type=checkbox] {
   width: fit-content;
   margin-top: 10px;
   margin-left: 30px;
 }
-.schema-table__column-filter .react-datepicker {
+.schema-table .schema-column-filter-popover input[type=number],
+.schema-table .schema-column-filter-popover input[type=text],
+.schema-table .schema-column-filter-popover select {
+  min-width: 150px;
+}
+.schema-table .schema-column-filter-popover .react-datepicker {
   display: flex;
 }
 .schema-table__th {
@@ -47,7 +51,7 @@
   font-style: italic;
 }
 .schema-table__th--column-filter-status-ACTIVE svg {
-  color: red;
+  color: var(--bs-red, red);
 }
 .schema-table__td {
   overflow: hidden;
@@ -57,13 +61,13 @@
   align-items: center;
 }
 .schema-table__td--odd {
-  background-color: #ddd;
+  background-color: var(--bs-gray-100, #f8f9fa);
 }
 .schema-table__td--even {
-  background-color: #fff;
+  background-color: var(--bs-white, #fff);
 }
 .schema-table__td--selected {
-  background-color: #bbb;
+  background-color: var(--bs-gray-300, #dee2e6);
 }
 .schema-table__search {
   margin: 1rem;

package/package.json

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