Custom formatters in ui-tabulator?

[sys64738]

I tried the Tabulator based table node for Dashboard 2.0 by omrid, and found out that it was apparently not possible to define custom formatters. I am currently using formatters in the old dashboard tables, for instance when displaying symbols (Off/On, Open/Closed) instead of 0/1, or changing the cell background colour depending on the value.

Is there any chance that custom formatters will be supported at some point?

[omrid]

The Tabulator allows you to set many built-in formatters in the column definition, for example:

			"formatter": "traffic",
			"formatterParams": {
				"min": 0,
				"max": 6,
				"color": ["","gray","orange","blue","green","red","cyan"]

or

formatter:"lookup",
formatterParams:{
    "s": "Small",
    "m": "Medium",
    "l": "Large"
}

I assume you are referring to function-based formatters, which call a JS method.

One of the limitations of packaging tabulator into a Node-red node, is that the configuration & API commands have to be serialized to JSON and sent as msg objects.
I don't recall function-based formatters being available in the dash-1.0 tabulator node. Can you point me to that - maybe I'm missing something.

While it is technically possible to serialize function-based custom formatters into msg object, I deliberately did not enable this since it's considered "user code injection" and would disqualify the node for breaching security.

I can think of some ways to work around this, without breaching security. Will look into it in the next version.

In the meantime, you can either:

1. Use existing Tabulator formatters. There are a lot of them (Formatters).
2. Convert the raw data yourself and/or add styling, while preparing the data update msg
3. Set a "sidekick" in a function or template node, which registers to data change events and issues respective styling commands (e.g. change color)
4. Instantiate the tabulator table in a template node, and work directly with its API

[sys64738]

Thank you, I will definitely consider alternatives to custom formatters, such as the List Lookup formatter that you are suggesting.

Would it be possible to provide the template node code for instantiation of the tabulator table? Will it be able to return data from a cellEdited event, for instance?

[omrid]

You can register to cellEdited already today (all the supported event types are listed in the node's on-line help). BTW, in case you have multiple open clients (and not in multi-user mode) whenever you edit a cell, I automatically distribute this change to all other open clients. See the example associated to the node.

As for direct instantiation, it is very simple, but then you will have to take care of incoming & outgoing messages yourself.

<template>
   <div id="myRawTable"></div> 
   <link href="http://localhost:1880/NR_WebRoot/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
   <script type="text/javascript" src="http://localhost:1880/NR_WebRoot/tabulator-tables/dist/js/tabulator.min.js"></script>
</template>
<script>
var table = new Tabulator("#myRawTable", {
   "height": 200,
   "layout": "fitColumns",
   "columns": [
      {"field":"id","width":80,"visible":true},
      {"title":"Name","field":"name","width":200,"hozAlign":"left"},
      {"title":"Age","field":"age","width": 100,"hozAlign":"center"}
   ],
   "data": [
      {"id":1,"name":"John Brown", "age":30},
      {"id":2,"name":"Betty Clark", "age":25}
   ]
});
table.on("tableBuilt", () => {
  console.log("Table is ready!");
})

[sys64738]

Thank you so much! This is really helpful!