React with Bootstrap Table

React with Bootstrap Table

by Andrea Valenzano

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="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var array = [
	{
  	date: "22/06/2017",
    data: [
    	{
      	id: 1,
        name: "Name1",
        solve: "Decision1"
      },
    	{
      	id: 2,
        name: "Name2",
        solve: "Decision2"
      }
    ]
  },
	{
  	date: "21/06/2017",
    data: [
    	{
      	id: 3,
        name: "Name3",
        solve: "Decision3"
      },
    	{
      	id: 4,
        name: "Name4",
        solve: "Decision4"
      }
    ]
  }
];

var MyRow = React.createClass({
    render: function () {
        return (
        			<div>
                <tr>
                  <td rowSpan="2">{this.props.item.date}</td>
                  <td>{this.props.item.data[0].id}</td>
                  <td>{this.props.item.data[0].name}</td>
                  <td>{this.props.item.data[0].solve}</td>
                </tr>
                <tr>
                  <td>{this.props.item.data[1].id}</td>
                  <td>{this.props.item.data[1].name}</td>
                  <td>{this.props.item.data[1].solve}</td>
                </tr>
							</div>
        );
    }
});

var MyTable = React.createClass({
    componentDidMount: function () {
        $(React.findDOMNode(this)).bootstrapTable();
    },
    componentWillUnmount: function () {
        $(React.findDOMNode(this)).bootstrapTable('destroy');
    },
    render: function () {
        return (
            <table>
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Analysed  ID</th>
                  <th>Analysed Name</th>
                  <th>Solve To change</th>
                </tr>
              </thead>
              <tbody>
              	{ this.props.data.map((item)=>{return <MyRow item={item}/>}) }              	
              </tbody>

            </table>
        );
    }
});

React.render(<MyTable data={array}/>, document.getElementById('container'));