React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	selectAll: false
    }
	this.handleThClick = this.handleThClick.bind(this);
	this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

    handleThClick(event) {
        event.stopPropagation();
    
        alert('Th click');
    }
    
    handleCheckboxChange(event) {
        event.stopPropagation();
    
        alert('checkbox change');
    }
  
  render() {
    return (
      <div>
        <table className="table table-striped table-hover">
          <thead>
            <tr>
              <th className={`sortable checkboxColumn`} onClick={(event) => this.handleThClick(event)} style={{border: '1px solid #000'}}>
                <div onClick={(e
                ) => e.stopPropagation()} className="checkbox checkbox-primary pull-left">
                  <input id="dtSelectAll1" type="checkbox" className="dtSelectAll" checked={this.state.selectAll} onChange={(event) => this.handleCheckboxChange(event)} />
                  <label htmlFor="dtSelectAll1">#</label>
                </div>
              </th>
            </tr>
          </thead>
        </table>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))