logitude-dashboard-library 3.2.11 → 3.2.12

package/dist/assets/styles/dl-dashboard.scss

@@ -778,20 +778,23 @@ $dark-grey: #717585;
         font-weight: bold;
         font-size: 14px;
         white-space: nowrap;
+        padding: 0px !important;
+
+        .p-column-header-content {
+            padding: 0;
+        }
 
         .p-column-title {
             font-weight: bold !important;
-            font-size: 14px !important;
-
-            .pi {
-                font-size: 14px !important;
-            }
+            font-size: 14px;
+            flex: 1;
         }
 
         .header-content {
             display: flex;
             align-items: center;
             cursor: pointer;
+            padding: 1rem 1rem;
         }
     }
 
@@ -836,6 +839,10 @@ $dark-grey: #717585;
     }
 }
 
+.header-content > .p-column-title > .pi::before {
+    font-size: inherit !important;
+}
+
 .margin-auto {
     margin: auto;
 }

package/dist/index.js

@@ -580,6 +580,7 @@ var TableChart = function TableChart(props) {
       setError = _useState3[1];
 
   var _useState4 = React.useState(),
+      widget = _useState4[0],
       setWidget = _useState4[1];
 
   var _useState5 = React.useState([]),
@@ -599,11 +600,22 @@ var TableChart = function TableChart(props) {
       setSortOrder = _useState8[1];
 
   var isDefaultSortOptionsUsed = React.useRef(false);
+  var widgetRefData = React.useRef(null);
   React.useEffect(function () {
+    var _props$customChartPro;
+
     if (props.customChartProps && props.customChartProps.widget) {
       setWidget(props.customChartProps.widget);
+      widgetRefData.current = props.customChartProps.widget;
       getTableData(props.customChartProps.widget);
     }
+
+    (_props$customChartPro = props.customChartProps.dataBinding) === null || _props$customChartPro === void 0 ? void 0 : _props$customChartPro.widgetUpdated.subscribe(function (updatedWidget) {
+      var _widgetRefData$curren;
+
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widgetRefData$curren = widgetRefData.current) === null || _widgetRefData$curren === void 0 ? void 0 : _widgetRefData$curren.key)) return;
+      setWidget(_extends({}, updatedWidget));
+    });
   }, []);
 
   var getTableData = function getTableData(widget) {
@@ -753,9 +765,32 @@ var TableChart = function TableChart(props) {
     return false;
   };
 
+  var getTableFormattingData = function getTableFormattingData() {
+    return widget && isNullOrUndefinedOrEmpty(widget.TableFormatSettings) ? {} : JSON.parse(widget === null || widget === void 0 ? void 0 : widget.TableFormatSettings);
+  };
+
+  var getTableFormattingPropertyValue = function getTableFormattingPropertyValue(propertyName, unit) {
+    if (unit === void 0) {
+      unit = "";
+    }
+
+    var tableFormattingData = getTableFormattingData();
+    return tableFormattingData && tableFormattingData[propertyName] ? tableFormattingData[propertyName] + unit : undefined;
+  };
+
   var cellTemplateBody = function cellTemplateBody(data, column) {
     if (!column || !column.FieldCode) return "";
-    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? getDateTimeValue(data[column.FieldCode]) : data[column.FieldCode];
+    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
+      style: {
+        color: getTableFormattingPropertyValue("TableCellFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
+      }
+    }, getDateTimeValue(data[column.FieldCode])) : React__default.createElement("span", {
+      style: {
+        color: getTableFormattingPropertyValue("TableCellFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
+      }
+    }, data[column.FieldCode]);
   };
 
   var headerTemplate = function headerTemplate(column) {
@@ -763,15 +798,27 @@ var TableChart = function TableChart(props) {
 
     if (sortField != column.FieldCode) {
       return React__default.createElement("div", {
+        style: {
+          backgroundColor: getTableFormattingPropertyValue("TableHeaderBackgroundColor")
+        },
         onClick: function onClick() {
           return sortTableData(column.FieldCode);
         },
         className: "header-content"
       }, React__default.createElement("span", {
+        style: {
+          color: getTableFormattingPropertyValue("TableHeaderFontColor"),
+          fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+        },
         className: "p-column-title"
-      }, column.DisplayName), canSort() && React__default.createElement("span", {
+      }, column.DisplayName, canSort() && React__default.createElement("span", {
+        style: {
+          fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+          width: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+          height: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+        },
         className: "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt"
-      }));
+      })));
     }
 
     if (sortOrder == 1) {
@@ -783,15 +830,27 @@ var TableChart = function TableChart(props) {
     }
 
     return React__default.createElement("div", {
+      style: {
+        backgroundColor: getTableFormattingPropertyValue("TableHeaderBackgroundColor")
+      },
       onClick: function onClick() {
         return sortTableData(column.FieldCode);
       },
       className: "header-content"
     }, React__default.createElement("span", {
+      style: {
+        color: getTableFormattingPropertyValue("TableHeaderFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+      },
       className: "p-column-title"
-    }, column.DisplayName), canSort() && React__default.createElement("span", {
+    }, column.DisplayName, canSort() && React__default.createElement("span", {
+      style: {
+        fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+        width: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+        height: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+      },
       className: sortClassIcon
-    }));
+    })));
   };
 
   return isLoading ? React__default.createElement("div", {