alvaro-prieto / colresizable Goto Github PK

Dear authors,

I got a problem in colResizeable (ver 1.5). I cannot assign a custom cursor when I try to change the type of hover cursor. It always use default cursor, i.e., e-resize.
I go back to the previous version (ver 1.4), and custom cursor change successfully with the same code.

• Simple test code with ver 1.5 (not work)
  • http://jsfiddle.net/syxav9xz/
• Simple test code with ver 1.4 (work)
  • https://jsfiddle.net/3z0swzes/

Thank you for providing this handy plugin.

Updated:
I thinks this might be a cross browser issue. Change of hoverCursor (colResizable 1.5) works fine in Windows 8 (Chrome 45 and Firefox 41)
The fail case is during MAC OS X + (Chrome 45 and Firefox 41) + colResizable 1.5. Sorry for providing insufficient information before.

Hello,

I see that you are removing left and right paddings on td by doing this.

JColResizer td, .JColResizer th {
  overflow: hidden;
  padding-left: 0!important; 
  padding-right: 0!important; 
}

Is it possible for you to make this optional?
It masses up look and feel on my UI.

Hi!
It would be nice to see this jQuery plugin available on the npm registry.
@alvaro-prieto, do you still have time for maintaining it? should I publish a fork?

is there an option or fix to make sure the plugin honors the default widths of columns?

In the script no need to set the padding to zero .

To enable change

.JColResizer td, .JColResizer th{overflow:hidden;padding-left:0!important; padding-right:0!important;} 

to

.JColResizer td, .JColResizer th{overflow:hidden;} 

FIX comment points to the actual changes to the script
Change createGrips and syncCols as folows

 var createGrips = function (t) {
        var th = t.find(">thead>tr>th,>thead>tr>td"); //if table headers are specified in its semantically correct tag, are obtained
        if (!th.length) th = t.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");  //but headers can also be included in different ways
        th = th.filter(":visible");                 //filter invisible columns
        t.cg = t.find("col");                       //a table can also contain a colgroup with col elements     
        t.ln = th.length;                       //table length is stored    
        if (t.p && S && S[t.id]) memento(t, th);    //if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
        th.each(function (i) {                      //iterate through the table column headers          
            var c = $(this);                        //jquery wrap for the current column            
            var g = $(t.gc.append('<div class="JCLRgrip"></div>')[0].lastChild); //add the visual node to be used as grip
            g.append(t.opt.gripInnerHtml).append('<div class="' + SIGNATURE + '"></div>');
            if (i == t.ln - 1) {
                g.addClass("JCLRLastGrip");
                if (t.f) g.html("");
            }
            g.bind('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging 

            g.t = t; g.i = i; g.c = c; c.w = c.width();     //some values are stored in the grip's node data

            //FIX
            c.mw = c.innerWidth() - c.width();  //don't go below total added padding width otherwise skewed results
            //FIX

            t.g.push(g); t.c.push(c);                   //the current grip and column are added to its table object
            c.width(c.w).removeAttr("width");           //the width of the column is converted into pixel-based measurements
            g.data(SIGNATURE, { i: i, t: t.attr(ID), last: i == t.ln - 1 });  //grip index and its table name are stored in the HTML                                                
        });
        t.cg.removeAttr("width"); //remove the width attribute from elements in the colgroup 
        syncGrips(t);               //the grips are positioned according to the current table layout            
        //there is a small problem, some cells in the table could contain dimension values interfering with the 
        //width value set by this plugin. Those values are removed
        t.find('td, th').not(th).not('table th, table td').each(function () {
            $(this).removeAttr('width'); //the width attribute is removed from all table cells which are not nested in other tables and dont belong to the header
        });
        if (!t.f) {
            t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
        }
    };

var syncCols = function (t, i, isOver) {
        var inc = drag.x - drag.l, c = t.c[i], c2 = t.c[i + 1];

        var w = c.w + inc; var w2 = c2.w - inc; //their new width is obtained           

        //FIX       
        if (w < c.mw) {
            // don't go below total padding width
            w2 -= c.mw - w;
            w += c.mw - w;
        }
        if (w2 < c2.mw) {
            // don't go below total padding width
            w -= c2.mw - w2;
            w2 += c2.mw - w2;
        }
        //FIX       

        c.width(w + PX);
        t.cg.eq(i).width(w + PX);
        if (t.f) { //if fixed mode
            c2.width(w2 + PX);
            t.cg.eq(i + 1).width(w2 + PX);
        }
        if (isOver) {
            c.w = w;
            c2.w = t.f ? w2 : c2.w;
        }
    };

Regards

I'd like an option for resizing the entire tabel if it's not defined.
So while changing one colume the others should stay the same size but the entire table will be resized.
thanks for this great plugin. j

How can I update the column widths when this was not triggered by click/dragging ?

eg; i have a select list with several options and want to update/trigger the table to update upon selection change.

I am facing problem with working with directive.

AngularJS directive not working when switching Bootstrap tabs or if I will go back and again if I will try.

My Directive Code:

define([
  'angular',
  'app',
  'lodash',
  'jquery',
  'colResizeable'
],
function(angular, app, _, $) {
  'use strict';

  angular
    .module('grafana.directives')
    // .module('grafana.controllers')
    .directive('columnResizeable', function() {
      return {
        restrict: 'A',
        link: function(scope, elem) {
          setTimeout(function() {
            elem.colResizable({
              liveDrag: true,
              gripInnerHtml: "<div class='grip'></div>",
              draggingClass: "dragging",
              onDrag: function() {
                //trigger a resize event, so paren-witdh directive will be updated
                $(window).trigger('resize');
              }
            });
          });
        }
      };
    });
});

My Html Code :

    <table id="common_query_editor" class="table table-bordered table-hover" ng-if="!panel.procesChart" column-resizeable>

   // Some code it there
    </table>

I was checking this link : http://stackoverflow.com/questions/33414355/why-does-this-width-watching-angularjs-directive-not-work-upon-switching-bootstr
but not able to find any solution.
How I can watch if that directive is loading.. I put the console inside directive but its not triggering the console. scope.$watch

Please help me..

http://stackoverflow.com/questions/35266867/angularjs-directive-not-working-when-switching-bootstrap-tabs-or-if-i-will-go-ba

Hi,

When I create a table and put a border-width major 1:

td {
border: 11px solid rgb(128, 128, 128);
}

When I move the cells, right or left, the min-width is not respect.

Thanks.

I use this plugin on nested tables.

if I use {fixed: true}, As soon as plugin is attached to the table, initial width of columns is changed.
if I use {fixed: false}, plugin doesn't change initial widths, but instead it simply doesn't work.

Is there any way to keep widths?

this is the structure of HTML page, if it helps:

thanks

Just tried to use this on a table like this:

<table width="100%" id="testTable1"  >
    <thead>
        <tr>
            <th > header </th>
            <th > header </th>
        </tr>
        <tr>
            <th> header </th>
            <th> header </th>
        </tr>
    </thead>
    <tbody>
        <tr> <td> cell </td> <td> cell </td> </tr>                          
        <tr> <td> cell </td> <td> cell </td> </tr>                          
</tbody>

and it wont resize any of the columns, I've tired manually setting/ not settings the widths, etc..

As soon as i remove that second row from thead into tbody, it works fine.

I've tried this on google chrome, and IE 10 so I dont think its a browser bug.

Any ideas?

Cheers.

I have a table inside of another table. I would like to use the plugin on the nested table but can't seem to get it to work.
There is a button to hide and show the nested table. I would like to just do something like this:
$("#nested-table").colResizable({liveDrag:true});

However I think something about the table being hidden is preventing the plugin from working for me.

update: I have been reading and seems I need to disable the plugin and re-init after the table is shown. I am attempting this but still can't get it to work. Here is my jquery after the button to show is clicked.

$(".drop-down-button").click(function () {
    $("#table").colResizable({disable:true}); 
    $(this).find("img").toggle();
    $(this).parent().parent().next().next().toggle();
    $("#table").colResizable({liveDrag:true});  
    $("#nested-table").colResizable({liveDrag:true});
});

bower col-resizable#*     invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes
bower col-resizable#*     invalid-meta The "main" field cannot contain minified files

I also recommend the following changes:

• Use .bower.json or bower.json, not both
• Specify an exact version of your jQuery dependency, don't use ^1.0.0 to let Bower resolve the best one for you. Or, at the very least, use ^1.4 because that's the earliest tag they have on GitHub

Tested only in iPad 3 @ Chrome. The slider grips can't be moved with touch. Anyone have a simple solution for this?

It would be very nice, if localStorage support could be added.

In my own local clone, i have replaced sessionStorage with localStorage, so i think it is easy to implement in main plugin and would give nice persistent table layout for table users.

Why? : Because users would not like to resize table columns each time when they open the same table, if they use that website/table very often.

Thanks for this nice plugin.

Hi,
if you click once on a resize line and then you drag to resize another column line, the resize of all columns messes up.
Tried both on Firefox and Chrome, same buggy behaviour.
Here's an example from http://www.bacubacu.com/colresizable/

Thanks for your support

If I delete a col from the table I want to re-initialize or recalculate all the handlers or resizers associated to that table, how can I achieve this?

bower.json declares a dependency on JQuery ^1.9.0, which means it declares itself to be incompatible with JQuery 2.x.

Here's an example error it can cause with Bower:

Unable to find a suitable version for jquery, please choose one by typing one of the numbers below:
    1) jquery#^1.9.0 which resolved to 1.12.3 and is required by colResizable#94bd9eab2f
    2) jquery#~2.2.3 which resolved to 2.2.3 and is required by xyz

If colResizable does support JQuery 2.x as package.json suggests, could bower.json be made to reflect that?

The forced setting of padding to zero in all table cells make is difficult to set any padding o the cell. It seems to work quite well if this code is removed.

is there any reason why this cant be overridden or removed?

line 41:
.JColResizer > tbody > tr > td, .JColResizer > tbody > tr > th{overflow:hidden;padding-left:0!important; padding-right:0!important;}

I would like to use this lib in my actual project, but I'm using bower to handle UI dependencies.

Could you please create a bower.json file and publish it to bower repo?

Hi
i found the extension will not work properly if i have some hidden column in my table basically with attribute "style='display : none'"

Thanks for your time!!

Hello
I have tabs with tables in each of them.
The tables are all built when the page is called, but they are built by different functions in the code, because they have each a life of their own and can be rebuilt.
I call colResizable on each of functions, for the given table .
But it works only in my first tab, not in any of the others,

Any idea of what I should do so that it works on all of them ? thanks

If you look at line 121

t.find('td, th').not(th).not('table th, table td').each(function(){ $(this).removeAttr('width'); });

It doesn't seem like this condition is ever true, so it never actually gets run on any cells; breakpoints and console logs were not hit when I tried them out. I ended up needing to modify the behavior to work on all non-header cells, and to handle an issue I had with resizeMode: 'overflow' and cells that had really long text strings. I fixed this issue by using the following:

t.find('td').not('table th').each(function () { this.children[0].style.maxWidth = th[$(this).index()].style.width; });

This stops the columns from expanding to accommodate the length of text in overflow mode, and I used similar code in an onDrag function to maintain the functionality after resizing.

I'm trying to have different columns have different starting widths, but when I instantiate colReziable on the table all columns default to being the same widths. Is this a piece of functionality that hasn't yet been implemented, or am I missing something?

In source code of this plugin is defined css rule .JColResizer{table-layout:fixed;}, but how I can use this plugin if I don't want fixed table layout (table with wide columns and horizontal scrollbar)? More details and related previous issue

if table look like this the script will not work.

table{
        width: 100%;
        border-collapse: collapse;
        table-layout:fixed;
        border:1px solid #ddd;
    }
    thead{
        display: block;
        width: 100%;
        color: #ccc;
    }
    tbody{
        display: block;
        width: 100%;
        height: 200px;
        overflow: auto;
    }
    th,td{
        display:inline-block;
        width:300px;
        padding: 0.8rem;
        text-align: left;
        vertical-align: top;
        border-left: 1px solid #ccc;
    }

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>lean</td>
            <td>cell 1</td>
        </tr>
        <tr>
            <td>chacha</td>
            <td>cell 2</td>
        </tr>
        <tr>
            <td>okaoka</td>
            <td>cell 3</td>
        </tr>
    </tbody>
</table>

I'm looking to move forward with using this in one of my projects at work, but my company uses bower to handle any UI dependencies. Is it possible that colResizable could get a bower repo? The process seems very simple, but it doesn't seem appropriate to register one for someone else's work.

http://bower.io/docs/creating-packages/

Hi, I'm having the situation that I enable and disable columns by setting corresponding <col/>, <th/> and <td/> to display: none;. It seems like colResizable doesn't respect invisible columns, so I get weird behavior that looks like I'm resizing a different column than I'm actually dragging.

Is it possible to prevent this?

I already tried disabling colResize first, then enabling/disabling my columns, and re-enabling colResize. It didn't help … think you it might only check for column existence and not visibility, right?

Thanks in advance

Arne

Here is another resizing issue i discovered when postbackSafe: true and column widths are stored via session storage.

I have noticed an occasional bug with shrinking the browser window, the column widths are not dynamically adjusted and the table is forced out of its container. Refreshing the page fixes it, however shrinking the browser page again will result it the same. Stretching the browser window larger and then back to small also seems to fix it.

This only happens with postbackSafe i believe. And again it happens frequently but not every time, so not sure yet exactly what triggers it.

Looking at the source code i dont see memento() getting called onResize(). My theory is that it might help?

If you have no time, i plan to help out and see if i can patch a fix sometime soon

Hello,

It would be nice if this was registered on bower. Can you please do that?

Thanks,
Kash

The minWidth property is not being respected when the resize mode is flex or overflow.
In these cases, the columns can not be make smaller than the content in them.
To reproduce, try to make any of the columns in the Flex or Overflow examples smaller than the "header" word in the heading.
The expected result is to let the columns be made smaller than the content, up to the minWidth property (as it is working for resize mode = fit)

At first I couldn't get it running and it turns out it doesn't work with the latest version of jQuery (while it does work fine with the older jQuery provided with the demo).

I really wanted to have jQuery 2 so I attempted to solve the problem. It seems that it stumbles on this line:

var ie=$.browser.msie;

This makes sense, as jQuery 2 drops support for older versions of IE. To fix this I simply replaced it with:

var ie=false;

Which solved the problem for me. This probably breaks compatibility with some versions of IE, but if I cared about that I wouldn't be using jQuery 2 ;)

First of all thank you for this excellent plugin, really useful...

Is there anyway to use this plugin without setting the table layout to fixed?
Is there any code I can change do that the re-size works without a fixed layout?
I cannot have my table initialize as fixed, the columns need to fit to their content.

Setting fixed:false doesn't actually use the automatic table layout.

Thanks

Can you add flex table suport ?

Hello,

Is it possible to resize a column with an interval by 5px 5px 10px by 10px or? In order to have accounts just in the calculations.

Thank you
Regards

Hi,

Is it possible to resize it and have values in integer instead in percentage. I want to achieve a grid column resizer for my project.

Thanks

1. Load page with colResizable table.
2. Show developer console.
3. Resize browser window.
   • See JavaScript 'undefined is not a function' error.

Examining the code, this is due to not checking for object/function existence before usage.

@alvaro-prieto
#2

hi,when i add a new column,follow your suggest:

1. call colResizable using the "disable" option
2. delete (or add) any column you want
3. call colResizable again with your configuration parameters

use angularjs

    $scope.add = function () {
        $(".parent").colResizable({ disable: true });
        $scope.rows.push(
            {
                id:"test4"
            });

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

<body ng-app="test2App" ng-controller="test2Controller">
    <table class="parent">
        <tr style="width:1000px;">
            <td class="child" ng-repeat="row in rows">{{row.id}}</td>
        </tr>

    </table>
    <br />
    <div ng-click="add()">Click</div>
</body>

but it doesn't work in last column!

I have an example where I'm trying to just have 2 columns like a 3d world editor where one column is the canvas where something is drawn and the other is a column of controls. What I'm finding is colResizable seems to be making the canvas side taller and taller.

It's possible I'm just using it wrong but I thought I'd ask in case it's a fixable issue

There's an example here If you slide the grip between the 2 columns back and forth you'll see the canvas grows and grows forever.

You can look at the code, it's tiny. Simplified it's basically this

The html

<table id="editor">
  <tr>
    <td id="viewContainer">
       <canvas id="canvas"></canvas>
    </td>
    <td id="controlContainer">
      <div id="controls">
    </td>
  </tr>
</table>

the css

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html, body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#editor {
    border-spacing: 0px;
    width: 100%;
    height: 100%;
}
#canvas {
    width: 100%;
    height: 100%;
}
#viewContainer {
    width: 70%
}
#controlContainer {
    width: 30%;
}
#controls {
    width: 100%;
    height: 100%;
}

the code

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

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// make in
function resizeIfNewSize() {
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;
  if (width != canvas.width || height != canvas.height) {
    canvas.width = width;
    canvas.height = height;

    drawBorderAndXTheFillsTheCanvas();
  }
  requestAnimationFrame(resizeIfNewSize);
}
resizeIfNewSize();

Hi,

Is this project currently actively maintained? There are a number of open issues and PRs and the network shows various commits after the latest of this one and I'm wondering if the project is dead or if any help is needed for maintaining it?

In the onResize() if there are no tables, the "for (t in tables)" iterates over the properties of the tables object, and therefore cannot call t.removeClass(SIGNATURE).

Adding a check for tables.length > 0 before the for loop appears to resolve the issue.

Hi
how i can use this plugin in RTL page

Just for the sake of clarity, when you state that this fine library license is "MIT & GPL" do you mean that I can use it under either license or rather that the terms of both license apply? e.g. is this and OR or an AND?
Thanks!

Hi

Would it be possible to resize headers that consist of more header rows than one? For example resize a table such as this one: https://jsfiddle.net/GertV/g0v2c24d/

With v1.6 of colResizble I can successfully resize the first row (between "Col 1" and "Col 2" but I don't get the option for the second one (between "Col 1a" and "Col 1b" for example)

Thanks!

i'm using colResizable plugin it's working fine on my .net app but there is a need of like, if I resizing one column it will resize only for that column.....is that possible if I increase or decrease column size then all adjacent columns size will also be change?
there is code below...where it might me workaround but I don't how...can anybdy guide me on it...

if ($.cookie('colWidth') != null) {

            var columns = $.cookie('colWidth').split(',');
            var i = 0;
            $('.GridViewStyle th').each(function () {
                $(this).width(columns[i]);
                i = i + 1;
            });
        }

        $(".GridViewStyle").colResizable({
            liveDrag: true,
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            onResize: onSampleResized


        });


        var onSampleResized = function (e) {

           var columns  = $(e.currentTarget).find("th");
            var msg = "";
            columns .each(function () { msg += $(this).width() + ","; })
            $.cookie("colWidth", msg);
        };

Hello,
I want to share you my problem using colResizable. In fact I would use the plugin with a non-fixed table, but my table need to be larger than the table's parent fixed width...

Here's the fiddle to illustrate the problem : https://jsfiddle.net/L4y20gzj/2/

I tried to disable the .JCLRFlex class (width:auto!important;) which make the table able to be larger but we can't decrease the width after increase it.

1. Resize columns.
2. Refresh page.
   • Expect column sizes to be restored, but they aren't.

Examining code, see array[length] access (should be length-1) in memento() function, which is responsible for saving and restoring column sizes.

What I need is:
I have a DIV with CSS style overflow-x: scroll

Inside dis DIV a TABLE and I apply colresize plugin.

And if I drag a column so it gets wider then TABLE width must grow (no change other columns width )

And because the DIV container CSS it can display scroll because TABLE width gets wider

How could I do this, sorry my English, I do not know if I have explained well enough or should I try to do better.

Thanks in advance for your help.

Hi,

Thanks for the great plugin.. it is awesome :)

I'm still able to see the issue mentioned in Issue #39 with 1.6 version.

I'm using 1.6version and following is the config,

$('table').colResizable({
    liveDrag: true,
    gripInnerHtml: '<div class="grip"></div>',
    draggingClass: 'dragging',
    resizeMode: 'fit',
    minWidth: 50
});

Please suggest any quick workaround

I'm trying to use your plugin on a project I'm working on only I've hit an odd problem.

The code I'm working with is at http://jacq.freehostia.com/esavvy/data.html . The table is set to be resizable with jqueryUI, the column headers with your plugin, and the div inside the td's is styled with white-space: nowrap;

If I rermove the nowrap, the columns can resize. If I leave the nowrap there, the columns can't resize until you click and drag to re-size the table first. After you resize the table any amount, the columns resize just fine.

Any idea how I can get the columns to resizable before the user resizes the table?