JSFiddle - React, Tailwind, and code Playground

by carlosrocha

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/carlosrocha/react-data-components/v1.0.0/css/table-twbs.css">
<!doctype html>
<div id="root"></div>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://npmcdn.com/react-data-components@1.0.1/dist/react-data-components.min.js"></script>

CSS

.active {
  background: #eee;
}

Babel + JSX

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}
      />
    );
  }
});

ReactDOM.render((
    <SelectableTable
      className="table table-bordered"
      keys="id"
      dataArray={data}
      columns={columns}
      initialData={data}
    />
  ), document.getElementById('root'));