Table component with selectable rows for Facebook's React
An example styled w/ Bootstrap:
This has been primarily developed for use with Browserify and as such is shared as a CommonJS module via npm.
npm install --save react-table-select
Assuming you're using JSX:
var React = ;var TableSelect = ;React;
To access the selected rows from outside of the component save the component as a ref:
<TableSelect ref="table" />// See the onChange method for more info on selectedRowsthisrefstablestateselectedRows
Optional, set the class on this component's child
table element. Use this to apply styles or anything else that you need.
An array of Objects to render as a selectable table.
Optional, use this if you'd like to specify custom fields. By default the table will create a column for every unique key it finds in the array, for example:
thispropsdata = one: 'fish' two: 'fish' red: 'fish' blue: 'fish'fields = one two red blue
Optional, a callback to work with the selectedRows when they change:
selectedRows will be an
Int, the indices of the currently selected rows (empty if no rows are selected). Some concrete examples:
[0, 1, 3]
With the indices of the selected rows the selected data can be easily found using a
.map() operation or similar.
A small example is included, to see it in action follow these steps:
git clone https://github.com/AllenSH12/react-table-select.gitcd react-table-selectnpm installgulp examplecd examples/python -m SimpleHTTPServer # or an HTTP server of your choice# visit localhost:8000 in your browser
Tests are implemented with Facebook's Jest and can be run via npm:
npm install # Only needs to be run the 1st timenpm test