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

**URL:** <https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681>\
**Category:** General\
**Created:** [3 September 2024 15:18 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681 "2024-09-03T15:18:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [3 September 2024 15:18 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/1 "2024-09-03T15:18:00Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [3 September 2024 15:29 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/2 "2024-09-03T15:29:44Z")

</div>

> **[Tabulator - Column Setup](https://www.tabulator.info/docs/4.7/columns#autocolumns)**
>
> Use column definitions to configure your columns to display your table data a wide variety of layouts

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [3 September 2024 15:33 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/3 "2024-09-03T15:33:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [3 September 2024 15:39 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/4 "2024-09-03T15:39:16Z")

</div>

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](https://www.tabulator.info/docs/4.7/components#lookup) options.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [3 September 2024 15:47 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/5 "2024-09-03T15:47:19Z")

</div>

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

```auto
{
    "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 😉  
Unfortunately @Christian-Me hasn't been seen for a couple of years now

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [3 September 2024 15:53 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/6 "2024-09-03T15:53:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [3 September 2024 15:54 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/7 "2024-09-03T15:54:00Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [4 September 2024 08:13 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/8 "2024-09-04T08:13:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 September 2024 08:13 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-add-new-column-in-the-middle/90681/9 "2024-09-18T08:13:43Z")

</div>

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