node package manager


React Selectable Table

Table component with selectable rows for Facebook's React

An example styled w/ Bootstrap:

Selectable table screenshot


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 = require('react');
var TableSelect = require('react-table-select');
    onChange={this.handleChange} />, document.body);

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 selectedRows 


{string} className

Optional, set the class on this component's child table element. Use this to apply styles or anything else that you need.

{array} data

An array of Objects to render as a selectable table.

{array} columns

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: = [{one: 'fish'}, {two: 'fish'}, {red: 'fish'}, {blue: 'fish'}]
fields = [one, two, red, blue]

{function} onChange

Optional, a callback to work with the selectedRows when they change:

callback = function(selectedRows) {}

selectedRows will be an Array of Int, the indices of the currently selected rows (empty if no rows are selected). Some concrete examples:

  • No rows selected, selectedRows should be []
  • 1st row selected, selectedRows should be [0]
  • 1st, 2nd, & 4th rows selected, selectedRows should be [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
cd react-table-select
npm install
gulp example
cd 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 time 
npm test