JQuery UI modified with jQuery floatThead plugin
An attempt was made to modify the floatThead columns . I tried using jquery resizable and colResizable plugins but in vain. Does anyone know of an example of implementing resizable columns using floatThead?
I am using the following config for floatThead.
useAbsolutePositioning: false,
autoReflow: false,
headerCellSelector: "tr:first>th:visible",
zIndex: 10,
debounceResizeMs: 300,
scrollContainer: function ($table) {
return $table.closest('div');
}
Thank.
source to share
I have been struggling with similar problems for three hours now and I finally solved it!
My problem was that the minimum width in px in the table given by the floatThead script did not allow the jQuery UI resizable parent to scale. It could only be increased.
My solution is to disable floatThead on resize and re-enable it after. Perhaps you want to add some code to save the scroll state.
var resizeId;
$("YourResizableParent").on( "resize", function( event, ui ) {
//Disabeling floatThead removes the min-width on the table
$("#assignment-table").floatThead('destroy');
//Fire function after resizing is finished
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
//Initiate floatThead again
$('#assignment-table').floatThead();
}
source to share
I had the same problem and in my case it was all due to a simple error.
I was adding a resizer to both my original table and the ghost table created by the floatThead plugin. Then I was unable to resize.
So my advice is always start resizing to , you start floatThead then everything works just fine
source to share