title: Make table columns resizable with jQuery plugin
body: <p>I use DataTables and <a href="https://github.com/dobtco/jquery-resizable-columns" rel="nofollow">jquery-resizable-columns</a> to create table with resizable columns. Here is <a href="http://jsfiddle.net/1ymqr2ns/10/" rel="nofollow">example</a>.</p>
  
  <p>I tried to use jquery-resizable-columns plugin in basic ReactJS application with DataTables. I added <em>resizableColumns</em> function in <em>componentDidMount</em>, but it doesn't work. </p>
  
  <p>I am in ReactJS, can anybody explain to me why it doesn't work?</p>
  
  <p><a href="https://jsfiddle.net/69z2wepo/14044/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>jsx script</strong></p>
  
  <pre><code>/** @jsx React.DOM */
  
  var TodoApp = React.createClass({
    getInitialState: function() {
      return {items: [], text: ''};
    },
    render: function() {
      return (
        &lt;div&gt;
          &lt;h3&gt;React + jQuery.DataTable&lt;/h3&gt;
  
          &lt;LopMonHoc /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var LopMonHoc = React.createClass({
      getInitialState: function(){
          return {data: []}
      },
      componentDidMount: function(){
          var self = this;
          $('#mytable').DataTable({
            "bAutoWidth": false,
            "bDestroy": true,     
            "fnDrawCallback": function() {                
                  self.forceUpdate();         
            }, 
          });
          $("#mytable").resizableColumns();
      },
      componentDidUpdate: function(){
          $('#mytable').DataTable({
            "bAutoWidth": false,
            "bDestroy": true, 
          });
      },
      render: function(){
          var x = [];
  
          x.push(
              &lt;tr&gt;&lt;td&gt;zaxs&lt;/td&gt;&lt;td&gt;hello&lt;/td&gt;&lt;td&gt;xzc&lt;/td&gt;&lt;/tr&gt;
          )
  
          x.push(
              &lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;td&gt;wef&lt;/td&gt;&lt;td&gt;qw&lt;/td&gt;&lt;/tr&gt;
          )
  
          x.push(
              &lt;tr&gt;&lt;td&gt;wefwe&lt;/td&gt;&lt;td&gt;fgn&lt;/td&gt;&lt;td&gt;asc&lt;/td&gt;&lt;/tr&gt;
          )
  
          return (
              &lt;div className="table-responsive"&gt;
                  &lt;h4&gt;Hello&lt;/h4&gt;
                  &lt;table className="table table-bordered" id="mytable"&gt;
                      &lt;thead&gt;
                          &lt;tr className="success"&gt;
                              &lt;td&gt;col1&lt;/td&gt;
                              &lt;td&gt;col2&lt;/td&gt;
                              &lt;td&gt;col3&lt;/td&gt;
                          &lt;/tr&gt;   
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {x}
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          )       
      }
   });
  
  React.render(&lt;TodoApp /&gt;, document.body);
  </code></pre>