Material-Table replace checkboxes with radio buttons

user_12122950 0
Viewed 2328

I'm using material-table to show some data, now I want to select one row at the time to pass the row's data to another component, so being able to select multiple rows at the time isn't what I'm looking for and the main suggestion is to go for a radio button. So is there a way to replace the checkbox on the table with radio buttons or make the selection option to only allow one row to be selected at the time?

material-table material-ui reactjs
1 Answers

According to documentation your hands are tied. But, this might work:

  1. Add selectedRow key to the component which uses MaterialTable
  2. Create some method or function e.g. handleSelection and pass it to onSelectionChange prop. Argument to this func is an array which handleSelection returns
  3. When user select some row, set selectedRow to that row object
  4. If user click on "slelect all" checkbox (top left) - show notification that action is not supported. If there is no way to unselect all checkboxes programatically - unmount and than mount MaterialTable (to reset checkboxes)
  5. If one row is already selected, than another one get selected (which makes two selected rows) - repeat step "4"

I know this is a bit complicated, but it's a best I could think of at the moment

n.b. Another thing you can do (to force users to select only one row) is to hide table on multiple selection and show message about what they can do. Message could be closable. When message get closed fresh table could appear (mount aggain).

Update

Just have found another option that might work for you. Take a look at this page at the "Simple Action Example". There you have buttons instead of checkboxes. I am starting to think that:

 options={{
   selection: true
 }}

is not the right option for you.

user_40121330
Related