mig-schema-table 3.0.16 → 3.0.18

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

@@ -1,17 +1,21 @@
+import { Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
 import { oas31 } from "openapi3-ts";
 import "react-datepicker/dist/react-datepicker.css";
+import { tColumnSearchValue } from "../index";
 interface IColumnFilterRowProps {
     columnNames: string[];
     getWidth: (index: number) => number;
     config?: {
         [propName: string]: IColumnConfig<any>;
     };
-    columnSearchHandler: (propName: string, value: string | number | boolean) => void;
+    columnSearchHandler: (propName: string, value: tColumnSearchValue) => void;
     value: {
-        [propName: string]: string | number | boolean;
+        [propName: string]: tColumnSearchValue;
     };
     schema: oas31.SchemaObject;
+    columnFilterDropdown?: string;
+    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
 }
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
+export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -4,15 +4,15 @@ import { SELECT_ALL_COLUMN_NAME } from "../constants";
 import DatePicker from "react-datepicker";
 import nl from "date-fns/locale/nl";
 import "react-datepicker/dist/react-datepicker.css";
-import { localeFormat } from "../../inc/date";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }) {
+import { getUnixTimeStamp } from "../../inc/date";
+export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }) {
     const { properties = {} } = schema;
     const getSelectComponent = React.useCallback((propSchema, propName, value, inputChangeHandler) => {
-        const enumItems = propSchema.type === "boolean" ? ["true", "false"] : propSchema.enum;
+        const enumItems = propSchema.type === "boolean" ? ["✓", "✕"] : propSchema.enum;
         return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: inputChangeHandler }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), enumItems.map((name) => (_jsx("option", Object.assign({ value: name }, { children: name }), `column-filter-select-${name}`)))] })));
     }, []);
-    const field = React.useCallback((propSchema, propName, propValue, propConfig) => {
+    const field = React.useCallback((propSchema, propName, propValue) => {
         const { type, format, minimum, maximum } = propSchema;
         const inputChangeHandler = (event) => {
             columnSearchHandler(propName, event.target.value);
@@ -24,24 +24,68 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
                     return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
                 }
                 if (format === "date-time" || format === "date") {
-                    const dateFormat = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) ||
-                        (format === "date"
-                            ? DEFAULT_DATE_FORMAT
-                            : DEFAULT_DATE_TIME_FORMAT);
-                    const dateChangeHandler = (date) => {
-                        columnSearchHandler(propName, date ? localeFormat(date, dateFormat) : "");
+                    const dateFormat = format === "date"
+                        ? DEFAULT_DATE_FORMAT
+                        : DEFAULT_DATE_TIME_FORMAT;
+                    const dateRangeValue = propValue;
+                    const startDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from)
+                        ? new Date(dateRangeValue.from)
+                        : null;
+                    const endDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
+                        ? new Date(dateRangeValue.to)
+                        : null;
+                    const startDateChangeHandler = (date) => {
+                        if (endDate && date && date > endDate) {
+                            return;
+                        }
+                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { from: `${date || ""}`, to: `${date && endDate ? dateRangeValue.to : ""}` }));
                     };
-                    return (_jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, showTimeSelect: format === "date-time", locale: nl, selected: propValue ? new Date(propValue) : null, onChange: dateChangeHandler, value: propValue || undefined, placeholderText: dateFormat, isClearable: true }));
+                    const endDateChangeHandler = (date) => {
+                        if (startDate &&
+                            date &&
+                            getUnixTimeStamp(`${date}`) < getUnixTimeStamp(`${startDate}`)) {
+                            return;
+                        }
+                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { to: `${date || ""}` }));
+                    };
+                    return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: startDate, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, startDate: startDate, endDate: endDate, timeInputLabel: "Time:", showTimeInput: format === "date-time", 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: endDate, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: startDate, endDate: endDate, timeInputLabel: "Time:", showTimeInput: format === "date-time", shouldCloseOnSelect: format === "date" })] }))] })) })));
                 }
-                return (_jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }));
+                return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }) })));
             case "integer":
-                return (_jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }));
+                return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
             case "boolean":
                 return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
             default:
                 return _jsx(_Fragment, {});
         }
     }, [columnSearchHandler, getSelectComponent]);
+    const removeDropdown = React.useCallback((e) => {
+        if (!columnFilterDropdown) {
+            return;
+        }
+        let columnFilterEl = null;
+        let parentNode = e.target;
+        while (parentNode && parentNode.nodeName !== "HTML") {
+            if (typeof parentNode.className === "string" &&
+                parentNode.className.includes("schema-table__column-filter")) {
+                columnFilterEl = parentNode;
+                break;
+            }
+            parentNode = parentNode.parentNode;
+        }
+        if (!columnFilterEl) {
+            setColumnFilterDropdown && setColumnFilterDropdown(undefined);
+        }
+    }, [columnFilterDropdown, setColumnFilterDropdown]);
+    React.useEffect(() => {
+        if (!columnFilterDropdown) {
+            return;
+        }
+        window.addEventListener("click", removeDropdown, { capture: true });
+        return () => {
+            window.removeEventListener("click", removeDropdown, { capture: true });
+        };
+    }, [columnFilterDropdown, removeDropdown]);
     const SchemaColumnFilter = React.useCallback((index) => {
         const propName = columnNames[index];
         const propSchema = properties[propName];
@@ -50,8 +94,14 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
         if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
             return _jsx("div", { className: "schema-table__th" });
         }
-        return (_jsx("div", Object.assign({ className: "schema-table__th" }, { children: field(propSchema, propName, propValue, propConfig) }), `filter-col-${propName}`));
-    }, [columnNames, config, field, properties, value]);
+        return (_jsx("ul", Object.assign({ id: "test", className: `dropdown-menu dropdown-menu-lg-end ${columnFilterDropdown && columnFilterDropdown === propName
+                ? "show"
+                : ""}`, style: {
+                position: "fixed",
+                marginTop: -10,
+                minHeight: 100,
+            } }, { children: _jsx("div", Object.assign({ id: "filter-dropdown-item", style: { margin: 10 } }, { children: field(propSchema, propName, propValue) })) })));
+    }, [columnFilterDropdown, columnNames, config, field, properties, value]);
     return (_jsx("div", Object.assign({ className: "schema-table__th-row", style: { display: "flex", flex: "row" } }, { children: columnNames.map((columnName, index) => {
             return (_jsx("div", Object.assign({ className: "schema-table__column-filter", style: {
                     width: getWidth(index),

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

@@ -13,6 +13,9 @@ interface IThProps {
     onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     isAllChecked?: boolean;
     numberOfSelectedRows?: number;
+    columnFilterDropdown?: string;
+    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
+    isColumnSearchable?: boolean;
 }
-declare const _default: ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, columnFilterDropdown, setColumnFilterDropdown, isColumnSearchable, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -2,7 +2,7 @@ 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";
-const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }) => {
+const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, columnFilterDropdown, setColumnFilterDropdown, isColumnSearchable, }) => {
     const thDivProps = {
         style,
         className: `schema-table__th ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
@@ -15,6 +15,16 @@ const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortA
         }
         setSortAsc((sortAsc) => !sortAsc);
     }, [config === null || config === void 0 ? void 0 : config.defaultSortDesc, name, setSortAsc, setSortColumn, sortAsc]);
+    const onFilterButtonClick = React.useCallback(() => {
+        if (!setColumnFilterDropdown) {
+            return;
+        }
+        if (columnFilterDropdown && columnFilterDropdown === name) {
+            setColumnFilterDropdown(undefined);
+            return;
+        }
+        setColumnFilterDropdown(name);
+    }, [columnFilterDropdown, name, setColumnFilterDropdown]);
     if (name === SELECT_ALL_COLUMN_NAME) {
         return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
                     width: "100%",
@@ -37,6 +47,6 @@ const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortA
                 thDivProps.className += ` text-${(config === null || config === void 0 ? void 0 : config.align) || "end"} justify-content-${(config === null || config === void 0 ? void 0 : config.align) || "end"}`;
             }
     }
-    return (_jsx("div", Object.assign({}, thDivProps, { children: isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (config === null || config === void 0 ? void 0 : config.sortable) === false, onClick: onSortButtonClick }, { children: [(config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title }))) })));
+    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (config === null || config === void 0 ? void 0 : config.sortable) === false, onClick: onSortButtonClick }, { children: [(config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title }))), (config === null || config === void 0 ? void 0 : config.isFilterable) && isColumnSearchable ? (_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" } }, { children: _jsx("polygon", { "data-bs-toggle": "dropdown", fill: "#231F20", 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/SchemaTable/index.d.ts

@@ -25,4 +25,8 @@ export interface ISchemaTableProps<T> {
     style?: React.CSSProperties;
     width: number;
 }
+export type tColumnSearchValue = string | number | boolean | {
+    from: string;
+    to: string;
+};
 export default function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnSearchable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/SchemaTable/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { VariableSizeList, VariableSizeGrid } from "react-window";
-import { localeFormat } from "../inc/date";
+import { localeFormat, getUnixTimeStamp } from "../inc/date";
 import { uncamel } from "../inc/string";
 import Th from "./Th";
 import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
@@ -13,6 +13,7 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [searchQuery, setSearchQuery] = React.useState("");
     const [columnSearchObj, setColumnSearchObj] = React.useState({});
+    const [columnFilterDropdown, setColumnFilterDropdown] = React.useState();
     const { properties = {} } = schema;
     const columnNames = React.useMemo(() => {
         const columns = Object.keys(properties);
@@ -142,40 +143,59 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     ]);
     const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
     const filteredRenderData = React.useMemo(() => {
-        let result = renderData;
-        if (!result) {
-            return result;
+        if (!renderData || (!isColumnSearchable && !isSearchable)) {
+            return renderData;
         }
-        if (isColumnSearchable || isSearchable) {
-            return result.filter((item) => {
-                const globalSearchFilterResult = searchQuery
-                    ? !!columnNames.find((columnName) => 
-                    // @ts-ignore
-                    `${item[columnName]}`
-                        .toLowerCase()
-                        .includes(searchQuery.toLowerCase()))
-                    : true;
-                const rowColumnValidation = isColumnSearchable
-                    ? Object.keys(columnSearchObj).reduce((previousValue, propName) => {
-                        const columnSearchText = columnSearchObj[propName];
-                        const isBooleanValue = item[propName] === "✓" || item[propName] === "✕";
-                        const rawValue = isBooleanValue
-                            ? `${item[propName] === "✓"}`
-                            : `${item[propName]}`;
-                        previousValue.push(rawValue
-                            .toLowerCase()
-                            .includes(`${columnSearchText}`.toLowerCase()));
+        return renderData.filter((item) => {
+            const globalSearchFilterResult = searchQuery
+                ? !!columnNames.find((columnName) => 
+                // @ts-ignore
+                `${item[columnName]}`
+                    .toLowerCase()
+                    .includes(searchQuery.toLowerCase()))
+                : true;
+            const rowColumnValidation = isColumnSearchable
+                ? Object.keys(columnSearchObj).reduce((previousValue, propName) => {
+                    const propSchema = properties[propName];
+                    const columnSearchValue = columnSearchObj[propName];
+                    const rawValue = `${item[propName]}`;
+                    if (typeof columnSearchValue === "object" &&
+                        (propSchema.format === "date" ||
+                            propSchema.format === "date-time")) {
+                        const dateFormat = propSchema.format === "date"
+                            ? DEFAULT_DATE_FORMAT
+                            : DEFAULT_DATE_TIME_FORMAT;
+                        const { from, to } = columnSearchValue;
+                        if (!from) {
+                            return previousValue;
+                        }
+                        const startDate = getUnixTimeStamp(from, dateFormat);
+                        const endDate = to
+                            ? getUnixTimeStamp(to, dateFormat)
+                            : undefined;
+                        const currentDate = getUnixTimeStamp(rawValue, dateFormat);
+                        if (!startDate) {
+                            return previousValue;
+                        }
+                        previousValue.push(startDate && endDate
+                            ? currentDate >= startDate && currentDate <= endDate
+                            : currentDate >= startDate);
                         return previousValue;
-                    }, [])
-                    : [true];
-                return (globalSearchFilterResult && rowColumnValidation.every((el) => el));
-            });
-        }
+                    }
+                    previousValue.push(rawValue
+                        .toLowerCase()
+                        .includes(`${columnSearchValue}`.toLowerCase()));
+                    return previousValue;
+                }, [])
+                : [true];
+            return globalSearchFilterResult && rowColumnValidation.every((el) => el);
+        });
     }, [
         columnNames,
         columnSearchObj,
         isColumnSearchable,
         isSearchable,
+        properties,
         renderData,
         searchQuery,
     ]);
@@ -236,7 +256,7 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     }, [checkedIndexes, filteredRenderData]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
-        return (_jsx(Th, { config: config ? config[propName] : undefined, isSortable: !!isSortable, name: propName, schema: properties[propName], setSortColumn: setSortColumn, setSortAsc: setSortAsc, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, onSelectAllIndexesHandler: onSelectAllIndexesHandler, isAllChecked: isAllRowsChecked, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length }));
+        return (_jsx(Th, { config: config ? config[propName] : undefined, isSortable: !!isSortable, name: propName, schema: properties[propName], setSortColumn: setSortColumn, setSortAsc: setSortAsc, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, onSelectAllIndexesHandler: onSelectAllIndexesHandler, isAllChecked: isAllRowsChecked, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, columnFilterDropdown: columnFilterDropdown, setColumnFilterDropdown: setColumnFilterDropdown, isColumnSearchable: isColumnSearchable }));
     }, [
         columnNames,
         config,
@@ -247,6 +267,8 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         onSelectAllIndexesHandler,
         isAllRowsChecked,
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
+        columnFilterDropdown,
+        isColumnSearchable,
     ]);
     const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
         const propName = columnNames[columnIndex];
@@ -280,5 +302,5 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
             ? rowsMaxHeight
             : rowsHeight;
     }, [maxHeight, isSearchable, rowCount, rowHeight]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }) }, { 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}`), isColumnSearchable ? (_jsx(ColumnFilterRow, { schema: schema, columnNames: columnNames, config: config, value: columnSearchObj, columnSearchHandler: columnSearchHandler, getWidth: getColumnWidth })) : null, _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}`)] })));
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }) }, { 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}`), isColumnSearchable ? (_jsx(ColumnFilterRow, { schema: schema, columnNames: columnNames, config: config, value: columnSearchObj, columnSearchHandler: columnSearchHandler, getWidth: getColumnWidth, columnFilterDropdown: columnFilterDropdown, setColumnFilterDropdown: setColumnFilterDropdown })) : null, _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}`)] })));
 }

package/dist/inc/constant.d.ts

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

package/dist/inc/constant.js

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

package/dist/inc/date.d.ts

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

package/dist/inc/date.js

@@ -1,3 +1,7 @@
 import { format } from "date-fns";
 import nl from "date-fns/locale/nl";
 export const localeFormat = (date, dateFormat) => format(date, dateFormat, { locale: nl });
+export const getUnixTimeStamp = (date, dateFormat) => {
+    return Math.floor(new Date(format(new Date(date), dateFormat || "MM/dd/yyyy")).getTime() /
+        1000);
+};

package/dist/index.css

@@ -14,7 +14,7 @@
 }
 .schema-table__column-filter input,
 .schema-table__column-filter select {
-  width: 90%;
+  width: 100%;
   padding: 3px;
   margin-top: 3px;
   border-radius: 5px;
@@ -24,9 +24,6 @@
   margin-top: 10px;
   margin-left: 30px;
 }
-.schema-table__column-filter .react-datepicker {
-  display: flex;
-}
 .schema-table__th {
   background-color: #eee;
   align-items: center;

package/package.json

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