Hi folks, In my newest node config screen, a table is displayed. Each row in that table can have a different number of properties/columns. So I show the common properties/columns in the table, but I need to be able to show the other extra properties somewhere (so the user can edit them): [image] …

When you create the admin ui for a node, you get access to jQuery and jQuery UI in addition to the Node-RED specific ui elements like editableList. As you are using editableList, I would probably start by trying a 2-line layout with the extra fields appearing in a second line - really all one row o…

[image] TotallyInformation: As you are using editableList, I would probably start by trying a 2-line layout with the extra fields appearing in a second line Morning @TotallyInformation , indeed some nodes solve it like that. But that isn't really my cup of tea. I have added column headers. …

Maybe make each row a seperate table?

Hey @zenofmud , Perhaps I might give that idea a chance. Found treetables, datasets, ... but they are all quite mind blowing for a hobby :thinking: Think this jsfiddle example could be a good place to start for my adventure. Although I'm wondering if I could replace my table perhaps by this JSON…

[image] BartButenaers: solve it like that. But that isn't really my cup of tea. I have added column headers . Because I find it very confusing having to fill in multiple input fields, without column headers guiding me. Sorry, meant to say this yesterday. You know that you get a header with t…

[image] BartButenaers: create a JSON scheme, and let the editor do all the heavy work There are certainly tools to do that but I don't know of any for jQuery - not that I use jQuery much so that isn't to say they don't exist. The default framework for uibuilder v2 uses bootstrap-vue which ha…

[image] TotallyInformation: You know that you get a header with the editableList? @TotallyInformation . No, unfortunately I didn't knew that. Until now :wink:... Do you perhaps know a node that I can use as an example?

https://nodered.org/docs/api/ui/editableList/#header

[image] BartButenaers: Do you perhaps know a node that I can use as an example? Hmm, let me think - do I know anyone using editableList? Maybe I do ... wait one ... Here is a simple section taken from the uibuilder v2 admin panel:  <div id="npm…

[image] BartButenaers: But that isn't really my cup of tea @TotallyInformation , @knolleary , Thanks for the pointer guys! Must admit I was wrong about the editableList: seems that the editableList is really my cup of tea! Once you get familiar with it, it is a very powerful and rather easy …

Node-RED

Node-RED Forum

Node config screen - Show details of a table row

Developing Nodes

BartButenaers 14 June 2019 16:26 17

Hey @TotallyInformation,
I use GifCam on a Windows portable ...

[Announce] node-red-contrib-ui-svg

Topic		Replies	Views
Failure to create my first UI table Dashboard	26	2730	28 May 2021
Examples for node-red-node-ui-table Dashboard	92	48330	3 July 2020
Ui-table supports ui_control Dashboard	84	25194	12 July 2021
Ui-table with dropdown list Dashboard	5	937	23 October 2022
Request: Editable Properties Bar Feature Requests editor	26	1404	30 October 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Node config screen - Show details of a table row

Related topics