Single selection grid - reactjs

Question

Hello I am trying to add selection logic to my material ui grid(table).
This is what I return,
return (
<Paper sx={{ width: "100%", overflow: "hidden" }}>
<Table style={{ width: "100%" }}>
<CatalogRightGridHeader selected={selected} />
<TableBody xs={12} style={{ width: "100%" }}>
{value.map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.nodeId}>
<TableCell style={{ width: "10px!important", padding: 2 }}>
<Checkbox/>
</TableCell>
{row.rowItems
.sort(
(row1, row2) => row1.column.sequence - row2.column.sequence
)
.map((column) => {
return column.column.dataType === "DATE" ? (
<TableCell
key={column.id}
align={column.align}
>
{format(
new Date(parseInt(column.value)),
dateFormat(),
new Date()
)}
</TableCell>
) : (
<TableCell
key={column.id}
align={column.align}
>
{column.value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
I want to have a logic on checkbox so whenever I check them I want to get checked row data and it should uncheck whenever I check another checkbox. I would appreciate if u could give me some tips how to do it or help me doing it.

Answer 1

You should take a look at MUI's DataGrid which comes with the checkbox selections.
Also, it sounds like you want these to act like radio buttons, which, the UX difference is that checkboxes are like multiple selects, whereas radio buttons infer that only one can be selected.
If you want to stay with a vanilla table, then adding in the checkbox like that is fine, from there, when you map, add in an index. The checkboxes need to be controlled
const [checked, setChecked] = React.useState(null)
const handleCheckChange = (event, index) => {
// If checkbox is changed to checked, set the index
if (event.target.checked) {
setChecked(index)
}
// Since on change is fired every time the state changes, it'll fire when it
// gets unchecked by checking something else, so only set back to null when
// it's unchecked while being the actively checked row
else if (!event.target.checked && index === checked) {
setChecked(null)
}
}
value.map((row, index) => {
return (
<TableRow hover role='checkbox' tabIndex={-1} key={row.nodeId}>
<TableCell style={{ width; '10px!important', padding: 2 }}>
<Checkbox
checked={checked === index}
onChange={(event) => handleCheckChange(event, index)}
/>
</TableCell>
...
)
}
From here, you now know the row that is checked and can pull that data as
rowData[checked]