As I have zero knowledge in the field of css I would go the javascript (or better: some simple modifications in the column config JSON via ui_control) route.
I don`t even know if vertical align possible with with css.
Ah. I missed your point earlier, Christian. I'll have a look at it. I just found the corresponding example.
I am there, finally 
- I managed to also vertically align text with the addition of padding-top to my ui-template.
- I additionally hid the sort arrows in the header column and extended the header cells width with visibility and padding-right to create extra space for titles. Sorting via column click still works
- And finally I was able to align text in header cells differently for each cell with f.e. >p style="text-align:center;">āĀ°C</p< .... (just change >< at the beginning/end of this argument
) in the title field of ui-table node
My final CSS-ui-template (just assign ui-template node to your ui-table's group)::
[{"id":"eca62c1a.40bdf8","type":"ui_template","z":"113a5c80.015354","group":"f181724f.1e4828","name":"CSS: ui-table","order":1,"width":"0","height":"0","format":"<style>\n\n/* Tabelle selbst formatieren*/\n\n .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#202529;font-size:18px}\n\n/* Header formatieren */\n .tabulator .tabulator-header{border-bottom:1px solid #BBB;background-color:#202529}\n .tabulator-col-content{background-color:#202529;height:37px}\n .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#202529}\n .tabulator-arrow{visibility: collapse;}\n .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}\n\n/* Zellen formatieren*/\n .tabulator-row{min-height:31px;background-color:#181c1f}\n .tabulator-row:nth-child(2n){background-color:#202529}\n .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}\n\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1250,"y":3340,"wires":[[]]},{"id":"f181724f.1e4828","type":"ui_group","z":"","name":"Raumklima","tab":"5a91a4b3.406c04","order":5,"disp":true,"width":"6","collapse":true},{"id":"5a91a4b3.406c04","type":"ui_tab","z":"","name":"Zentral","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
My final table:
DISCLAIMER: I am not at all a developer. However, I do like puzzles like this. Hence I was digging and searching until I found a "solution" for me ... at least 
7 Likes
That's a good looking table ! well done.
1 Like
Hi, I'm having serious problems in creating a progress bars with changing colours. How could you do that?
This is done by a callback function.
There is an example included producing exactly the table from the screenshot.
Maybe a newbie question , how exactly does optional output work? I'd like to get a trigger once a user clicks on a row. Any examples?
As described in the info panel:
The msg.payload contains the selected row data object. msg.row the row number and msg.topic the column.
Place a debug node behind set to output the full message object and see what happens.
1 Like
I assume msg.payload is generated from the Tabulator rowClick callback? Is there any way of utilising the other Tabulator callbacks?
Thanks
It actually uses cellClick but never mind.
Yes it is. You can use msg.ui_control send other callbacks to tabulator or even take control over the complete layout. See some posts before Ui-table supports ui_control
I use this to do the complete setup of my tables.
A little tip: I use a change node emitting a json object (or most of the time a sub flow with a json environment variable) to configure ui-table and do other things. I write the callback functions in vs-code (but the editor of a function node is fine too). Then I use the visual json editor to paste in the function. All escape sequencing of " to \" is done automatically
"tabulator": {
"responsiveLayout": "collapse",
"responsiveLayoutCollapseStartOpen": false,
"index": "$name",
"layout": "fitColumns",
"movableColumns": true,
"groupBy": "",
"columnResized": "function(column){ var newColumn = { field: column._column.field, visible: column._column.visible, width: column._column.width, widthFixed: column._column.widthFixed, widthStyled: column._column.widthStyled }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }",
"columnMoved": "function(column, columns){ var newColumns=[]; columns.forEach(function (column) { newColumns.push({'field': column._column.definition.field, 'title': column._column.definition.title}); }); this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }",
"rowFormatter": "function(row){ var data = row.getData(); switch (data.$state) { case \"lost\": row.getElement().style.backgroundColor = \"#9e2e66\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"sleeping\": row.getElement().style.backgroundColor = \"#336699\"; break; case \"disconnected\": row.getElement().style.backgroundColor = \"#cc3300\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"alert\": row.getElement().style.backgroundColor = \"#A6A6DF\"; break; case \"init\": row.getElement().style.backgroundColor = \"#f2f20d\"; break; case \"ready\": row.getElement().style.backgroundColor = \"\"; row.getElement().style.color = \"\"; break; } }",
"columns": [
{
"formatter": "responsiveCollapse",
"width": 30,
"minWidth": 30,
"align": "center",
"resizable": false,
"headerSort": false,
"frozen": true,
"title": "expand",
"field": "expand",
"headerVertical": "flip"
},
{
"formatter": "function(cell, formatterParams, onRendered) { var html = cell.getValue(); return html; }",
"title": "State",
"field": "$stateIcon",
"width": 100,
"frozen": true,
"headerVertical": "flip"
},
Ā“Ā“Ā“
--- cutted here ---Once again thanks for the tip. It was the weird syntax that got me, as usual
1 Like
Hi Guys, New to node-red.
Is it possible to have an example of replaceData commands to ui-table.
I'd like to to update a particular cell in table.
Many Thanks.
Best is to use the addOrUpdate command (take a look at the example ui-table and commands menu/import/examples/ui-table)
Now I`m back on my computer and can give you a litle bit more info
msgToTable.payload={
"command":"updateOrAddData",
"arguments": [[{"id":123,"columnField":"updated"},{"id":124,"columnField":"new"}]],
"returnPromise": false
};
To update a single cell (or many cells in a row) the row has to be identified. By default the field id is defined for that purpose but it can be changed by "index":"anyField". If the value of the index property isn't in the table a new row will be added (if id 124 is not present).
Just came across this new table plugin code. is it better to use it instead of Tabulator ? It is new repo and certainly looks like lightweight ,simpler and promising.
Thanks.
Depends what you try to achieve. Quickly browsed through the examples
- no formatters
- no cell edits
- no filters
- no freezed columns
- no custom callbacks
- no drag/drop
- no copy/paste
- no column or row sorting / rearranging
- no reaktive layout
- no child tables / columns or rows
- ...
Certainly very lightweight in resources but at the same time in functionality. Very jung - not a bad thing but.,.
Both are pure JavaScript and framework independent. Think not difficult to do a warper for it but in my case not attractive
What is wrong with tabulator? Really curious to know.
Tabulator little too compicated for me. Although it works for me after following your example.
Thanks.
Has anyone of you used the editable feature or any idea how to implement this?
Using the editable setting on each column, you can make a user editable table. Any time a cell is edited it triggers the cellEdited callback, to allow you to process any changes.
