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>
),
}),