React Search Result

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

by Jimmy Chandra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="pleaseWait">Please wait...</div>
<div id="container" class="container-fluid">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.progress { margin-bottom: 0 }

JavaScript 1.7

(function() {
    'use strict';
    
    var SearchResultContainer = React.createClass({
        componentWillMount: function() {
        },
        componentDidMount: function() {
        },
        render: function() {
            var searchResults = this.props.data.map(function(doc) {
                return (
                    <SearchResultItem key={doc.number} data={doc} />
                );
            });
        
            return (
                <table className="table table-condensed table-striped">
                    <thead>
                        <tr>
                            <th>Filename</th>
                            <th>Doc. Type</th>
                            <th>Doc. #</th>
                            <th>Supplier</th>
                            <th className="text-right">Doc. Date</th>
                            <th className="text-right">Total Amount</th>
                            <th className="text-right">Tax Amount</th>
                            <th className="text-right">Received On</th>
                            <th  style={{width:'50px'}}>Progress</th>
                            <th className="text-center">Status</th>
                            <th className="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {searchResults}
                    </tbody>
                </table>
            );
        }
    });

    var SearchResultItem = React.createClass({
        render: function() {
            var doc = this.props.data;
            return (
                    <tr>
                        <td>{doc.fileName}</td>
                        <td>{doc.type}</td>
                        <td>{doc.number}</td>
                        <td>{doc.supplier}</td>
                        <td className="text-right">{doc.date}</td>
                        <td className="text-right">{doc.total}</td>
                        <td...