How to make Datatable cell resizable on dragging it?

Saket22

Hi,

I am trying to make header's cell of Datatable resizable on dragging the border of each cells, so that if I have maximum-width in the cells and some of the data are hidden then user will be able to drag the header cell to resize so that the required data is visible.
Please let me know can we achieve it through data table plugin.

Thanks
Saket

Rpiechura

Currently there isn't a built in way of doing that, but it is something that will eventually get implemented. However with a bit of tuning work you can get http://legacy.datatables.net/extras/thirdparty/ColReorderWithResize/ to work with the current datatables version.

What I ended up doing was replace all the code inside of

$.fn.dataTableExt.oApi.fnColReorder = function (oSettings, iFrom, iTo) {...} (on line 121)

with the code that is in the current ColReorder plugin and it worked just fine.

Saket22

Thanks Rpiechura for the solutions. I tried and got my datatable column resize but here the alignment of the cell is not proper. Can you please help me to get rid of this issue.

Rpiechura

I don't completely understand what you're asking. The first thing that comes to mind has to do with server side processing where paging after re-ordering puts data in the incorrect spot. If you could link to a table that I can look at it would be helpful. The simplest way is to use the datatables debugger which can be found at

https://www.datatables.net/forums/discussion/8731/datatables-debugger

Just give a link to the datatables debugger 6 digit code and I can at least look at the table and see what you mean and possibly what is wrong as well. It's a great way of figuring out what is actually going wrong without having to use browser debugging tools.

Saket22

Due to ScrollY the alignment is getting affected and also the resize property makes the datatable to squeeze instead to making the column squeeze.

Rpiechura

I see... I've never messed with scroll Y before so I'm not sure how to deal with this immediately but I'll look into it a bit and see what I can come up with.

Rpiechura

So there are 3 options as far as I can see, and you can determine how realistic they are for you.

1: If you use datatables 1.9.4 (which was the last version of datatables) then the column resizing plug in works as intended.

2: You can turn off Scroll X and Scroll Y and the columns will re-size properly.

3: You can look into the ColReorderWithResize plugin itself and try and figure out what is going wrong, obviously something changed from 1.9.4 to 1.10 which is making the column header shrink from the right but the column to shrink from the left (which is causing the issue) but I can't figure out where that calculation is being done. I know that it's not the change to the plugin I suggested to make it work with 1.10. The issue seems to be with the logic in _fnMouseMove (lines 775-880) because if you re-draw the table by doing something like reordering the columns things get put back correctly (more or less).