Make table columns resizable with jQuery plugin

Question

I use DataTables and jquery-resizable-columns to create table with resizable columns. Here is example.

I tried to use jquery-resizable-columns plugin in basic ReactJS application with DataTables. I added resizableColumns function in componentDidMount, but it doesn't work.

I am in ReactJS, can anybody explain to me why it doesn't work?

jsfiddle

jsx script

/** @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();         
          }, 
        });
        $("#mytable").resizableColumns();
    },
    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 className="table-responsive">
                <h4>Hello</h4>
                <table className="table table-bordered" id="mytable">
                    <thead>
                        <tr className="success">
                            <td>col1</td>
                            <td>col2</td>
                            <td>col3</td>
                        </tr>   
                    </thead>
                    <tbody>
                        {x}
                    </tbody>
                </table>
            </div>
        )       
    }
 });

React.render(<TodoApp />, document.body);

Answer 1

The nice thing about ReactJS and the whole node ecosystem is that someone else out there has done the work and turned into a plugin/module. Here is something that will be of use to you: colresizable. The nice thing about this is that you won't have to manage where to put things for each component and it does what you want and more...

You need to add this to the end of your componentDidUpdate method...

$(function(){$("#mytable").colResizable();});

You had:

... 
componentDidMount: function(){
    var self = this;
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true,     
      "fnDrawCallback": function() {                
            self.forceUpdate();         
      }, 
    });
    $("#mytable").colResizable();
},
componentDidUpdate: function(){
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true, 
    });
},
...

You need to change to this:

...
componentDidMount: function(){
    var self = this;
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true,     
      "fnDrawCallback": function() {                
            self.forceUpdate();         
      }, 
    });
},
componentDidUpdate: function(){
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true, 
    });
    $(function(){$("#mytable").colResizable();});
},
...

I just tested it on jsfiddle link you provided and was able to resize the columns.

Answer 2

There is ColReorderWithResize plug-in that adds ability reorder and resize columns for the latest version of jQuery DataTables 1.10.

You need to include the appropriate JS file and use the following initialization code.

var table = $('#example').DataTable({
    'dom': 'Rlfrtip'
});

See this example for code and demonstration.

See jQuery DataTables: Column reordering and resizing for more details.