Skip to content
React table component with selectable rows.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
media
src add thead element around table-head component Feb 8, 2015
.gitignore make example / development setup Dec 20, 2014
.npmignore add .npmignore Dec 21, 2014
README.md bugfixes, bump version for publishing Jan 28, 2015
gulpfile.js
index.js
package.json bump package.json to publish thead fix Feb 8, 2015
preprocessor.js

README.md

#React Selectable Table

Table component with selectable rows for Facebook's React

An example styled w/ Bootstrap:

Selectable table screenshot

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
You can’t perform that action at this time.