var Table = ReactDataComponents.Table;

​

// Generate random data

var names = [ 'Carlos', 'Juan', 'Jesus', 'Alberto', 'John' ];

var cities = [ 'Chicago', 'Tampico', 'San Francisco', 'Mexico City', 'Boston', 'New York' ];

var addresses = [ '333 West Wacker Drive', '1931 Insurgentes Sur', '1 Lombard Street', '55 Av Hidalgo'];

​

var data = [];

for (var i = 0; i < 20; i++) {

  data.push({

    id: i,

    name: names[~~(Math.random() * names.length)],

    city: cities[~~(Math.random() * cities.length)],

    address: addresses[~~(Math.random() * addresses.length)]

  });

}

​

var columns = [

  { title: 'Name', prop: 'name'  },

  { title: 'City', prop: 'city' },

  { title: 'Address', prop: 'address' }

];

​

var SelectableTable = React.createClass({

  getInitialState: function() {

    return { selected: '' };

  },

  selectRow: function(row) {

    this.setState({ selected: row.id });

  },

  buildRowOptions: function(row) {

    return {

      onClick: this.selectRow.bind(this, row),

      className: this.state.selected === row.id ? 'active' : null

    };

  },

  render: function() {

    return (

      <Table

        buildRowOptions={this.buildRowOptions}

        {...this.props}

      />

    );

  }

});

​

var mount = document.getElementById('root');

​

React.render((

    <SelectableTable

      className="table table-bordered"

      keys="id"

      dataArray={data}

      columns={columns}

      initialData={data}

    />

  ), root);