Stumped on Postgresql Table with UI table or ui-tabulator

General
1

I am new to node red.. Completely. I have been working on a project and I've got everything working in the dashboards the way I want it at this time. Except for a page that allows me to edit database tables.

I really want just a standard table view That is clickable and editable. There are actually three or four different tables that I want to do this for. I have tried to watch videos, I have tried to find tutorials. I have read documents on tabulator and ui table. Checked the examples. and I can of course manually input the data and make them work but with database tables its messing with me.

Using an Inject node, then a postgresql node (returning an arra) then the ui table node I can get the data to show up. I have no idea how to make it editable. From this point. I dont see a way to change the field to "input" in the ui-table settings.

Using an inject then postresql node, then ui-tabulator, I can get it to show my column headers as I put them in the ui-tabulator initial settings, but no data at all.

If someone can direct me on a real tutorial. That goes through it step by step or help me understand. Once I have it I will have it but I feel like I am going in circles with the same videos and tutorials that never really get into the database.

Side note I am using the newer 2.0 dashboard if that helps anyone.

2

Have you looked at the example flows that come with ui-tabulator? If not, you can "import" the flows (see below)

Screenshot 2026-06-12 at 9.22.27 AM
Screenshot 2026-06-12 at 9.22.27 AM1812Ă—1456 294 KB

Once you have imported the flows, the function node after the "Create table" inject node shows the configuration of how to make a table editable (and also to map/update) data into the table,

Screenshot 2026-06-12 at 9.23.18 AM
Screenshot 2026-06-12 at 9.23.18 AM1466Ă—1242 178 KB

It uses "tabulator" as the underlying table library and most of the functions/configurations that are supported by tabulator can be used.

3

Yeah. Ive imported it. I guess I should step back. On the ui-tabulator I cant even get the data into the table. The headers is all i can get to show. I need to get the data to show before I even worrying about editing. I have the data in an array, i have the columns in the initial table settings. But wvidentially I am not passing the array into the table properly.

I guess the correct question is what do I put in the Data area of the place you are pointing to. The array is from my msg.payload.

4

For those looking, I have found how to get the data into the table.

msg.tbCmd = "setData";
msg.tbArgs = [msg.payload];

return msg;

I have also hacked a way to get the data to update but I dont think I did it properly or nicely.

So I ended up with a switch after the tabulator node. Based on msg.event. one side goes to rowClick, the other goes to cellEdited.

On the rowClick Side I have this function.

flow.set(
    "selectedStation",
    msg.payload.rowData.station
);

return null;

On the cellEdited side I have this.

const station = flow.get("selectedStation");

if (!station) {
    return null;
}

const field = msg.payload.field;

const allowed = [
    "thrower1",
    "thrower2",
    "thrower3",
    "thrower4",
    "thrower5"
];

if (!allowed.includes(field)) {
    return null;
}

msg.query = `
UPDATE stations
SET ${field} = $1
WHERE station = $2
`;

msg.params = [
    msg.payload.newValue,
    station
];

return msg;

Then that runs to a postgresql node with this inside.

msg.query

I think this is a dirty way to do it. I believe there should be a cleaner way. I am just not seeing it. The issue I had was the row id was not being passed. If anyone has a better way I am open to it.

5

There is a "notification" event that is generated when the cell is edited. This is defined in the table configuration.

Screenshot 2026-06-13 at 6.37.08 AM
Screenshot 2026-06-13 at 6.37.08 AM778Ă—1790 67.5 KB

Notification event:

Screenshot 2026-06-13 at 6.37.56 AM
Screenshot 2026-06-13 at 6.37.56 AM468Ă—492 32.4 KB

Is this what you were looking for? EDIT: It looks like you may be already using the notification event (cellEdited), so I'm not sure what is missing.

6

Yeah, I am using cellEdited and rowClick the function to get the row by using row click just seemed like a long way around. Like why does the payload not already have the row id in it.?

Maybe that is the way that it is but it is working. Now I need to figure out how to add rows from the table. I am playing with it.

7

Is the id:2 the row ID? The example had only 2 columns so I wasn't sure it if was the row number, the cell (2nd in the row) or the column number

8

The table has six columns. station (being the id), thrower1, thrower2, thrower3, thrower4, thrower5

So when I pass the cellEdited. It only brings in the field, such as thrower2 and the new value and old value. The row ID is not passed for some reason.

image
image301Ă—303 6.37 KB

Hence why I have to create a switch, one side with rowClick, the other with cellEdited. And call the rowClick information to get the row id of "station" to bring it into the query off of the cellEdited side. I hope that makes sense.

9

That is very strange indeed. I just did another test and this is what I get back:

image
image464Ă—834 61.7 KB

And the data (from the example) looks like this:

image
image1188Ă—484 7.41 KB

What version do you have installed? I have @omrid01/node-red-dashboard-2-table-tabulator
v0.8.2. Node-RED version: v4.1.0, Node.js version: v22.15.0. And I don't see the "oldValue" at all. @omrid - any thoughts?

UPDATE: I deleted the ui-tabulator example flow and re-imported it and now it seems to be working.

image
image778Ă—468 34.5 KB

and the id = row id in the table.

image
image1274Ă—574 32.7 KB

Do you have a column in your data called "id"? I believe that may be required if you are editing the data (not required if you are just displaying data) and is sent as part of the event. I think there is a way to specify which column is the unique identifier, but I am not sure how ui-tabulator does that.

10

Hi, the cellEdited notification should include the row Id, so you don't need to register for a rowClick (and definitely not store the row Id in a context var, as this can introduce concurrency & race condition issues).
Is there anything else which is not working for you, or need any guidance?

11

I tried to figure out why oldValue or id are sometime missing in the cellEdited notification.Turns out Tabulator omits them if the have no value (i.e. no row id field, or cell value was not initialized and did not have an old value).
I will consider forcing a null value into the above missing fields in the next ui-tabulator upgrade.