CODEWITHSUNDEEP
reactjsredux
Vtron89
Vtron89

Reputation: 35

React/Redux - Manage state of table with multiple columns of checkboxes

Example Table multiple columns of checkboxes

Imagine that I have a table with multiple columns. Some columns are made up entirely of checkboxes. How would you manage the state for that table?

When I click a checkbox, I imagine that I would want to dispatch an action to update the redux state with some unique identifier for that column, and then the index of the row. For instance:

column1: [0,1,5,10] column2: [2,3,6]

If I click column2, row 1, column2 would update to:

column2: [0,2,3,6]

Where column# is the key for that column, and each number in the array is the row.

Upvotes: 0

Views: 477

Answers (2)

Soldeplata Saketos
Soldeplata Saketos

Reputation: 3461

You can organize your data also as an object: let data = [ { columnOne: true, columnTwo: false, columnThree: true, columnHundred: 42 }, { columnOne: true, columnTwo: false, columnThree: true, columnHundred: 0 }, { columnOne: false, columnTwo: false, columnThree: true, columnHundred: 42 }, ]

And then you can update data array

Upvotes: 0

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

Rows are usually used to represent instances of objects. You have turned this on it's head by using columns to represent your instances. Even if your table is static, I would not try to represent the columns, but instead represent the row:

var data = [
  [false, false, false, true],
  [false, false, true, true]
];

This translates much more cleanly for use with React:

{data.map(row => {
  return (
    <tr>
     <td><input type="checkbox" checked="{row[0] ? 'checked' : ''}"/></td>
     <td><input type="checkbox" checked="{row[1] ? 'checked' : ''}"/></td>
     <td><input type="checkbox" checked="{row[2] ? 'checked' : ''}"/></td>
     <td><input type="checkbox" checked="{row[3] ? 'checked' : ''}"/></td>
   </tr>);
})}

Upvotes: 1

Related Questions