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"
}}
>
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);
}
}}