mig-schema-table 3.0.8 → 3.0.9

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/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,12 @@ 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, }) {
+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 +53,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 ? "✓" : "✕";
@@ -149,6 +151,18 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
             // @ts-ignore
             `${item[columnName]}`.toLowerCase().includes(lcQuery)));
         }
+        if (isColumnSearchable) {
+            return result.filter((item) => {
+                const rowColumnValidation = Object.keys(columnSearchObj).reduce((previousValue, propName) => {
+                    const columnSearchText = columnSearchObj[propName];
+                    previousValue.push(`${item[propName]}`
+                        .toLowerCase()
+                        .includes(columnSearchText.toLowerCase()));
+                    return previousValue;
+                }, []);
+                return rowColumnValidation.every((el) => el);
+            });
+        }
         if (!columnFilters) {
             return result;
         }
@@ -156,7 +170,15 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         return result.filter((item) => columnFilterEntries.find(([columnName, columnFilterValue]) => 
         // @ts-ignore
         data[item._index][columnName] === columnFilterValue));
-    }, [columnFilters, columnNames, data, renderData, searchQuery]);
+    }, [
+        columnFilters,
+        columnNames,
+        columnSearchObj,
+        data,
+        isColumnSearchable,
+        renderData,
+        searchQuery,
+    ]);
     // Sort the filtered data
     const sortedRenderData = React.useMemo(() => {
         if (!sortColumn || !filteredRenderData) {
@@ -242,6 +264,21 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         rowHeight,
         sortedRenderData,
     ]);
+    const columnSearchHandler = React.useCallback((e) => {
+        setColumnSearchObj((columnSearch) => (Object.assign(Object.assign({}, columnSearch), { [e.target.dataset.propName]: e.target.value })));
+    }, []);
+    const SchemaColumnFilter = React.useCallback((index) => {
+        const propName = columnNames[index];
+        // const propSchema = properties[propName] as oas31.SchemaObject;
+        const propConfig = config ? config[propName] : undefined;
+        if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isSearchable)) {
+            return _jsx("div", { className: "schema-table__th", style: style });
+        }
+        return (_jsx("div", Object.assign({ className: "schema-table__th" }, { children: _jsx("input", { value: columnSearchObj === null || columnSearchObj === void 0 ? void 0 : columnSearchObj[propName], "data-prop-name": propName, onChange: columnSearchHandler, style: {
+                    marginRight: 2,
+                    width: "90%",
+                } }) }), `filter-col-${propName}`));
+    }, [columnNames, columnSearchHandler, columnSearchObj, config, style]);
     const onSearchChange = React.useCallback((e) => {
         setSearchQuery(e.currentTarget.value);
     }, []);
@@ -255,5 +292,11 @@ 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("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__th", style: {
+                            width: getColumnWidth(index),
+                            height: 20,
+                            paddingBottom: 8,
+                        } }, { children: SchemaColumnFilter(index) }), `filter-${index}`));
+                }) })), _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/types.d.ts

@@ -13,8 +13,9 @@ export interface IColumnConfig<T> {
     title?: string | React.ReactElement;
     width?: number;
     order?: number;
+    isSearchable?: boolean;
 }
 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.9",
   "main": "dist/index.js",
   "files": [
     "dist/"