BootstrapTable.js

/*
 Sick Yoon ([email protected]) (c) 2016
 Table Component for React
*/

const React = require('react');

const rowData = [
    {
        id: {type: 'text', data: '1243556'},
        name: {type: 'text', data: 'test_group'},
        req_interval: {type: 'text', data: '4'},
        port_scan: {type: 'text', data: '22, 433'},
        proxy_enabled: {type: 'bool', data: 'true'},
    }
];

const TableHeader = React.createClass({
    render: function() {
        var headerCols = this.props.onParse(this.props.data);
        return (
            <thead>
                {headerCols}
            </thead>
        );
    }
});

const TableBody = React.createClass({
    render: function() {
        var tableRows = this.props.onParse(this.props.data);
        return (
            <tbody>
                {tableRows}
            </tbody>
        );
    }
});

const ManageTable = React.createClass({

    getInitialState: function() {
        return {data: []};
    },
    componentDidMount: function() {
        // now has access to data like this.props.groups
        // now has access to action like this.props.updateGroups
        $.ajax({
            type: 'get',
            url: this.props.url,
            contentType: "application/json",
            dataType: 'json',
            cache: false,
            success: function(data) {
                // manipulate data to include selected field
                var groups = data['data']
                for (var key in groups) {
                    groups[key]['selected'] = false;
                }
                this.props.updateGroups(groups);
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    parseHeaders: function(data) {
        if (data.length > 0) {
            var ths = Object.keys(data[0]).map(function(headerItem) {
                return (
                    <th>{headerItem}</th>
                );
            });
            return (
                <tr>
                    {ths}
                </tr>
            );
        }
        return null;
    },
    parseRows: function(data) {
        return data.map(function(rowItem) {
            var tableCols = Object.values(rowItem).map(function(colItem) {
                return (
                    <td>
                        {colItem.data}
                    </td>
                )
            });
            return (
                <tr key={rowItem.id}>
                    {tableCols}
                </tr>
            );
        });
    },
    render: function() {
        return (
            <table className="table table-striped table-bordered table-hover">
                <TableHeader data={this.props.groups} onParse={this.props.parseHeaders || this.parseHeaders} />
                <TableBody data={this.props.groups} onParse={this.props.parseRows || this.parseRows} />
            </table>
        );
    }
});

module.exports = ManageTable;