react-table-select

React Selectable Table

Table component with selectable rows for Facebook's React

An example styled w/ Bootstrap:

Installation

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

Usage

Assuming you're using JSX:

var React = require('react');
var TableSelect = require('react-table-select');
 
React.render(
  <TableSelect
    className="table"
    data={data}
    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
this.refs.table.state.selectedRows

Props

{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:

this.props.data = [{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.

Example

A small example is included, to see it in action follow these steps:

git clone https://github.com/AllenSH12/react-table-select.git
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 

Testing

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