T
TanStack•3y ago
correct-apricot

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 
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,
  });
1 Reply
graceful-beige
graceful-beige•3y ago
You Should try to use check box with this, if you're trying to select multiple rows one at a time. This is the checkbox code for the header: <Checkbox checked={table.getIsAllPageRowsSelected()} onCheckedChange={(value: unknown) => table.toggleAllPageRowsSelected(!!value) } aria-label="Select all" className="translate-y-[2px]" /> This is the checkbox code for the cells in each row: <Checkbox checked={row.getIsSelected()} onCheckedChange={(value: unknown) => row.toggleSelected(!!value) } aria-label="Select row" className="translate-y-[2px]" />

Did you find this page helpful?