I'm trying to implement a semantic ui table in react and include a column of checkboxes to select items from a row. I want to implement it to where the user can select all checkboxes by clicking the first checkbox or one item at a time and then print those values out but I'm struggling to be able to do that. Does anyone have any working examples of this by chance?
I want to edit Table row in angular material table at the same time I need an contextmenu in the same row without interrupting the edit actions
I am able to get a react bootstrap table to show with hard coded values, but I am trying to get it to show on a button click and display values based on a parameter. Also, on a button click can I update that same table?
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?
According to documentation your hands are tied. But, this might work:
Add selectedRow key to the component which uses MaterialTable
Create some method or function e.g. handleSelection and pass it to onSelectionChange prop. Argument to this func is an array which handleSelection returns
When user select some row, set selectedRow to that row object
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)
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.
I have to create a table with different type of fields like text box , drop-down , toggle button etc.
For eg below fields for 20 rows
Name - textbox
Gender - dropdown
I was thinking of creating a redux form and embed it into a table and repeat it for each rows. Also want to bind data per row.
But not sure how to progress with it. Please help and suggest any other way. Due to certain restriction I could not use available components..so I have to create my own component