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

TotallyInformation 8 June 2019 16:02 6

Sorry, meant to say this yesterday.

You know that you get a header with the editableList? All you need to do is set sensible widths using CSS. Then you can have the best of both worlds.

Topic		Replies	Views
Failure to create my first UI table Dashboard	27	2675	27 June 2021
Examples for node-red-node-ui-table Dashboard	93	48134	17 July 2020
Ui-table supports ui_control Dashboard	85	24963	26 July 2021
Ui-table with dropdown list Dashboard	6	921	22 November 2022
Request: Editable Properties Bar Feature Requests editor	27	1372	29 December 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