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 (5)
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
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);
}
}}Hi,
Following up with this issue, would be great if you can post it via https://github.com/keenthemes/reui/issues and we will fix it accordingly with some community suggestions.
Regards,
Sean
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
