React Table - radio input for useRowSelect

Question

How can I use radio inputs instead of checkboxes for a selectable table in React Table?

There is an example for checkboxes but not radio buttons: https://github.com/tannerlinsley/react-table/blob/master/examples/row-selection/src/App.js

Changing the IndeterminateCheckox to use a radio input doesn't work as the selection state is not updated in React Table:

const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef();
    const resolvedRef = ref || defaultRef;

    useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return <input name="select-radio" type="radio" ref={resolvedRef} {...rest} />
    );
  });

It looks correct but does not pass the correct selection state back:

What happens when you select different options? Do you see any changes to the component / component state in your dev tools? Also, what's included in `...rest` -- does it include everything you expect? It seems most likely that your table implementation is fine and the bug is in your state implementation. — the holla, Apr 02 '20 at 21:29
If you take a closer look at the useRowSelect example React Table stores a 'selected' state for the row which was clicked. It assumes the use of checkboxes so it allows for multiple selections to be passed down through ...rest. I think the easiest solution to this would be to implement custom radio inputs inside a data cell rather than using useRowSelect, I just thought someone else would have run into this before. — Alex, Apr 03 '20 at 12:32

score 3 · Accepted Answer · edited Apr 04 '20 at 20:24

3

Had a quick look. Try this:

Have a state for the rowId

const [selectedRowId, setSelectedRowId] = useState(null);

Pass autoResetSelectedRows: false, to useTable function
Write a click handler for the radios by hand

onClick={() => setSelectedRowId(row.id)}

I have put together the working code here. https://codesandbox.io/s/objective-faraday-gzf7y

Notes:

There might be small issues with rapidly changing value of selectedFlatRows. I haven't fully researched this issue but I found https://github.com/tannerlinsley/react-table/issues/1740 . The issue says fixed but i am not completely sure.
If you have issue with grabbing row data, try and see if the below links might be helpful How to get React Table Row Data Onclick https://codesandbox.io/s/tannerlinsleyreact-table-row-selection-hoisted-b4dvq?from-embed Select row on click react-table

edited Apr 04 '20 at 20:24

Michael Nelles

5,426
8
41
57

answered Apr 04 '20 at 15:35

gdh

13,114
2
16
28

I am trying to exclusively select only 1 row at at time, and I see that your code only does this if including ``, can you please explain why that is? – SAKURA Aug 17 '20 at 16:25
1

React.StrictMode is not required. Although good to have. use toggleAllRowsSelected to set all rows as unchecked. In the example above, add toggleAllRowsSelected to line #92 under Cell logic and then onclick do toggleAllRowsSelected(false) before updateSelectedRowId – Mayukh Raaj Nov 20 '20 at 13:24

score 2 · Answer 2 · answered Mar 07 '21 at 15:03

Based on previous answers, the solution below is with some improvements

Change Checkbox to Radio Input

Inside IndeterminateCheckbox Component

Remove  <input type="checkbox" ref={resolvedRef} {...rest} />*/}
Add     <input type="radio" ref={resolvedRef} {...rest} />

a) Set the initial state if you want to autoselect any row initially

b) Deselect all the radio buttons

c) row.getToggleRowSelectedProps().checked give the current state of the radio button of that row. So toggling that value accordingly. i.e

if checked -> change to unchecked and

if unchecked -> change to checked

// This selectedRowIds state gives the information about which row is selected currently.
const{state: { selectedRowIds }}=useTable(
{
 ....
 initialState: {
      columns,
      data,
      selectedRowIds: { 2: true },  //a) I want my second row to be autoselected initially
   },
 },
 useRowSelect,
     hooks => {
         hooks.visibleColumns.push(columns => [
             {
                 id: "selection",                    
                 Cell: ({ row, toggleAllRowsSelected, toggleRowSelected }) => {                      
                    const currentState = row.getToggleRowSelectedProps();
                    return (
                       <IndeterminateCheckbox
                          {...currentState}
                          onClick={() => {
                            // b)
                              toggleAllRowsSelected(false);
                            // c)
                              toggleRowSelected(row.id, !currentState.checked);
                      }} />)

                    }},
                      ...columns
                    ]);
                    })

How would you disable the select all and remove the radio button from the header row? — rf guy, Sep 15 '21 at 12:58

score 0 · Answer 3 · answered Feb 03 '21 at 13:07

In case someone is still struggling with this, I found different solution.

IndeterminateCheckbox is same with slight change for input type:

const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) => {
        const defaultRef = React.useRef();
        const resolvedRef = ref || defaultRef;

        React.useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate;
        }, [resolvedRef, indeterminate]);

        return (
            <>
                {/*<input type="checkbox" ref={resolvedRef} {...rest} />*/}
                <input type="radio" ref={resolvedRef} {...rest} />
            </>
        );
    }
);

Then onClick we deselect all rows, and select "clicked" row. :)

 const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
            toggleAllRowsSelected,
            toggleRowSelected,
            state: { selectedRowIds },
        } = useTable(
            {
                columns,
                data,
            },
            useRowSelect,
            hooks => {
                hooks.visibleColumns.push(columns => [
                    // Let's make a column for selection
                    {
                        id: "selection",
                        // The cell can use the individual row's getToggleRowSelectedProps method
                        // to the render a checkbox
                        Cell: ({ row }) => {
                            return (
                                <div>
                                    <IndeterminateCheckbox
                                        {...row.getToggleRowSelectedProps()}
                                        onClick={() => {
                                            toggleAllRowsSelected(false);
                                            toggleRowSelected(row.id, true);
                                        }}
                                    />
                                </div>
                            );
                        }
                    },
                    ...columns
                ]);
            }
        );

This doesn't work, you will be able to select multiple radio buttons. — Alex, Feb 04 '21 at 14:06

React Table - radio input for useRowSelect

3 Answers3

Linked