React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Andrew Maxwell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container"></div>

CSS

.dataTable .selected {
  background-color: #DEF !important
}

.dataTable th {
  position: relative
}

.dataTable .columnInfo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  width: 300px;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
  z-index: 10
}


/* .hidden {display: none} */

Babel + JSX

// console.clear();

var fixCasing = str => str.trim().toLowerCase().split(/ |_/).map(w => w[0].toUpperCase() + w.slice(1)).join(' ');

class DataTable extends React.Component {
	constructor(props){
  	super(props);
    this.state = {rows: [], columns: []};
  }
  componentDidMount(){
  	fetch(this.props.url)
    	.then(r => r.json())
      .then(rows => {
      	this.setState({
        	rows: rows.slice(0, 2), 
          columns: Object.keys(rows[0]).filter(c => c != 'id' && c[0] != '$').map(c => ({name: c}))
        });
      })
      .catch(err => console.error(err));
  }
  setSelectAll(val){
  	var rows = this.state.rows;
    rows.forEach(row => row.$selected = val);
    this.setState({rows: rows});
  }
  setSelect(row, val){
  	row.$selected = val;
    this.setState({rows: this.state.rows});
  }
  toggleColumnInfo(col){
  	col.showColumnInfo = !col.showColumnInfo;
    this.setState({rows: this.state.rows});
  }
  render(){
	    
    var headers = this.state.columns.map(c => {
    	var columnInfo = '';
      
      if (c.showColumnInfo){
      	columnInfo = <div className="columnInfo">
          <strong>{c.name}</strong>
        </div>;
      }
      
      return <th key={c.name} onClick={() => this.toggleColumnInfo(c)}>
        {fixCasing(c.name)}
        {columnInfo}
       </th>;
    });
    
    var rows = this.state.rows.map(row => {
      var cells = this.state.columns.map(col => <td key={col.name}>{row[col.name]}</td>);

      return (
        <tr key={row.id} className={row.$selected ? 'selected' : ''}>
          <td>
            <input type="checkbox" checked={row.$selected} onChange={e => this.setSelect(row, e.target.checked)}/>
          </td>
          {cells}
        </tr>
     	);
    });
    
    return <table className="table table-striped dataTable">
    	<thead>
      	<tr>
          <th>
            <input type="checkbox" 
              checked={this.state.rows.every(r => r.$selected)} 
              onChange={e =>...