#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.

1npm install --save react-table-select

Usage

Assuming you're using JSX:

1var React = require('react');
2var TableSelect = require('react-table-select');
3
4React.render(
5  <TableSelect
6    className="table"
7    data={data}
8    onChange={this.handleChange} />, document.body);

To access the selected rows from outside of the component save the component as a ref:

1<TableSelect ref="table" />
2
3// See the onChange method for more info on selectedRows
4this.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:

1this.props.data = [{one: 'fish'}, {two: 'fish'}, {red: 'fish'}, {blue: 'fish'}]
2fields = [one, two, red, blue]

{function} onChange

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

1callback = 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:

1git clone https://github.com/AllenSH12/react-table-select.git
2cd react-table-select
3
4npm install
5gulp example
6
7cd examples/
8python -m SimpleHTTPServer # or an HTTP server of your choice
9
10# visit localhost:8000 in your browser

##Testing Tests are implemented with Facebook's Jest and can be run via npm:

1npm install # Only needs to be run the 1st time
2npm test