ReactJS 可过滤、可排序的表格

Question

In my component's state there is a 'contributors' array. Each element of this array is an object with some properties. I want to display them in a table. And I want to have an ability to sort and filter it. So Eg:

 <table> <tr> <th>Name</th> <th>Contributions</th> <th>Followers</th> <th>Repos</th> <th>Gists</th> </tr> <tr> <td>Peter</td> <td>3000</td> <td>12</td> <td>30</td> <td>30</td> </tr> <tr> <td>George</td> <td>200</td> <td>0</td> <td>1</td> <td>1</td> </tr> <tr> <td>Stephanie</td> <td>333</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>Caroline</td> <td>333</td> <td>2</td> <td>100</td> <td>100</td> </tr> <tr> <td>Paul</td> <td>5</td> <td>5</td> <td>3</td> <td>3</td> </tr> <tr> <td>Adam</td> <td>9001</td> <td>33333</td> <td>22</td> <td>22</td> </tr> </table>

The date is taken from the state which is taken from the API response. I would like to have the ability to sort it alphabetically (az, za), and by each of the numbers (contributions, followers, repos, gists - biggest to smallest, smallest to biggest). And filter it by amount. I was looking for a library that does this for me but to no avail. How can I implement that?

Answer 1

Take a look at react-data-grid

Examples :

• Sort: http://adazzle.github.io/react-data-grid/examples.html#/sortable-cols
• Filters: http://adazzle.github.io/react-data-grid/examples.html#/filterable-grid