Single row selection not working
I've been trying to implement single row selection using the v8 of the table, but I'm unable to do so. I'm using radio buttons which ideally should allow me to select a single row, but I'm able to select to multiple rows.
I've tried various solutions but none of them seem to work. Can someone please help me with it
I've tried various solutions but none of them seem to work. Can someone please help me with it
const columns = React.useMemo(
() =>
[
columnHelper.display({
size: 20,
id: 'selectId',
cell: info => (
<Radio
ref={radioRef}
// uncheck the prevoiusly selected radio button when a new one is selected by the user using ref and onChange
// checked={radioRef.current?.value === selectedStaffId}
onChange={() => {
setSelectedStaffId(info.row.original.id);
if (radioRef.current) {
radioRef.current.checked = false;
}
}}
/>
),
}),
columnHelper.accessor('name', {
size: 180,
header: 'Name',
}),
columnHelper.accessor('deactivated', {
size: 180,
header: 'Status',
cell: info => (
<Badge capitalize color={!info.getValue() ? 'green' : 'yellow'}>
{!info.getValue() ? 'Active' : 'Deactivated'}
</Badge>
),
}),const columns = React.useMemo(
() =>
[
columnHelper.display({
size: 20,
id: 'selectId',
cell: info => (
<Radio
ref={radioRef}
// uncheck the prevoiusly selected radio button when a new one is selected by the user using ref and onChange
// checked={radioRef.current?.value === selectedStaffId}
onChange={() => {
setSelectedStaffId(info.row.original.id);
if (radioRef.current) {
radioRef.current.checked = false;
}
}}
/>
),
}),
columnHelper.accessor('name', {
size: 180,
header: 'Name',
}),
columnHelper.accessor('deactivated', {
size: 180,
header: 'Status',
cell: info => (
<Badge capitalize color={!info.getValue() ? 'green' : 'yellow'}>
{!info.getValue() ? 'Active' : 'Deactivated'}
</Badge>
),
}),const table = useReactTable({
data: staffs.data?.staff || [],
columns,
pageCount: staffs.data?.pagination.totalPages,
state: { sorting },
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
manualPagination: true,
manualSorting: true,
});const table = useReactTable({
data: staffs.data?.staff || [],
columns,
pageCount: staffs.data?.pagination.totalPages,
state: { sorting },
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
manualPagination: true,
manualSorting: true,
});
