Node-red-node-ui-table add new column in the middle

General
1

I'm using this node with @Christian-Me ui table handler. I haven't touched it for a long while but had to add another column.

I edited the tabulator configuration to insert the column where required, but it always gets added at the end. I vaguely remember there was some "procedure" required to force the table to respect the configured order of the columns but cannot recall what.

Any ideas please ?

2
3

I have the columns setup, listed in the order I want them, however the most recently added column is always displayed at the far right.

4

addColumn further down

Add Column

If you wish to add a single column to the table, you can do this using the addColumn function.

table.addColumn({title:"Age", field:"age"}, true, "name");

This function takes three arguments:

  • Columns Definition - The column definition object for the column you want to add.
  • Before (optional) - Determines how to position the new column. A value of true will insert the column to the left of existing columns, a value of false will insert it to the right. If a Position argument is supplied then this will determine whether the new colum is inserted before or after this column.
  • Position (optional) - The field to insert the new column next to, this can be any of the standard column component look up options.
5

As I mentioned I'm using the ui table handler sub flow. The columns are defined like so -

{
    "customHeight": 26,
    "tabulator": {
        "responsiveLayout": "collapse",
        "responsiveLayoutCollapseStartOpen": false,
        "index": "$topic",
        "layout": "fitColumns",
        "movableColumns": true,
        "initialSort": [
            {
                "column": "$stateIcon",
                "dir": "asc"
            }
        ],
        "groupBy": "",
        "columns": [
            {
                "formatter": "responsiveCollapse",
                "width": 30,
                "minWidth": 30,
                "align": "center",
                "resizable": false,
                "headerSort": false,
                "frozen": true,
                "title": "Expand&nbsp;&nbsp;<i class='fa fa-plus-circle fa-rotate-180'></i> ",
                "field": "expand",
                "headerVertical": "flip",
                "headerTooltip": "click to expand more details",
                "headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
            },
            {
                "formatter": "function(cell, formatterParams, onRendered) {      var html = cell.getValue(); return html;  }",
                "title": "State&nbsp;&nbsp;<i class='fa fa-bolt fa-rotate-180'></i>",
                "field": "$stateIcon",
                "headerFilter": true,
                "width": 40,
                "align": "center",
                "frozen": true,
                "headerVertical": "flip",
                "headerTooltip": "current state as icon: ready, lost",
                "headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
            },
            {
                "formatter": "function(cell, formatterParams, onRendered) {     var html = cell.getValue(); return html;  }",
                "title": "Type&nbsp;&nbsp;<i class='fa fa-cogs'></i>",
                "field": "deviceTypeIcon",
                "width": 40,
                "align": "center",
                "frozen": true,
                "headerVertical": "flip",
                "headerTooltip": "device type",
                "headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
            },

As such I would expect them to display in that order. However I recall there is some "trick" to get it to refresh properly :wink:
Unfortunately @Christian-Me hasn't been seen for a couple of years now

6

Have you tried adding autoColumns:true
to the tabulator property, which should force the order as defined in the incoming data.

The other option I showed you can try sending it as a command to the table handler.

1 Like
7

Not sure if all steps are necessary, but this worked for me -

Disable table and sub flow
delete flow.tableConfig
deploy
clear browser cache
re enable and redeploy

Columns are now in correct order !

8

I assume you are still using dashboard 1.0?
For dashboard 2.0 you can install @omrid01/node-red-dashboard-2-table-tabulator which uses the latest Tabulator version, and provides way more features & Tabulator API coverage.

1 Like
9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.