Table supports single object along with array of objects

[gayanSandamal]

Description

Screen.Recording.2024-09-10.at.11.32.55.mov

Related Issue(s)

#255

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[joepavitt]

Hey @gayanSandamal - I think you've misunderstood what the request was here... The idea is that if you send in a message with. a single object, it would append to the existing table's data.

So, yes, in the case where you have no data, and send a single object in, this is fine. If I've already sent 100 rows of data via an array, then send a single object, that object should append to the existing 100 objects.

I do now realise though, that we're still missing the "Action" option on tables, like we have with Charts, so could you add that in too please as part of this PR? It was mentioned on the attached issue here. Then, a user can choose "Append" or "Replace", with the former, single data objects would append to any existing data, the later, it would replace.

[gayanSandamal]

Hey @gayanSandamal - I think you've misunderstood what the request was here... The idea is that if you send in a message with. a single object, it would append to the existing table's data.

So, yes, in the case where you have no data, and send a single object in, this is fine. If I've already sent 100 rows of data via an array, then send a single object, that object should append to the existing 100 objects.

I do now realise though, that we're still missing the "Action" option on tables, like we have with Charts, so could you add that in too please as part of this PR? It was mentioned on the attached issue here. Then, a user can choose "Append" or "Replace", with the former, single data objects would append to any existing data, the later, it would replace.

@joepavitt thank you for clarification on this. I will update this PR

[gayanSandamal]

payload || []

@joepavitt I'm marking this as draft for now, as there’s still an issue with appending table data on the server side. It continues to replace instead of appending. However, it works fine on the frontend since I’ve added a separate new mutation for that. I'll investigate the backend behaviour further.

[joepavitt]

Not sure I understand why the new store mutation is needed?

You just need to maintain a local data variable, and store the data there? Append if appropriate, replace if appropriate?

For the server-side, just store the messages as history like chart, no need to do anything else.

Om load, cycle through the history and handle the data points accordingly.

[gayanSandamal]

Not sure I understand why the new store mutation is needed?

You just need to maintain a local data variable, and store the data there? Append if appropriate, replace if appropriate?

For the server-side, just store the messages as history like chart, no need to do anything else.

Om load, cycle through the history and handle the data points accordingly.

Thanks for the quick reply!

You're absolutely right. I added the new mutation just to keep things clean, and yes, that can be handled in the UITable component. I'll make the changes as you suggested.

[gayanSandamal]

Not sure I understand why the new store mutation is needed?

You just need to maintain a local data variable, and store the data there? Append if appropriate, replace if appropriate?

For the server-side, just store the messages as history like chart, no need to do anything else.

Om load, cycle through the history and handle the data points accordingly.

@gayanSandamal Updated the PR and this is ready for reaview

tested flow

[{"id":"aa6c78ebcce24f22","type":"inject","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","name":"Array payload (prepend)","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"colA\":\"A\",\"colB\":\"Alpha\",\"colC\":1},{\"colA\":\"B\",\"colB\":\"Bravo\",\"colC\":2}]","payloadType":"json","x":300,"y":5000,"wires":[["a60d56eb82660a88"]]},{"id":"a60d56eb82660a88","type":"junction","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","x":480,"y":5120,"wires":[["992a534fd22cd77a"]]},{"id":"30d7f1f9477ae6d9","type":"inject","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","name":"Object payload","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"colA\":\"W\",\"colB\":\"Wheels\",\"colC\":23}","payloadType":"json","x":280,"y":5100,"wires":[["a60d56eb82660a88"]]},{"id":"69c91b9e795a5625","type":"inject","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","name":"Set null payload","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"null","payloadType":"json","x":280,"y":5160,"wires":[["a60d56eb82660a88"]]},{"id":"27267da96a18fd10","type":"inject","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","name":"Set an empty array payload","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":320,"y":5220,"wires":[["a60d56eb82660a88"]]},{"id":"a2100ad44fb3ae3a","type":"inject","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","name":"Array payload (append)","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"colA\":\"U\",\"colB\":\"Uniform\",\"colC\":21},{\"colA\":\"V\",\"colB\":\"Victor\",\"colC\":22}]","payloadType":"json","x":300,"y":5040,"wires":[["a60d56eb82660a88"]]},{"id":"992a534fd22cd77a","type":"ui-table","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","group":"6d04cd4bc990040a","name":"","label":"text","order":1,"width":0,"height":0,"maxrows":0,"passthru":false,"autocols":true,"showSearch":true,"selectionType":"none","columns":[],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"append","x":610,"y":5100,"wires":[[]]},{"id":"fe3f41285e532c17","type":"inject","z":"80a7b66be7ea4735","g":"f7336d85cc21fa5c","name":"Array payload","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"colA\":\"C\",\"colB\":\"Charlie\",\"colC\":3},{\"colA\":\"D\",\"colB\":\"Delta\",\"colC\":4},{\"colA\":\"E\",\"colB\":\"Echo\",\"colC\":5},{\"colA\":\"F\",\"colB\":\"Foxtrot\",\"colC\":6},{\"colA\":\"G\",\"colB\":\"Golf\",\"colC\":7},{\"colA\":\"H\",\"colB\":\"Hotel\",\"colC\":8},{\"colA\":\"I\",\"colB\":\"India\",\"colC\":9},{\"colA\":\"J\",\"colB\":\"Juliet\",\"colC\":10},{\"colA\":\"K\",\"colB\":\"Kilo\",\"colC\":11},{\"colA\":\"L\",\"colB\":\"Lima\",\"colC\":12},{\"colA\":\"M\",\"colB\":\"Mike\",\"colC\":13},{\"colA\":\"N\",\"colB\":\"November\",\"colC\":14},{\"colA\":\"O\",\"colB\":\"Oscar\",\"colC\":15},{\"colA\":\"P\",\"colB\":\"Papa\",\"colC\":16},{\"colA\":\"Q\",\"colB\":\"Quebec\",\"colC\":17},{\"colA\":\"R\",\"colB\":\"Romeo\",\"colC\":18},{\"colA\":\"S\",\"colB\":\"Sierra\",\"colC\":19},{\"colA\":\"T\",\"colB\":\"Tango\",\"colC\":20}]","payloadType":"json","x":590,"y":5220,"wires":[["992a534fd22cd77a"]]},{"id":"6d04cd4bc990040a","type":"ui-group","name":"#255 Add rows to ui-table without Array structure","page":"c2a6a254b088c41d","width":"6","height":"1","order":4,"showTitle":true,"className":"","visible":true,"disabled":"false"},{"id":"c2a6a254b088c41d","type":"ui-page","name":"1111","ui":"a171c8195c1b8e57","path":"/page1111","icon":"wifi","layout":"grid","theme":"0d92c765bfad87e6","order":18,"className":"","visible":"true","disabled":"false"},{"id":"a171c8195c1b8e57","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-chart","ui-form","ui-file-input","ui-button","ui-button-group","ui-dropdown","ui-slider","ui-switch","ui-text","ui-markdown","ui-notification","ui-template","ui-table"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"fixed"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#cc00a7","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}}]

Screen.Recording.2024-09-17.at.03.13.33.mov

[joepavitt]

I needed to make a few minor amendments before this could be considered ready:

• Move the "Action" option in the config editor as it was at the very bottom, and with lots of columns configured was easily lost.
• Added headers to the online docs to make it more obvious where the information was for sending data to the tables.
• There was no in-editor help for "Action", so I've added some