Hello Omi, thanks again. Your CSS styling tip works like a charm. I even now added conditional formatting myself, which wouldn't be easy possible with ui-table wrapper. Real cool! Thank you.
Conserning the ng-init template: I got your point, however, the example you added in the template where you initated two fields in the message didn't work for me. I only got the empty message out of it with Socket-ID and msg.ID. However, if needed on can populate it using other technics as you told as well.
Thanks for your okay for source release. Here you go:
Template node: "Tabulator href & style"
It refers to the Tabulator library, which has to manually downloaded and extracted into the this folder "/home/pi/.node-red/node_modules/node-red-dashboard/dist". So you should see there the "tabulator-master" folder of the zip-file.
<link href="tabulator-master/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="tabulator-master/dist/js/tabulator.min.js"></script>
<!--
<link href="tabulator-master/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
-->
<style>
.tabulator-table .tabulator-cell {
//color: #CC3A82;
font-weight: bold;
}
</style>
The tabulator template node looks like this for me:
<form>
<div id="gridExample" style="background-color:#000000;margin:0px;border:0px solid black"></div>
</form>
<script type="text/javascript">
var $scope = this.scope;
var grid = new Tabulator("#gridExample", {
// height:"300",
layout:"fitDataStretch",
movableColumns: false,
headerVisible: false,
data:[
{summary:"Lade Kalender ..."}
],
columns:[
{title:"Bezeichnung", field:"relativeDate", resizable: false, width:60},
{title:"Wochentag", field:"eventStart", resizable: false, width:70},
{title:"", field:"eventWeekday", resizable: false, width:10},
{title:"Ereignis", field:"summary", resizable: false,
formatter: function (cell) {
let el = cell.getElement();
let val = cell.getValue();
let lastThreeChars = val.substring(val.length - 3);
let content = val.substring(0, val.length - 3);
if (lastThreeChars == "*S*") {
el.style.backgroundColor = "#000099";
} else if (lastThreeChars == "*R*") {
el.style.backgroundColor = "#009900";
} else if (lastThreeChars == "*M*") {
el.style.backgroundColor = "#990000";
}
el.style.color = "#FFFFFF";
//el.style.fontWeight = "bold";
return content;
}
}
]
});
grid.on("tableBuilt", function(){
$scope.send({payload: "Grid is ready"});
});
(function(scope) {
$scope.$watch('msg', function(msg)
{
if (msg)
switch (msg.payload)
{
case "setdata":
//grid.clearData();
grid.setData(msg.data);
$scope.send({payload: "Grid updated"});
break;
}
});
})(scope);
</script>
A message to fill the template node looks like this with topic "setdata" and the array in msg.data.
I think that is analog to ui-table, only one used the msg.payload for the table data.
That is the final look:
, the formatter crashed because it got in your case unexpected output (it is tailored for my input). You van check the firefox console output, or the node-red log output whether we could have seen that maybe earlier.
