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

Dashboard
,
1

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

image
image434×151 1.96 KB

Code:

[{"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
image371×324 5.48 KB

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

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

nothing happens.

The updateData works if

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

but then gender will be blanked.

2

Let me check

3

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)

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

4

Thanks for your feedback.

Seems a bit inconsistent to me (I understand its not your "fault" :slightly_smiling_face:) 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:

[{
		"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:

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

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:

{
   "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:

{
   "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
image172×200 2.77 KB

and updateData will look like this:

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