JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var MyTable = React.createClass({
    getInitialState: function() {
        return {
            checked: {},
            records: this.props.records
        };
    },
    
    getRecordById: React.autoBind(function(id) {
        return this.state.records.filter(function(record) {
            return record.id == id;
        })[0];
    }),
    
    onDelete: React.autoBind(function() {
        var deletedNames = Object.keys(this.state.checked)
            .map(function(id) { return this.getRecordById(id).name }.bind(this))
            .join(', ');
            
        if (confirm('Are you sure you want to delete ' + deletedNames)) {
            // Send a message to the server saying that record.id has been deleted
            this.setState({
                records: this.state.records
                    .filter(function(record) {
                        return !this.state.checked[record.id];
                    }.bind(this)),
                checked: {}
            });
        }
    }),
    
    onCheckboxClick: function(record) {
        if (record.id in this.state.checked) {
            delete this.state.checked[record.id];
        } else {
            this.state.checked[record.id] = true;
        }
        this.forceUpdate();
    },

    render: function() {
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <td>Name</td>
                            <td>Job</td>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.records.map(function(record) {
                            return (
                                <tr>
                                    <td><input type="checkbox" checked={this.state.checked[record.id]} onClick={this.onCheckboxClick.bind(this, record)} /></td>
                                    <td>{record.name}</td>                    
                         ...