making datagrid row clickable with action menus , dropdown toolbar and checkboxes
Hello ,
Does the reusable datagrid tables support clickable rows with above enables i tries onRowClick but was not getting a stable behavior, it always caused the row to be clicked even when clicking checkboxes or buttons etc.
I am using react metronic 9.2 version.
i even tried this code below but even that didnt worked, please guide cause i didnt saw anything in reui docs too related to this.
<DataGrid
table={table}
recordCount={table.getFilteredRowModel().rows.length}
tableLayout={{
headerSticky: true,
headerBackground: true,
rowBorder: true,
stripped: true,
columnsVisibility: true,
cellBorder: true,
}}
onRowClick={(row: any) => {
const target = document.activeElement as HTMLElement; --> this always returned body element
if (!target.closest('td:first-child') || !target.closest('td:last-child')) {
onEditContent(row);
console.log(target);
}
}}
tableClassNames={{
bodyRow: "cursor-pointer"
}}
>
Replies (3)
Hi,
Thank you for your feedback on this. We will check and fix this issue asap.
Could you please confirm are you using latest Metronic 9.2.x React with reui.io/docs/data-grid Data Grid component ?
Regards,
Sean
hello, i am using 9.2.0 version from theme forest.
just made an update with 9.2.1 and issue in it persists. The only workaround i found was to bind cells with clicks but its not real row click.
the expected behavior:
row click must ignore checkboxes and dropdown action menus, button actions etc
current behavior:
- row click works on everything and everywhere regardless
possible workaround:
either solve behavior like above or maybe if you generate a row id, cell id or include target with row data users will be able to override bypass by writing functions like this
onRowClick={(row: any) => {
const target = document.activeElement as HTMLElement; --> this always returned body element
if (!target.closest("td:first-child") || !target.closest("td:last-child")) {
onEditContent(row);
console.log(target);
}
}}
