Tabulator: Question: How to make a deleteRow button/link on each row?

[answerquest]

Hi, this is a question for the Tabulator community, but you also might like this as a feature request.
We have a provision for making a column that doesn't carry any data but is just for holding a rowHandle, for moving rows.

columns: [
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30 },
...

I want to explore how to similarly make a column that has a trash can icon or link or button for deleting that particular row. To start with, can someone guide on how to provision a column but make it not hold any field from the JSON data? Would Mutators be a good place to start?

[olifolkerd]

Hey @answerquest

You can create columns without any data, just don't include the field property in the column definition. you can then use a formatter to put whatever you like in the column. The Formatting Documentation actually includes an example of how to do this.

There is also a formatter already included for this, the buttonCross formatter.

Here is an example column definition for you:

//column definition in the columns array
{formatter:"buttonCross", width:40, align:"center", cellClick:function(e, cell){
    cell.getRow().delete();
}},

Let me know if that helps.

Cheers

Oli :)

[answerquest]

Worked like a charm! Thanks!

[faralawi]

how to make it once we click & before got deleted, it will pop up alert window are you sure want to delete?

[answerquest]

@faralawi

{formatter:"buttonCross", align:"center", title:"del", headerSort:false, cellClick:function(e, cell){
    if(confirm('Are you sure you want to delete this entry?'))
        cell.getRow().delete();
    }
}

[faralawi]

Ok I got it. But if I want to directly delete from the database, where should I call back the function? Like this https://github.com/olifolkerd/tabulator/issues/1417#issuecomment-422719535

[answerquest]

@faralawi you'd have to call whatever your function is to update your db (which is not in tabulator's scope), above or below the ..delete() line in my code example.

As seen in the code you linked, it will be a custom function that you make and it depends on your specific DB configuration.

You can get a json variable of your row by: rowJson = cell.getRow().getData();.
From that you can get the row's key value etc which you can use in your db query.

Lot of folks _don't_ want to instantly delete the row from DB too. In my use case where I edit the table : add, delete, change, re-order rows : at frontend itself, and only at the last I click a Save button to send the whole table in json to my backend which stores it in DB.

[myeh98]

This solution works great except for one slight issue. After I edit a row and attempt to delete it, I get the error "Unhandled Rejection (TypeError): Cannot set property 'invalid' of undefined"

Any help would be fantastic! thank you

[olifolkerd]

Upgrade to version 4.7.1, there was a bug in 4.7.0

On Sat, 27 Jun 2020, 22:28 myeh98, [e-mail] wrote:

This solution works great except for one slight issue. After I edit a row
and attempt to delete it, I get the error "Unhandled Rejection (TypeError):
Cannot set property 'invalid' of undefined"

Any help would be fantastic! thank you

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/942#issuecomment-650631757,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABUGBTD5OHEN73SNTD7AZPTRYZQALANCNFSM4ETNGSVA
.

[myeh98]

Worked perfectly! Thank you for the quick response!

However, I'm not sure if you are the owner or work directly with the maintainers of "react-tabulator"
I think the bug might still be present in: "react-tabulator": "^0.13.0" though.
For my tabulator implemented in react, it has the desired functionality but displays the same error.

[olifolkerd]

It will be. Version 4.7.1 was only released 4 hours ago.

The react wrapper is maintained outside of the core library. I suggest you
raise an issue/or on their repo to get the update pulled in

On Sat, 27 Jun 2020, 22:39 myeh98, [e-mail] wrote:

Worked perfectly! Thank you for the quick response!

However, I think the bug might still be present in: "react-tabulator":
"^0.13.0" though.
For my tabulator implemented in react, it has the desired functionality
but displays the same error.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/942#issuecomment-650633843,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABUGBTB3Y5KJER2M5WXCBVTRYZRJ3ANCNFSM4ETNGSVA
.