mig-schema-table 3.0.25 → 3.0.27

package/README.md

@@ -3,78 +3,88 @@
 This component will render fields dynamically based on openApi schema JSON. Styling can be done using Bootstrap 5 compatible classes
 
 # Install
+
 ```
 npm install mig-schema-table
 ```
 
 ## Usage
+
 #### Schema Example:
+
 ```ts
-const userSchema ={
-  "properties": {
-     "id":{
-       "type":"string",
-       "readOnly": true
-     },
-    "name": {
-      "type": "string", 
-      "minLength": 3
+const userSchema = {
+  properties: {
+    id: {
+      type: "string",
+      readOnly: true,
+    },
+    name: {
+      type: "string",
+      minLength: 3,
     },
-    "dob": {
-      "type": "string",
-      "format": "date"
+    dob: {
+      type: "string",
+      format: "date",
+    },
+    address: {
+      type: "string",
+      maxLength: 250,
     },
-    "address": {
-      "type": "string",
-      "maxLength": 250
-    }
   },
-  "required":["name"]
-} 
+  required: ["name"],
+};
 ```
+
 ```typescript jsx
-    import React from 'react';
-    import { SchemaTable, IColumnConfig } from "mig-schema-table";
-    import "mig-schema-table/dist/index.css";
+import React from "react";
+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";
+
+const config: { [keyName: string]: IColumnConfig } = {
+  id: {
+    hidden: true,
+  },
+  dob: {
+    title: "Date of Birth",
+  },
+};
 
-    const config:{[keyName: string]: IColumnConfig} ={
-        "id":{
-            hidden:true
-        },
-        "dob":{
-            title:"Date of Birth"
-        }
-    }
-    
-    const Table=()=>{
-        const [users, setUsers]= useState();
-        
-        return <SchemaTableComponent
-            data={users || []}
-            schema={userSchema}
-            width={window.innerWidth}
-            height={window.innerHeight - 150}
-            config={config}
-        />
-    }
+const Table = () => {
+  const [users, setUsers] = useState();
+
+  return (
+    <SchemaTableComponent
+      data={users || []}
+      schema={userSchema}
+      width={window.innerWidth}
+      height={window.innerHeight - 150}
+      config={config}
+    />
+  );
+};
 ```
 
 ## Component Props
-Prop | Type           | Description                                                             |
---- |----------------|-------------------------------------------------------------------------|
-schema | ```object```   | schemaObject to be rendered as a set of fields(example openapi schema). |
-config | ```object```   | custom UI config {[keyName: string]: IColumnConfig;}.                   |
-data | ```array```    | data props will be rendered from api                                    |
-onRowClick | ```function``` | it will be navigate to detail of row data                               |
-width | ```number``` | this props will be calculated width of table                            |
-height | ```number``` | this props will be calculated height of table                           |
-tableTitle | ```string``` | custom title for table your own |
-isSearchable | ```boolean``` | if this props is ```true``` then the search filed will shown |
-isSortable | ```boolean``` | if this props is ```true``` then the table to be able to shorting the data |
+
+| Prop         | Type       | Description                                                             |
+| ------------ | ---------- | ----------------------------------------------------------------------- |
+| schema       | `object`   | schemaObject to be rendered as a set of fields(example openapi schema). |
+| config       | `object`   | custom UI config {[keyName: string]: IColumnConfig;}.                   |
+| data         | `array`    | data props will be rendered from api                                    |
+| onRowClick   | `function` | it will be navigate to detail of row data                               |
+| width        | `number`   | this props will be calculated width of table                            |
+| height       | `number`   | this props will be calculated height of table                           |
+| tableTitle   | `string`   | custom title for table your own                                         |
+| isSearchable | `boolean`  | if this props is `true` then the search filed will shown                |
+| isSortable   | `boolean`  | if this props is `true` then the table to be able to shorting the data  |
 
 ## Config
+
 #### you can import the type of config from the IFieldConfig.
+
 ```ts
-   const config: { [keyName: string]: IColumnConfig } = {}
+const config: { [keyName: string]: IColumnConfig } = {};
 ```
-

package/dist/SchemaTable/index.js

@@ -260,13 +260,14 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     }, [columnFilterMap]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
-        let columnFilterStatus = isColumnFilterable
+        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: config ? config[propName] : undefined, propName: propName, schema: properties[propName], setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+        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,

package/dist/index.css

@@ -1,4 +1,3 @@
-@import "../../node_modules/react-datepicker/dist/react-datepicker.min.css";
 .react-datepicker {
   display: flex;
 }

package/package.json

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