mig-schema-table 3.0.8 → 3.0.10

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

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

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+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, }) {
+    const { properties = {} } = schema;
+    const getSelectComponent = React.useCallback((propSchema, propName, value, inputChangeHandler) => {
+        const enumItems = propSchema.type === "boolean" ? ["true", "false"] : 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 { type, format, minimum, maximum } = propSchema;
+        const inputChangeHandler = (event) => {
+            columnSearchHandler(propName, event.target.value);
+        };
+        const strValue = (propValue || "");
+        switch (type) {
+            case "string":
+                if (propSchema.enum) {
+                    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) : "");
+                    };
+                    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 }));
+                }
+                return (_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 }));
+            case "boolean":
+                return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
+            default:
+                return _jsx(_Fragment, {});
+        }
+    }, [columnSearchHandler, getSelectComponent]);
+    const SchemaColumnFilter = React.useCallback((index) => {
+        const propName = columnNames[index];
+        const propSchema = properties[propName];
+        const propConfig = config ? config[propName] : undefined;
+        const propValue = value === null || value === void 0 ? void 0 : value[propName];
+        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("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),
+                    height: 25,
+                    paddingBottom: 7,
+                } }, { children: SchemaColumnFilter(index) }), `filter-${index}`));
+        }) })));
+}

package/dist/SchemaTable/Td/index.js

@@ -13,22 +13,38 @@ function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected
         const row = sortedRenderData[parseInt(rowIndex, 10)];
         onRowClick(data[row._index], row._index, e);
     }, [data, onRowClick, sortedRenderData]);
-    if (!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;
     }
-    const row = sortedRenderData[rowIndex];
-    const tdDivProps = {
-        "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"}${row && getRowSelected && getRowSelected(data[row._index])
-            ? " schema-table__td--selected"
-            : ""} ${row && getRowClassName
-            ? getRowClassName(data[row._index], row._index)
-            : ""}`,
-    };
     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) })));
     }
@@ -53,8 +69,6 @@ function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected
             tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
             break;
         case "string":
-            // @ts-ignore
-            tdDivProps.title = row[propName];
             if (propSchema.format === "date" || propSchema.format === "date-time") {
                 tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
             }

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

@@ -2,16 +2,10 @@ import { oas31 } from "openapi3-ts";
 import React, { CSSProperties, Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
 interface IThProps {
-    columnFilters?: {
-        [prop: string]: any;
-    };
     config?: IColumnConfig<any>;
     isSortable: boolean;
     name: string;
     schema: oas31.SchemaObject;
-    setColumnFilters?: Dispatch<SetStateAction<{
-        [prop: string]: any;
-    } | undefined>>;
     setSortAsc: Dispatch<SetStateAction<boolean>>;
     setSortColumn: Dispatch<SetStateAction<string>>;
     sortAsc?: boolean;
@@ -20,5 +14,5 @@ interface IThProps {
     isAllChecked?: boolean;
     numberOfSelectedRows?: number;
 }
-declare const _default: ({ columnFilters, config, isSortable, name, schema, setColumnFilters, 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, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -2,20 +2,11 @@ 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 = ({ columnFilters, config, isSortable, name, schema, setColumnFilters, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }) => {
+const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }) => {
     const thDivProps = {
         style,
         className: `schema-table__th ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
     };
-    const onFilterButtonClick = React.useCallback(() => {
-        if (!setColumnFilters) {
-            return;
-        }
-        if (columnFilters) {
-            setColumnFilters(undefined);
-            return;
-        }
-    }, [columnFilters, setColumnFilters]);
     const onSortButtonClick = React.useCallback(() => {
         if (sortAsc === undefined) {
             setSortColumn(name);
@@ -46,6 +37,6 @@ const Th = ({ columnFilters, config, isSortable, name, schema, setColumnFilters,
                 thDivProps.className += ` text-${(config === null || config === void 0 ? void 0 : config.align) || "end"}`;
             }
     }
-    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) ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick }, { 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", { fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
+    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 }))) })));
 };
 export default React.memo(Th);

package/dist/SchemaTable/index.d.ts

@@ -15,6 +15,7 @@ export interface ISchemaTableComponentProps<T> {
     getRowSelected?: (rowData: T) => boolean;
     maxHeight?: number;
     isSearchable?: boolean;
+    isColumnSearchable?: boolean;
     isSortable?: boolean;
     onCheckedIndexesChange?: (dataIndex: number[]) => void;
     onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
@@ -24,4 +25,4 @@ export interface ISchemaTableComponentProps<T> {
     style?: React.CSSProperties;
     width: number;
 }
-export default function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+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, }: ISchemaTableComponentProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/SchemaTable/index.js

@@ -6,11 +6,13 @@ import { uncamel } from "../inc/string";
 import Th from "./Th";
 import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
 import Td from "./Td";
-export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
+import ColumnFilterRow from "./ColumnFilterRow";
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
+export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnSearchable, 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 [columnFilters, setColumnFilters] = React.useState();
+    const [columnSearchObj, setColumnSearchObj] = React.useState({});
     const { properties = {} } = schema;
     const columnNames = React.useMemo(() => {
         const columns = Object.keys(properties);
@@ -52,24 +54,25 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     }, [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 (propName === SELECT_ALL_COLUMN_NAME) {
-                prev[propName] = "asd";
-                return prev;
-            }
-            if (!schema) {
+            if (!schema || propName === SELECT_ALL_COLUMN_NAME) {
                 prev[propName] = "?";
                 return prev;
             }
             const rawValue = object[propName];
             switch (schema.type) {
                 case "array":
-                    prev[propName] = JSON.stringify(rawValue);
+                    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 ? "✓" : "✕";
@@ -85,11 +88,11 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
                         prev[propName] =
                             rawValue === "2999-12-31"
                                 ? "-"
-                                : localeFormat(new Date(rawValue), "dd MMM yyyy");
+                                : 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), "dd MMM yyyy hh:mm");
+                        prev[propName] = localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_TIME_FORMAT);
                         return prev;
                     }
                     if (schema.enum) {
@@ -143,20 +146,38 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         if (!result) {
             return result;
         }
-        if (searchQuery) {
-            const lcQuery = searchQuery.toLowerCase();
-            result = result.filter((item) => !!columnNames.find((columnName) => 
-            // @ts-ignore
-            `${item[columnName]}`.toLowerCase().includes(lcQuery)));
-        }
-        if (!columnFilters) {
-            return result;
+        if (isColumnSearchable || searchQuery) {
+            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 previousValue;
+                    }, [])
+                    : [true];
+                return (globalSearchFilterResult && rowColumnValidation.every((el) => el));
+            });
         }
-        const columnFilterEntries = Object.entries(columnFilters);
-        return result.filter((item) => columnFilterEntries.find(([columnName, columnFilterValue]) => 
-        // @ts-ignore
-        data[item._index][columnName] === columnFilterValue));
-    }, [columnFilters, columnNames, data, renderData, searchQuery]);
+    }, [
+        columnNames,
+        columnSearchObj,
+        isColumnSearchable,
+        renderData,
+        searchQuery,
+    ]);
     // Sort the filtered data
     const sortedRenderData = React.useMemo(() => {
         if (!sortColumn || !filteredRenderData) {
@@ -214,10 +235,9 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     }, [checkedIndexes, filteredRenderData]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
-        return (_jsx(Th, { columnFilters: columnFilters, config: config ? config[propName] : undefined, isSortable: !!isSortable, name: propName, schema: properties[propName], setColumnFilters: setColumnFilters, 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 }));
     }, [
         columnNames,
-        columnFilters,
         config,
         isSortable,
         properties,
@@ -242,6 +262,9 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         rowHeight,
         sortedRenderData,
     ]);
+    const columnSearchHandler = React.useCallback((propName, value) => {
+        setColumnSearchObj((columnSearch) => (Object.assign(Object.assign({}, columnSearch), { [propName]: value })));
+    }, []);
     const onSearchChange = React.useCallback((e) => {
         setSearchQuery(e.currentTarget.value);
     }, []);
@@ -255,5 +278,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}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${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}`), _jsx(ColumnFilterRow, { schema: schema, columnNames: columnNames, config: config, value: columnSearchObj, columnSearchHandler: columnSearchHandler, getWidth: getColumnWidth }), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
 }

package/dist/inc/constant.d.ts

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

package/dist/inc/constant.js

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

package/dist/index.css

@@ -9,6 +9,23 @@
 .schema-table__th-row {
   overflow: hidden !important;
 }
+.schema-table__column-filter {
+  background-color: #eee;
+}
+.schema-table__column-filter input, .schema-table__column-filter select {
+  width: 90%;
+  padding: 3px;
+  margin-top: 3px;
+  border-radius: 5px;
+}
+.schema-table__column-filter input[type=checkbox] {
+  width: fit-content;
+  margin-top: 10px;
+  margin-left: 30px;
+}
+.schema-table__column-filter .react-datepicker {
+  display: flex;
+}
 .schema-table__th {
   background-color: #eee;
   align-items: center;

package/dist/types.d.ts

@@ -4,7 +4,6 @@ export interface IColumnConfig<T> {
     defaultSortDesc?: boolean;
     hidden?: boolean;
     hoverTitle?: string;
-    isFilterable?: boolean;
     renderCell?: (rowData: T, dataIndex: number, rowIndex: number) => React.ReactElement | null;
     renderData?: (rowData: T, dataIndex: number) => string;
     sort?: (a: T, b: T, sortAsc: boolean) => number;
@@ -13,8 +12,10 @@ export interface IColumnConfig<T> {
     title?: string | React.ReactElement;
     width?: number;
     order?: number;
+    isFilterable?: boolean;
+    dateFormat?: string;
 }
 export interface IRenderData {
     _index: number;
-    [key: string]: any;
+    [key: string]: string | any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -11,11 +11,13 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.31",
     "@types/react": "^18.2.6",
+    "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.2.4",
     "date-fns": "^2.30.0",
     "lodash": "^4.17.21",
     "openapi3-ts": "^4.1.2",
     "react": "^18.2.0",
+    "react-datepicker": "^4.14.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-window": "^1.8.9"