# Failure to create my first UI table
**URL:** https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087
**Category:** Dashboard
**Created:** [22 May 2021 11:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087 "2021-05-22T11:02:28Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [22 May 2021 11:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/1 "2021-05-22T11:02:28Z")
Hi folks,
I'm using the [node-red-node-ui-table](https://flows.nodered.org/node/node-red-node-ui-table) for the first time, but - although it seems a very nice component - I cannot get it working.
In the following example flow, I inject a message to fill the table with two scenario's for my home security system:
```auto
[{"id":"7d48e13.90ee22","type":"ui_table","z":"7d79c0ef.af3d3","group":"571a38b1.5e3638","name":"Scenarios","order":1,"width":"8","height":"3","columns":[{"field":"status","title":"Status","width":"30px","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"scenario","title":"Scenario","width":"70%","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"action","title":"Action","width":"20%","align":"left","formatter":"html","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":1100,"y":500,"wires":[["b8bec67c.99ebb8"]]},{"id":"b8bec67c.99ebb8","type":"debug","z":"7d79c0ef.af3d3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1270,"y":500,"wires":[]},{"id":"93e4fcd0.05aa9","type":"inject","z":"7d79c0ef.af3d3","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"status\":\"\",\"scenario\":\"Scenario 1\",\"action\":\"\"},{\"status\":\"\",\"scenario\":\"Scenario 2\",\"action\":\"\"}]","payloadType":"json","x":910,"y":500,"wires":[["7d48e13.90ee22"]]},{"id":"571a38b1.5e3638","type":"ui_group","name":"Alarm scenarios","tab":"29ec6908.552b36","order":1,"disp":true,"width":"8","collapse":false},{"id":"29ec6908.552b36","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]
```
And this is what I get:
There are a number of failures:
1. The table doesn't fit the available space (i.e. I keep getting a horizontal scrollbar), although I have used percentages for the widths of the columns. This kind of styling stuff keeps failing on me every time ...
2. I wanted to have buttons in the last column that send an output message when clicked. However I had to activate _"send data on click"_ in order to get an output on the Table-node. But now an output message is being send whereever I click on a row. Not only on the button.
Would appreciate if anybody could help me to get a nice looking table, because the lady of the house is going to use it 🥶
Thanks!!
Bart
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [22 May 2021 22:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/2 "2021-05-22T22:02:26Z")
Seems that my click handler is called, but the `$scope` doesn't exist:
Not clear to me yet why I can't use the AngularJs scope in the html content for the last column:
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [22 May 2021 22:15 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/3 "2021-05-22T22:15:16Z")
Hi Bart.
1. The column widths is not pixel perfect. I think it don’t take the (possible) vertical scrollbar into account. Try to play with the percentages or choose pixels with a little bit left over for the scrollbar.
2. the [default cellClick function](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/24) should give you column and row information, as far as I remember or You have to write your own `cellClick`callback function for the column of your choice only. Callback functions can be sent via a `msg.ui_control` Message. There are several treads and examples how to do that perhaps this [one and the following messages](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/17)
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [22 May 2021 22:23 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/4 "2021-05-22T22:23:06Z")
I have no clue in all Angular related stuff. Perhaps because tabulator is vanilla JS and so the Angular scope is lost?
Tabulator callbacks can access the widget context send function by using this.send();
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [22 May 2021 22:28 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/5 "2021-05-22T22:28:53Z")
Hey Chris,
Thanks for the tips!
I will try tomorrow evening if I get the `this.send` in the callback running, because my time is up for today.
Will get back here afterwards most probably with extra questions 😉
Bart
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [22 May 2021 22:31 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/6 "2021-05-22T22:31:24Z")
My time too. A last Gin&Tonic ...
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [23 May 2021 07:15 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/7 "2021-05-23T07:15:15Z")
> [@Christian-Me](#):
>
> the [default cellClick function](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/24) should give you column and row information
Morning,
So if I keep the default cellClick function (to keep my flow simple), I could do it perhaps like this: instead of showing a button, I show a div without click handler. Because I get an output message for every cell in the row, and I only need to check whether the last column index has been clicked...
So I thought having a look at the style of the standard Node-RED buttons, to mimic those buttons with a div element in my table:
So I injected that style for the DIV element in the last column of my table:
But I'm not really blown away from the result:
I have to add some alignments, hover effects and so on. But it still looks a bit different compared to the button at the bottom? Is it perhaps of the background color of the table rows?
If anybody has _ **styling advise** _, please let me know!!
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [23 May 2021 09:28 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/8 "2021-05-23T09:28:12Z")
Good Morning (? - think I had too many G&T with my wife yesterday 🤪)
Have you tried this:
form here ([Tabulator](http://tabulator.info/docs/4.7/format#format-custom))
and insert a button instead of the icon? This should give you the desired hover effect and button look?
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [23 May 2021 09:40 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/9 "2021-05-23T09:40:16Z")
I hacked this into the interactive demo flow:
```auto
[
{
"field": "button",
"title": "button",
"visible": true,
"formatter": "function(cell, formatterParams, onRendered){ return \"\"; }"
}
]
```
gives you that:
The topic carries the column info and the row show ... the row 😉
```auto
[{"id":"ecf457e4.37b978","type":"ui_button","z":"c4712650.59b5e8","name":"","group":"ff9fdb9a.7da098","order":12,"width":"4","height":"1","passthru":false,"label":"add/show buttons","tooltip":"add a new column","color":"","bgcolor":"","icon":"","payload":"[{\"field\":\"button\",\"title\":\"button\",\"visible\":true,\"formatter\":\"function(cell, formatterParams, onRendered){ return \\\"\\\"; }\"}]","payloadType":"json","topic":"columns","topicType":"str","x":736,"y":1088,"wires":[["16664cef.5b26b3"]]},{"id":"ff9fdb9a.7da098","type":"ui_group","name":"TEST","tab":"7dcc246f.ee661c","order":1,"disp":false,"width":"8","collapse":false},{"id":"7dcc246f.ee661c","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [23 May 2021 10:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/10 "2021-05-23T10:02:27Z")
> [@Christian-Me](#):
>
> think I had too many G&T with my wife yesterday
I'm completely not surprised. When you wrote yesterday "... **last** Gin&Tonic..." I thought to myself: all the information that he is sharing at this moment is unreliable, so I simply have to wait until he is sober again... 🤣
> [@Christian-Me](#):
>
> Have you tried this:
Yes I had seen that already. But to be honest, I had no idea where it fitted into my flow 😌
> [@Christian-Me](#):
>
> I hacked this into the interactive demo flow:
That is awesome information. I love it when you are sober 😂. I really appreciate your support!!!
Will try it this evening. Now helping the son preparing for his stoichiometric examination... So I hope when I use an `md-button` in your callback function, that it automatically gets the correct theme look. Fingers crossed ...
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [23 May 2021 10:05 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/11 "2021-05-23T10:05:41Z")
OK I forgot the styling part:
I did a little bit copy paste:
form here
to here
```auto
[
{
"field": "button",
"title": "Button",
"visible": true,
"formatter": "function(cell, formatterParams, onRendered){ return ''; }"
}
]
```
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [23 May 2021 10:08 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/12 "2021-05-23T10:08:38Z")
Although doesn't specifically answer your questions, there's some really useful ui\_table information in this thread - [Examples for node-red-node-ui-table](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256) which may assist.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [23 May 2021 10:25 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/13 "2021-05-23T10:25:37Z")
> [@Christian-Me](#):
>
> I did a little bit copy paste
That looks VERY nice!!!!
Cannot wait to try it this evening...
One of the things that I didn't understand last night was the style changes of the dashboard buttons when you hoover them (the `.md-button:hover` in my screenshot above). That was not automatically applied when I used the md-button` style for some reason... I think that is the last missing piece in this issue.
> [@Paul-Reed](#):
>
> there's some really useful ui\_table information in this thread
Yes Paul, indeed. I have browsed through that thread and other articles and the example flow in the Import menu. But I was a bit confused how the ui\_control worked. Thought first it was via the ui\_control node, but then it seemed to be a field in the input message. I have never had time to play with the ui\_control node yet, so it was very new to me ...
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [23 May 2021 21:45 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/14 "2021-05-23T21:45:40Z")
> [@Christian-Me](#):
>
> ```auto
> [
> {
> "field": "button",
> "title": "Button",
> "visible": true,
> "formatter": "function(cell, formatterParams, onRendered){ return ''; }"
> }
> ]
>
> ```
@Christian-Me,
Hmmm, I got to the point where I am going to ask very stupid questions. But I'm stuck...
I have declared my 3 columns via the config screen:
But in the dropdown with _build-in formatters_ there is no " **Custom**" option. Does this mean I have to:
1. Choose format "HTML" (or whatever other type) for my third column, and inject a message at startup (with command "_setColumns_") to set my custom cell formatter on the third column (via
"ui\_control.tabulator.columns")?
2. Leave the config screen empty (like in the ui\_control example flow), add setup all my columns via the input message?
It would seem useful to me if a "Custom" formatter option would be available, and a related input field for the Javascript callback function code (that is displayed as soon as the "Custom" option is selected):
But unfortunately there is no TypedInput for Javascript code, because otherwise the field cannot be expanded ...
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [24 May 2021 09:35 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/15 "2021-05-24T09:35:31Z")
Hi Bart,
perhaps I have to dive deeper into the theory of operation of ui\_contol messages in case of the ui-table node.
1. the configuration done in the config UI is the foundation of the tabulator object configuring the table.
2. each subsequent `msg.ui_control.tabulator` message add or alter the parameters used to configure the table. (they merge and NOT replace the current configuration) for maximum flexibility
3. subsequent messages `msg.ui_control.tabulator.columns` also can add columns or add/alter parameters. To alter a parameter the unique `field` (called `property` in the ui) must match otherwise a new column will be created
So a mixed use of config UI settings and subsequent `ui_control.tabulator` messages is possible
In your case a node sending this should add the custom formatter to your "action" column
```auto
{
"payload": null,
"ui_control": {
"tabulator": {
"columns": [
{
"field": "action",
"formatter": "function(cell, formatterParams, onRendered){ return ''; }"
}
]
}
}
}
```
I trigger a change or function node by the `ui control` node on change tab events in order to make it 100% sure that the configuration is up to date. Perhaps play around with example #6 and inspect what is sent to ui-table
The format definition of the column in the config UI then becomes overwritten to a custom formatter to plain text is the best choice. You can even alter the formatter function to make the label defined by the cell value replace 'Activate' by `cell.getValue()`
I use a function node to write my call back functions and copy paste them into a JSON (typed input) using the visual editor to take care that all inverted commas are escaped correctly (CTRL-A, DEL, CTRL-V).
> [@BartButenaers](#):
>
> - Choose format "HTML" (or whatever other type) for my third column, and inject a message at startup (with command " _setColumns_ ") to set my custom cell formatter on the third column (via
> "ui\_control.tabulator.columns")?
> - Leave the config screen empty (like in the ui\_control example flow), add setup all my columns via the input message?
- the format of the column is in this case irrelevant as you create your own formatter later by ui\_control
- you can leave it empty and define all your colums via ui\_control or mix both (see point 3 above). The example 6 use this (i.e. the id column is added by a ui\_control message)
last but not least to your idea having a custom formatter option in the config ui:
It seams to be appealing in the beginning but as you wrote there is not an easy way to do this. I could think of the to use the JavaScript editor widget but I see many problems:
- Placing it into the ui make it look easy for users but it is not. You have to gain basic knowledge of the tabulator API to do it right. (and read the docs) This could lead to frustration to users with less JavaScript know how.
- where to stop? I use in my latest table 24 references to call back functions and I think 12 unique functions. i.e. you can add a legend to a progress bar formatter and define the columns .... or several context functions to trigger the context menu node at the right place 😉
- many build in formatters have already several parameters not represented in the UI.
- before that missing build in formatters like the date time (important for sorting) should be added.
- tabulator has so much to offer you will never able to cover everything by a config UI
Personally: I'm only a fan of _low code_ to a certain point. If it ends in a ton of options in obscure places I preferer a few lines of good old code and full access to the APIs. Strangely the "computer literacy" (good old BBC) is lost over the years. I learned Basic on a PET (bevor taught in class) and quickly switched to Pascal as soon a compiler was available on XT PCs. Good old Pascal - It is still my foundation I base all my C/C++, Javascript and what not obscure scripting language I use today. My son did and will not not learn any programming language in German High school ☹ . A big loss for the so called "digital natives" generation.
One extra thought: Can a visual JSON editor be done with a template in the background defining the possible properties and default values, including code / functions? A User can select options parameters form drop down lists, get basic info what this will do, type definitions, limits, default values, code prototypes and validation. Could be useful for many complex APIs - it is quite frustrating that a missing comma in a complex JSON can destroy your JSON with a click on Done.
So enough text for now ... (perhaps sometimes take a look in the ui-table handler subfow - this is my "workhorse" for all my tables)
Here my latest "creation":
and the JSON for this:
```auto
{
"customHeight": 18,
"tabulator": {
"index": "id",
"layout": "fitColumns",
"movableColumns": true,
"groupBy": "",
"dataTree": true,
"columns": [
{
"title": " id",
"field": "id",
"width": 140,
"frozen": true,
"tooltip": true,
"headerSort": false,
"headerTooltip": "Element",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContextNoHide'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"title": "Device",
"field": "deviceId",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"title": "Node",
"field": "nodeId",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"title": "Property",
"field": "propertyId",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"title": "Program",
"field": "programId",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"title": " Bezeichung",
"field": "label",
"width": 100,
"headerTooltip": "Alias Name",
"tooltip": true,
"headerSort": true,
"editor": "autocomplete",
"editorParams": {
"freetext": true,
"allowEmpty": true,
"showListOnEmpty": true,
"values": true
},
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"formatterParams": {
"outputFormat": "HH:mm",
"inputFormat": "x",
"invalidPlaceholder": ""
},
"title": " Start",
"field": "start",
"topCalc": "function(values, data, calcParams){ var secs = 0; var pad = function (num) { return ('0'+num).slice(-2); }; values.forEach(function(value){ secs+=Number(value); }); var minutes = Math.floor(secs / 60); secs = secs%60; var hours = Math.floor(minutes/60); minutes = minutes%60; return pad(hours)+':'+pad(minutes)+':'+pad(secs); }",
"editor": "number",
"formatter": "datetime",
"width": 40,
"headerSort": true,
"headerTooltip": "Startzeit",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"title": " Dauer",
"field": "duration",
"formatter": "function(cell, formatterParams, onRendered) { var pad = function (num) { return ('0'+num).slice(-2); }; var secs = Number(cell.getValue()); if (Number.isNaN(secs)) return; var minutes = Math.floor(secs / 60); secs = secs%60; var hours = Math.floor(minutes/60); minutes = minutes%60; var days = Math.floor(hours/24); hours = hours%24; if (days>0) return days+'d '+pad(hours)+':'+pad(minutes); else return pad(hours)+':'+pad(minutes)+'.'+pad(secs); }",
"editor": "number",
"editorParams": {
"min": 1,
"max": 60,
"step": 1
},
"width": 40,
"headerSort": false,
"headerTooltip": "Ãœbergangszeit in minuten",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
},
{
"formatterParams": {
"min": 0,
"max": 100,
"color": [
"#061a00",
"#0d3300",
"#134d00",
"#1a6600",
"#208000",
"#269900",
"#2db300",
"#33cc00",
"#39e600",
"#40ff00"
],
"legend": "function (value) {return \"\"+value+\" %\";}",
"legendColor": "#FFFFFF",
"legendAlign": "center"
},
"title": " Wert",
"field": "value",
"formatter": "progress",
"editor": "number",
"editorParams": {
"min": 0,
"max": 100,
"step": 5
},
"width": 70,
"headerSort": false,
"headerTooltip": "Eingestellter Wert",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column._column.field}); e.preventDefault(); }"
}
],
"columnResized": "function(column){ var newColumn = { field: column._column.field, visible: column._column.visible, width: column._column.width, widthFixed: column._column.widthFixed, widthStyled: column._column.widthStyled }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }",
"columnMoved": "function(column, columns){ var newColumns=[]; columns.forEach(function (column) { newColumns.push({'field': column._column.definition.field, 'title': column._column.definition.title}); }); this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }",
"rowFormatter": "function(row){ var data = row.getData(); switch (data.$state) { case \"lost\": row.getElement().style.backgroundColor = \"#9e2e66\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"sleeping\": row.getElement().style.backgroundColor = \"#336699\"; break; case \"disconnected\": row.getElement().style.backgroundColor = \"#cc3300\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"alert\": row.getElement().style.backgroundColor = \"#A6A6DF\"; break; case \"init\": row.getElement().style.backgroundColor = \"#f2f20d\"; break; case \"ready\": row.getElement().style.backgroundColor = \"\"; row.getElement().style.color = \"\"; break; } }",
"rowContext": "function(e, row){ this.send({ui_control:{callback:'rowContext'},position:{\"x\":e.x,\"y\":e.y},payload:row.getData(),\"topic\":row.getData().id}); e.preventDefault(); }",
"cellEdited": "function(cell){ this.send({ ui_control:(cell.getColumn().getField()===\"value\") ? {callback:'valueEdited'} : {callback:'cellEdited'}, payload:cell.getValue(), oldValue:cell.getOldValue(), field:cell.getColumn().getField(), id:cell.getRow().getCell('id').getValue() }); }",
"rowMoved": "function(row){ var rowOrder=[]; row._row.parent.rows.forEach((row,index) => { rowOrder.push(row.data.id); }); this.send({ui_control:{\"callback\":'rowMoved',\"rowOrder\":rowOrder}}); }",
"rowTap": "function(e, row){this.send({ui_control:{callback:'rowTap'},position:{\"x\":e.x,\"y\":e.y},payload:{\"$name\":row._row.data.$name,\"$localip\":row._row.data.$localip,\"name\":row._row.data.name},\"topic\":row._row.data.id}); e.preventDefault();}"
}
}
```
And the flow (without the actual handling of the data and context menues is quite trivial)
OK ... there are 500+ lines of (to be reworked) javascipt code in the handler subflow 😉
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [24 May 2021 19:15 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/16 "2021-05-24T19:15:24Z")
Hey @Christian-Me,
It is very kind of you to explain it all in detail!! Hopefully others can also benefit from your explanation afterwards ...
That indeed clarifies a lot of things. So I am making progress...
BTW. your contextmenu table looks very nice!
> [@Christian-Me](#):
>
> My son did and will not not learn any programming language
Here the same... Completely no interest in programming...
My heart start bleeding when talking about it...
> [@Christian-Me](#):
>
> Can a visual JSON editor be done with a template in the background defining the possible properties and default values, including code / functions?
Some time ago I created a fork of Node-RED to control the user input in a json based on a specified json schema. I had already made a lot of progress, but due to a lack of time I have not been able to complete it... But I haven't seen anything about a code editor. You could do that, but then there should be a TypedInput for Javascript code, and that doesn't exist.
Another question: I would like to have the cell content centered vertically, which is required because I made the rows a bit higher (via `"customHeight": 15`). So based on the tabulator [documentation](http://tabulator.info/docs/4.6/columns) I tried the two possible ways:
But both ways fail:
This error is generated in the tabulator code:
Because the `this.defaultOptionList` contains a lot of options, but no option for vertical cell alignment.
Have you already tried this yourself?
It makes no sense to my why the option it isn't in that list...
Thanks!
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [24 May 2021 22:47 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/17 "2021-05-24T22:47:08Z")
Hi, just quick ... your analyse is totally correct ... searching through the release infos of tabulator, there are issues in the alignment properties ... But there is hope ... Upgrading to the latest version vertAlign seams to work as expected (tested on the number column) in the latest version 4.9.3:
But rolling out an upgrade perhaps will need a little bit more testing. Think you can grab a test version form my GitHub tomorrow (or so)
Chris
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [25 May 2021 08:29 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/18 "2021-05-25T08:29:03Z")
I pushed the upgrade to my Github ([node-red-ui-nodes/node-red-node-ui-table at master · Christian-Me/node-red-ui-nodes · GitHub](https://github.com/Christian-Me/node-red-ui-nodes/tree/master/node-red-node-ui-table)) perhaps you like to test it
> [@BartButenaers](#):
>
> because I made the rows a bit higher (via `"customHeight": 15` ).
Hmmm ... The `customHeight`paramter was not intended to customized the row hight:
The readme.md says:
> by adding _ **headers** _ , _ **footers** _ , _ **line** _ or _ **column grouping** _ it is sometimes not possible to determine the amount of lines. Therefore the height can be defined by sending `msg.ui_control.customHeight=lines`
Is there an unknown side effect?
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [25 May 2021 09:36 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/19 "2021-05-25T09:36:23Z")
Will this also sweep up - [node-red-node-ui-table regex problem with ":" · Issue #59 · node-red/node-red-ui-nodes · GitHub](https://github.com/node-red/node-red-ui-nodes/issues/59) ?
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [25 May 2021 10:20 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/20 "2021-05-25T10:20:29Z")
I don't know, I hope 🙂 ... sorry I'm a regex noob ... But I will test it ... perhaps something to learn;)
I also have to test it with all demos and my own (quite complex) tables.
And I like to check out some of the new features.
[Next page](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087.md?page=2)