Material-table: Is it possible to create an action with confirmation message? (Similar to onRowDelete)

[sabbiu]

Currently when I try to delete a row, I get a confirmation message Are you sure you want to delete.

How can I so similar confirmation dialog for my custom actions passed via actions: any[] props?

[sabbiu]

Simialr to this?

[oze4]

Hey @sabbiu does your custom action delete the row or are you looking for something else?

It would be easiest if you could create an example of what you're looking for. Please see here for demo starter templates, using either CodeSandbox or StackBlitz. This makes it easier for you to create a demo.

Thanks!

[sabbiu]

Hi @oze4 I have added an example,

CodeSandbox illustrating my use case

I want to show that confirmation if a user tries to (let us take Blog Project as an example)

• user tries to archive the post
• admin tries to block the user

Currently, I am showing a popup modal to confirm the actions placed by the user. And, I was wondering if it is possible to show that confirm message inline (in the row itself, same as during delete action is performed).

[ivan-khuda]

Any success here?

[ivan-khuda]

@sabbiu I believe this can be helpful https://material-table.com/#/docs/features/detail-panel

[sabbiu]

@ivan-khuda
Detail panel allows us to show option below the row.

I was wondering to show confirmation inline for my custom actions, which is similar to onRowDelete you can find here

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[Zeswen]

+1. Would love to have a boolean in the Action type to show confirmation.

[meirkl]

@ivan-khuda
Detail panel allows us to show option below the row.

I was wondering to show confirmation inline for my custom actions, which is similar to onRowDelete you can find here

Did you manage to find a way to solve this?

[sabbiu]

@meirkl No, I didn't. AFAIK, the library doesn't provide such API.

Instead of that, I am showing a popup modal to confirm the actions placed by the user.

[kadet1090]

Another possible solution could be adding render property into Action so we could wrap it with some kind of confirmation HoC.

[aitfriha]

You can use the "actions" property
...
actions={[
{
icon: 'edit',
tooltip: 'Edit User',
onClick: (event, rowData) => alert('You are editing ' + rowData.name)
},
{
icon: 'delete',
tooltip: 'Delete User',
onClick: (event, rowData) => confirm('You want to delete ' + rowData.name)
}
]}
/>