react admin datagrid exempt column from being forward to another view - datagrid

Question

I used react admin's data grid to show my data from api and put functionField with Delete mui on it. I would like to exempt one column like to toggle DeleteButton to render modal but in datagrid I always forwarded to another view, here's my sample component
<List
actions={<ListActions />}
bulkActionButtons={false}
{...props}
sort={{
field: 'name',
order: 'DESC'
}}
empty={true}
>
<Datagrid rowClick="edit" >
<TextField label="Account No." source="account_number" emptyText="-" />
<TextField label="Account ID" source="accountId" emptyText="-" />
<TextField label="Balance" source="balance" emptyText="-" />
<FunctionField label="Action" render={ (rec: any) => <Delete onClick={() => handleDelete(rec)} /> } />
</Datagrid>
</List>
but each time I click the delete button it redirect to edit view thanks

Answer 1

Because you specified <Datagrid rowClick="edit">, any click on a row redirects the user to the corresponding edit view. If that's not what you want, you have two options:
remove the rowClick="edit" bit, and add an <EditButton> on every row instead.
in your click event handler, cancel event propagation to avoid that it's handled by DatagridRow after you handle it.
<Delete onClick={(event) => {
handleDelete(rec);
event.stopPropagation();
}} />