Basic column resizing plugin

koosvdkolk

I just got a basic version of column resizing working using a third-party lib (the third-party lib is http://www.bacubacu.com/colresizable/)

See http://jsfiddle.net/eLm6ugp7/ for a demo.

For my own use-case this would be enough. I am planning to make it more robust. People out their want to help me?

advancewarsbest

Wow thats awesome, I'm going to try it out :D

UPDATE

Tested it out, works well on a simple Datatable, but doesn't seem to work once you mod your table like adding scrollX, scrollY, paging, processing etc. Even a basic table with column searching still prevents it from working.

It is very neat. even the older column reordering and resizing didn't seem to be as neat. Possibly one of the only missing features is this ability to resize the column, but I especially like how this one will shrink smaller than the word size which I believe column reorder and resize would not do.

UPDATE 2

Refreshed the page before closing it and it started working just fine with the column searching. and I may have made a mistake on the other mods. will give it another try.

UPDATE 3

pretty much only works when its in this format:

$('#example').DataTable({
        initComplete: function(settings) {
            $('#example').colResizable({liveDrag:true});
        }
    });

or

$('#example').DataTable();
$('#example').colResizable({liveDrag:true});

but the minute you do something like:

$('#example').DataTable({"scrollX": true});
$('#example').colResizable({liveDrag:true});

It will no longer work.

larsonator

looks promising.

If you could extend the resize event to apply to scrolling tables too it would be perfect.

i might look into this in my spare time.

allan

Ver nice - thanks for sharing this with us (sorry I missed your post at the time @koosvdkolk).

Using table-layout: fixed I think is basically the only way this is going to work - which is what this plug-in does.

Allan

koosvdkolk

@allan: is it possible to set the column width after the datatable has been rendered?

https://datatables.net/reference/option/columns.width seems to work only on init.

allan

Currently no - as you say, the widths can only be set on init.

Allan

koosvdkolk

Ok, thanks @allan. I tried to add this functionality myself, but it does not work very well.

  _api_register('setColumnWidth', function(index, width){    
    return this.iterator( 'table', function ( settings ) {      
      settings.aoColumns[index].sWidth = width+'px';     
      _fnBuildHead( settings );
      _fnDrawHead( settings, settings.aoHeader );
      _fnDrawHead( settings, settings.aoFooter );
      _fnDraw(settings);
        } );        
  });

https://jsfiddle.net/uc146kxa/

The table body seems to be working, but the head is not, probably because it has width:100%.

Is this the right direction, or do you see many lions and bears on the road?

allan

It isn't something I've looked into so I can't say with any certainty what about would be involved. Certainly a call to the private function _fnCalculateColumnWidths would be required.

Allan