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

Question

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.

welcome to stack overflow! do you have a specific question? this is kind of vague. — azium
– azium, Commented Oct 27, 2017 at 15:45
And it's not related to react or redux... it's just a question of how to organize data — Soldeplata Saketos
– Soldeplata Saketos, Commented Aug 24, 2018 at 7:21

Pop-A-Stash · Accepted Answer · 2017-10-27 15:49:57Z

1

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>);
})}

answered Oct 27, 2017 at 15:49

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Soldeplata Saketos · Accepted Answer · 2018-08-24 07:26:06Z

0

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

answered Aug 24, 2018 at 7:26

Soldeplata Saketos

3,4811 gold badge27 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related