1

I'm using the JQuery plugin colResizable (@alvaro-prieto) to create re-sizable tables in my application and have two individual table objects (same column count). However, I am looking for a way to resize the two tables at the same time (e.g. Updating Table 1's columns also updates Table 2's columns synchronously). See the following JSFiddle for an interactive implementation of the plugin.

$("#sample").colResizable({liveDrag:true});

$("#sample2").colResizable({
    liveDrag:true,
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging" });

I've noticed you can specify a callback function such as onDrag that consistently fires when 'dragging' a column. While this helps me get closer to a solution, I am still unaware of a concrete method to synchronize the tables' updates.

I am looking to avoid modifying the source if possible and find a suitable JS/JQ solution.

Community
  • 1
  • 1
Algorithm
  • 199
  • 1
  • 8

1 Answers1

2

Unfortunatelly the plugin doesn't seem to have a way to resize the column programatically. Now, you can use the onDrag event to simulate a resize in the other table's columns.

So far I've been able to do so, but this "hacky" way doesn't seem to work that well.

Here is the function that I call every time a column is dragged:

function syncTableWidth(e){
    var parent = e.currentTarget;

    $("table").filter(function(){return $(this).attr("id") != $(parent).attr("id")}).each(function(){
        //Match the width
        $("tr th", this).each(function(index){
            $(this).css("width",$("tr th:nth-of-type("+(index+1)+")", parent).css("width"))
        });
        //Match the grip's position
        $(this).prev().find(".JCLRgrip").each(function(index){
            $(this).css("left",$(parent).prev().find(".JCLRgrip:nth-of-type("+(index+1)+")").css("left"));
       });
    }); 
}

Now you can call this function like this:

$("#my_table").colResizable({
    liveDrag:true,
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging",
    onDrag: syncTableWidth
});

Here is the JSFiddle I was working on. Hopefully it wil lhelp you or someone else keep improving it.

Alvaro Flaño Larrondo
  • 5,516
  • 2
  • 27
  • 46
  • Ah, yes the functionality is exactly what I am looking for! It is indeed "hacky" but the need for this to be modular is not necessary, so possibly with a little tweaking this will be perfect for my use cases. – Algorithm Aug 17 '15 at 21:27
  • So far it has a problem. Try alternating dragging on one table an then in another, you will see what I mean. It kinds of "jump" to the previous position. It works well if you use only one table to control the other ones. – Alvaro Flaño Larrondo Aug 17 '15 at 21:30
  • Hmm, I see what you mean. In my revision, I will have explicitly defined elements. Maybe the disambiguation will correct this. – Algorithm Aug 18 '15 at 00:00