Delete a row from Ui-table

Hello! I wanted to know how can we delete a row from the UI-table widget just by clicking on it OR by any other way.
I don't want to bodge! I have made it work by deleting the entire data and then adding the new data without that particular row. But I think its a suboptimal solution. I believe there's a simpler and better way to do it.

I use the following structure to add a row into the ui-table. Perhaps something similar for deleting a single row?

msg.payload = {
    command: "addRow",
    arguments: [
        {
            "Name": Rock
        },
        true
    ],
    returnPromise: true
}

Is there a command for simply removing a row either by clicking on it or by matching a cell of that row?

I am a complete newbie and thus I am facing difficulty in understanding the Tabulator documentation.

Thanks! :smiley:

Have you read this post (includes examples)? Ui-table supports ui_control - #49 by Christian-Me

1 Like

Hi,

In the documentation you find Javascript examples running in the browser. Node-RED runs on your server and communicates with the browser front end (dashboard). So you (the ui-table node for you) has to send a message from the runtime (back end) to the dashboard asking to execute a function call (command) for you.
So the command you find in the doc:

table.deleteRow(15); //delete row with an id of 15
//or
table.deleteRow([15,7, 9]); //delete rows with ids of 15, 7 and 9

will translate into

msg.payload = {
    command: "deleteRow",
    arguments: [
        15
    ],
    returnPromise: true
}

or

msg.payload = {
    command: "deleteRow",
    arguments: [
        [15, 7, 9]
    ],
    returnPromise: true
}

so either one index or an array of indexes. By default the index is a column named id. So to use deleteRow you should add this column to your data:

msg.payload = {
    command: "addRow",
    arguments: [
        {
           "id":15, 
           "Name": Rock
        },
        true
    ],
    returnPromise: true
}

with a unique index for each row. The index column don't has to be visible, don't has to be a number and you could define the index column as you wish, for example by sending msg.ui_control.tabulator.index="Name" and then the command to delete your row would look like this:

msg.payload = {
    command: "deleteRow",
    arguments: [
        "Rock"
    ],
    returnPromise: true
}

Or as @Bobo mentioned try my subfow. There you have to define an index column in the node configuration.

If something is not working as expected take a look in the browser console, not the Node-RED editor debug tab as the commands are finally executed in the browser context.

Have fun :wink:

3 Likes

Thanks a lot! It's working!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.