# Node-red-dashboard-2-table-tabulator - editing nested field

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [23 July 2025 11:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265 "2025-07-23T11:01:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [23 July 2025 11:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265/1 "2025-07-23T11:01:11Z")

</div>

I'm having problems with editing nested fields.  
Consider this table:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f223275632edf5cd868729f26e46a39a4f9d7a8.png)  
Code:

```auto
[{"id":"fc5473ad979f4bf7","type":"ui-tabulator","z":"7e8f99e08b644ab6","name":"","group":"5bdd1785295d9c08","initObj":"{\n \"height\": 200,\n \"layout\": \"fitColumns\",\n \"columns\": [\n {\"field\":\"id\",\"visible\":false},\n {\"title\":\"Name\",\"field\":\"name\",\"width\":200,\"hozAlign\":\"left\", \"editor\": \"input\"},\n {\"title\": \"details\",\n \"columns\": [\n {\"title\":\"Age\",\"field\":\"details.age\",\"width\": 100,\"hozAlign\":\"center\", \"editor\": \"input\"},\n {\"title\": \"Gender\",\"field\": \"details.gender\", \"width\": 100, \"hozAlign\": \"center\", \"editor\": \"input\"}]}\n ],\n \"data\": [\n {\"id\":1,\"name\":\"John Brown\", \"details\":{\"age\":30, \"gender\": \"Male\"}},\n {\"id\":2,\"name\":\"Betty Clark\", \"details\":{\"age\":25, \"gender\": \"Felmale\"}}\n]\n}","funcs":"","allowMsgFuncs":false,"maxWidth":"","events":"","order":0,"multiUser":false,"validateRowIds":false,"themeCSS":"","themeFile":"","tblDivId":"","printToLog":false,"width":0,"height":0,"x":775,"y":100,"wires":[[]],"l":false},{"id":"5bdd1785295d9c08","type":"ui-group","name":"Group Name","page":"29c1e3946599753c","width":"19","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"29c1e3946599753c","type":"ui-page","name":"Page Name","ui":"0494b27ad02d2c8b","path":"/page3","icon":"home","layout":"grid","theme":"c4f0f6c56e31265f","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"0494b27ad02d2c8b","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-tabulator"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"c4f0f6c56e31265f","type":"ui-theme","name":"Niva Theme","colors":{"surface":"#010ea7","primary":"#ffffff","bgPage":"#e2e2e2","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"16px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

If I edit Name (cell edit) on the dashboard and refresh the browser the new value sticks and also appears after refresh for other clients. If I Edit Age or Gender the new value disappear after refresh. The node on the server side does emit a "cellEdited" event:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/04067ff6a3b7d67281758017a51023ad82ca30f0.png)

and if I try to use "updateData" table command like this:

```auto
msg.tbCmd = "updateData"
msg.tbArgs = [[{"id":1, "details.age" : 45}]]

```

nothing happens.

The updateData works if

```auto
msg.tbCmd = "updateData"
msg.tbArgs = [[{"id":1, "details": {"age" : 45}}]]

```

but then gender will be blanked.

---

<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:** [23 July 2025 16:56 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265/2 "2025-07-23T16:56:01Z")

</div>

Let me check

---

<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:** [24 July 2025 09:32 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265/3 "2025-07-24T09:32:43Z")

</div>

> [@PeterH](#):
>
> The updateData works if
> 
> ```auto
> msg.tbCmd = "updateData"
> msg.tbArgs = [[{"id":1, "details": {"age" : 45}}]]
> 
> ```
> 
> but then gender will be blanked.

This is how Tabulator works. The nested cells `age` & `gender` are properties of an object (`details`), and `updateData` sets the complete object. So, if you want to update nested cells you have to provide all properties (or define a formatter function in the table configuration to update specific nested cells directly)

> [@PeterH](#):
>
> If I edit Name (cell edit) on the dashboard and refresh the browser the new value sticks and also appears after refresh for other clients. If I Edit Age or Gender the new value disappear after refresh. The node on the server side does emit a "cellEdited" event:

I have added support for in-cell editing of nested cells. Will be provided in the next release.

---

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [24 July 2025 13:18 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265/4 "2025-07-24T13:18:11Z")

</div>

Thanks for your feedback.

Seems a bit inconsistent to me (I understand its not your "fault" 🙂) Tabulator emits data in "dot-notaton" but require a proper JSON for input. e.g. also the export function.  
When data is exported from my example table abive to JSON it look like this:

```auto
[{
		"name": "John Brown",
		"details.age": 30,
		"details.gender": "Male"
	},
	{
		"name": "Betty Clark",
		"details.age": 25,
		"details.gender": "Felmale"
	}]

```

but to import (by e.g. "setData") the data need to be like this:

```auto
[{
		name: "John Brown",
		details: {age: 30,
		         gender: "Male"}
	},
	{
		name: "Betty Clark",
		details: {age: 25,
		          gender: "Felmale"}
	}]

```

---

<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:** [24 July 2025 19:57 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265/5 "2025-07-24T19:57:33Z")

</div>

Overriding my previous post, as I have investigated & figured this out.  
You are confusing between 2 separate things:

- Column nesting
- Data nesting

The table row is always a **flat** array of cells. Nesting columns gives a visual grouping effect, but doesn't change the underlying data model, and you access nested columns exactly like regular columns:

```auto
{
   "columns": [
      {"title":"Id","field":"id"},
      {"title":"Name","field":"name"},
      {"title": "details",
         "columns": [
            {"title":"Age","field":"age"},
            {"title": "Gender","field": "gender"}
          ]
       }
   ],
   "data": [
      {"id":1,"name":"John Brown", "age":30, "gender": "Male"},
      {"id":2,"name":"Betty Clark","age":25, "gender": "Female"}
   ]
}

```

In this case, regardless of the column being nested or not, `getData` will return a flat list of cells, and you can update any cell directly with `updateData`.

On the other hand, data nesting is about setting hierarchical objects into the table, and has nothing to do with the (visual) column nesting. For example, you may wish to maintain `name` as an object with the properties `first` and `last`, as follows:

```auto
{
   "columns": [
      {"title":"Id","field":"id"},
      {"title":"First Name","field": "name.first"},
      {"title":"Last Name","field":"name.last"},
      {"title": "details",
        "columns": [
           {"title":"Age","field":"age"},
           {"title": "Gender","field": "gender"}
        ]
      }
   ],
   "data": [
      {"id":1,"name":{"first":"John","last": "Brown"}, "age":30, "gender": "Male"},
      {"id":2,"name":{"first":"Betty","last": "Clark"}, "age":25, "gender": "Female"}
   ]
}

```

Since the table row is flat, the `name` object is broken to dot-notated cells (`name.first` & `name.last`), but data input & output still take the whole object, and you cannot update specific properties (unless you do some formatter tricks). `getData` will return the following:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c534dc3ddbcf7d8d32ba6d08c5000a28fdffe8b9.png)  
and `updateData` will look like this:

```auto
msg.tbCmd = updateData
msg.tbArgs = [
   [{id:2, "name":{"first":"John","last":"Brown"}]
]
```

---

<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:** [23 August 2025 19:58 UTC](https://discourse.nodered.org/t/node-red-dashboard-2-table-tabulator-editing-nested-field/98265/6 "2025-08-23T19:58:13Z")

</div>

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