React.js + jQuery.Datatable

Barebones sample of a data grid in React.js using Datatable.net plugin

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  render: function() {
    return (
      <div>
        <h3>React + jQuery.DataTable</h3>
        
        <LopMonHoc />
      </div>
    );
  }
});

var LopMonHoc = React.createClass({
 	getInitialState: function(){
 		return {data: []}
 	},
 	componentDidMount: function(){
 		var self = this;
 		$('#mytable').dataTable({
		  "bAutoWidth": false,
		  "bDestroy": true,		
		  "fnDrawCallback": function() {		  		
            	self.forceUpdate();        	
          }, 
		});
 	},
 	componentDidUpdate: function(){
 		$('#mytable').dataTable({
		  "bAutoWidth": false,
		  "bDestroy": true,	
		});
 	},
 	render: function(){
 		var x = [];
        
        x.push(
            <tr><td>zaxs</td><td>hello</td><td>xzc</td></tr>
        )
        
        x.push(
            <tr><td>hello</td><td>wef</td><td>qw</td></tr>
        )
        
        x.push(
            <tr><td>wefwe</td><td>fgn</td><td>asc</td></tr>
        )
        
		return (
			<div class="table-responsive">
				<h4>Hello</h4>
				<table class="table table-bordered" id="mytable">
					<thead>
						<tr class="success">
							<td>col1</td>
							<td>col2</td>
							<td>col3</td>
						</tr>	
					</thead>
					<tbody>
						{x}
					</tbody>
				</table>
			</div>
		) 		
 	}
 });
 
React.renderComponent(<TodoApp />, document.body);