I have enabled row click functionality in a Material React Table to redirect users to a details page. I also want to implement a switch component to enable or disable the user. However, when I click the switch, the row click event is also triggered. How can I prevent this from happening?
const columns = [
columnHelper.accessor('status', {
header: 'Status',
size: 50,
Cell: ({ cell }) => {
const isActive = cell.getValue()
const checked = isActive === 'ACTIVE'
return (
<Tooltip
title={isActive === 'ACTIVE' ? 'Active' : 'Inactive'}
placement="left-end"
arrow
TransitionComponent={Zoom}
>
<Switch
checked={checked}
onChange={handleStatusChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
</Tooltip>
)
},
}),
columnHelper.accessor('name', {
header: 'Name',
}),
columnHelper.accessor('code', {
header: 'Code',
}),
columnHelper.accessor('description', {
header: 'Description',
}),
columnHelper.accessor('conflictResolution.priority', {
header: 'Priority',
}),
columnHelper.accessor('createdBy', {
header: 'Created By',
}),
]
const table = useMaterialReactTable({
...defaultMRTOptions,
columns,
data: offers || [],
onPaginationChange: setPagination,
state: { pagination, isLoading },
rowCount: totalRecords,
muiTableBodyRowProps: ({ row }) => ({
onClick: () => {
navigate(`/view/${row.id}`)
},
sx: {
cursor: 'pointer',
},
}),
})