React-table: Checkbox table

[poushy]

Problem Description

I am trying to use the react-table as a checkbox table. That is, the first column will be checkboxes, which in turn should select the row. I am able to select the checkboxes in my application, but once I sort it, the checkbox column do not get sorted. Also for some reason in the pen, the checkboxes are not coming up correctly.

I feel there might be a better way to implement this. Is there a better way to implement a Checkbox table using react-table?

Code Snippet(s) or Codepen (http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010)

https://codepen.io/poushy/pen/jwwyxQ

Steps to Reproduce

1. Bring up the table with checkboxes
2. Click on one or two row checkboxes
   3.Sort the table
3. Even though rest of the table gets sorted, the checkboxes do not get sorted. That is, if I select row1, and row3, then sort and row1 and row3 goes to the bottom, the selected checkboxes remain at the same row.
   Expected: The rows that are selected should be sorted correctly, i.e. row1 and row3 should be selected.

[aaronschwartz]

Here is an example:

https://codepen.io/aaronschwartz/pen/WOOPRw?editors=0010

[poushy]

Thank you @aaronschwartz - I will try this out!

[hijoncon]

@aaronschwartz I have the same question. In your example, I want have a checkbox in the header, if the user clicked it. All checkbox in the rows will be checked. I been working on this for a while...

[aaronschwartz]

@hijoncon See updated pen.

[hijoncon]

I'd really appreciated it! @aaronschwartz thank you!