mig-schema-table 3.0.48 → 3.0.50

package/dist/SchemaTable/Td/index.js

@@ -92,6 +92,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
     if (!propSchema) {
         return null;
     }
+    const propValue = row[propName];
     switch (propSchema.type) {
         case "boolean":
             tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
@@ -104,7 +105,12 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
             if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
                 tdDivProps.className += ` text-${propConfig.align}`;
             }
+            if (propSchema.format === "url" && propValue) {
+                return (
+                // @ts-ignore
+                _jsx("a", Object.assign({ href: propValue, target: "_blank", rel: "noopener noreferrer" }, tdDivProps, { children: propValue })));
+            }
     }
-    return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
+    return _jsx("div", Object.assign({}, tdDivProps, { children: propValue }));
 }
 export default React.memo(Td);

package/dist/SchemaTable/index.d.ts

@@ -24,6 +24,7 @@ export interface ISchemaTableProps<T> {
     getRowSelected?: (rowData: T, dataIndex: number) => boolean;
     maxHeight?: number;
     isSearchable?: boolean;
+    enableAutoFocus?: boolean;
     isColumnFilterable?: boolean;
     isSortable?: boolean;
     onCheckedIndexesChange?: (dataIndex: number[]) => void;
@@ -39,6 +40,6 @@ export type TColumnFilterValue = string | number | boolean | {
     from?: Date;
     to?: Date;
 };
-declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, onRowDoubleClick, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -9,7 +9,7 @@ import Td from "./Td";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
 import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, onRowDoubleClick, }) {
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [searchQuery, setSearchQuery] = React.useState("");
@@ -435,7 +435,13 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         }
         setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
     }, [disableColumnFilter, isDataFunction, 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, onKeyDown: onInputKeyDown, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_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}`)) : (_jsx("div", Object.assign({ style: {
+    const searchInputAutoFocus = React.useMemo(() => {
+        if (enableAutoFocus === undefined) {
+            return true;
+        }
+        return enableAutoFocus;
+    }, [enableAutoFocus]);
+    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, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_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}`)) : (_jsx("div", Object.assign({ style: {
                     width: rowWidth,
                     height: Math.max(50, tableBodyHeight),
                     border: "1px solid #BBB",

package/package.json

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