Fork me on GitHub

Integrations

You can use floatThead with various other languages and frameworks. Here are the ones that I know "work well".

Javascript

Java

This is not tested with ColumnGroups, neither scrollable, nor liveResize, ONLY with expandMode = expand

The information here is taken from Issue 378

First you need to modify the PrimeFaces javascript lib implementation a bit:

PrimeFaces.widget.DataTable.prototype.resize = function(event, ui) {
var columnHeader, nextColumnHeader,
change = null, newWidth = null, nextColumnWidth = null,
expandMode = (this.cfg.resizeMode === 'expand'),
table = this.thead.closest('.ui-datatable-tablewrapper').find('table');

if (this.hasColumnGroup) {
var groupResizer = this.findGroupResizer(ui);
if (!groupResizer) {
return;
}

columnHeader = groupResizer.parent();
} else {
columnHeader = ui.helper.parent();
}

var nextColumnHeader = columnHeader.nextAll(':visible:first');

if (this.cfg.liveResize) {
change =
columnHeader.outerWidth() - (event.pageX - columnHeader.offset().left),
newWidth = (columnHeader.width() - change),
nextColumnWidth = (nextColumnHeader.width() + change);
} else {
change = (ui.position.left - ui.originalPosition.left),
newWidth = (columnHeader.width() + change),
nextColumnWidth = (nextColumnHeader.width() - change);
}

var minWidth = parseInt(columnHeader.css('min-width'));
minWidth = (minWidth == 0) ? 15 : minWidth;

if ((newWidth > minWidth && nextColumnWidth > minWidth) ||
(expandMode && newWidth > minWidth)) {
if (expandMode) {
table.width(table.width() + change);
setTimeout(function() {
columnHeader.width(newWidth);
}, 1);
} else {
columnHeader.width(newWidth);
nextColumnHeader.width(nextColumnWidth);
}

if (this.cfg.scrollable) {
var cloneTable = this.theadClone.parent(),
colIndex = columnHeader.index();

if (expandMode) {
var $this = this;

// body
cloneTable.width(cloneTable.width() + change);

// footer
this.footerTable.width(this.footerTable.width() + change);

setTimeout(function() {
if ($this.hasColumnGroup) {
$this.theadClone.find('> tr:first')
.children('th')
.eq(colIndex)
.width(newWidth); // body
$this.footerTable.find('> tfoot > tr:first')
.children('th')
.eq(colIndex)
.width(newWidth); // footer
} else {
$this.theadClone
.find(PrimeFaces.escapeClientId(
columnHeader.attr('id') + '_clone'))
.width(newWidth); // body
$this.footerCols.eq(colIndex).width(newWidth); // footer
}
}, 1);
} else {
if (this.hasColumnGroup) {
// body
this.theadClone.find('> tr:first')
.children('th')
.eq(colIndex)
.width(newWidth);
this.theadClone.find('> tr:first')
.children('th')
.eq(colIndex + 1)
.width(nextColumnWidth);

// footer
this.footerTable.find('> tfoot > tr:first')
.children('th')
.eq(colIndex)
.width(newWidth);
this.footerTable.find('> tfoot > tr:first')
.children('th')
.eq(colIndex + 1)
.width(nextColumnWidth);
} else {
// body
this.theadClone
.find(
PrimeFaces.escapeClientId(columnHeader.attr('id') + '_clone'))
.width(newWidth);
this.theadClone
.find(PrimeFaces.escapeClientId(
nextColumnHeader.attr('id') + '_clone'))
.width(nextColumnWidth);

// footer
if (this.footerCols.length > 0) {
var footerCol = this.footerCols.eq(colIndex),
nextFooterCol = footerCol.next();

footerCol.width(newWidth);
nextFooterCol.width(nextColumnWidth);
}
}
}
}
}
}

Then in the html:

<p:ajax 
event="colResize"
onstart="$('div.ui-tabs-panel:visible').find('table').on('reflowed', getColumnWidths).trigger('reflow');"
oncomplete="$('div.ui-tabs-panel:visible').find('table').off('reflowed')"
/>

In a seperate javascript file add:

function getColumnWidths() {
// @mkoryak note: in this function $(this) is the reference to the table that was just reflowed
// It is not used, however by @Vyling who wrote this code.
var currentDataTableHeaders = $('div.ui-tabs-panel:visible').find('table th');
currentDataTableHeaders.each(function() {
saveColumnWidth([{name:'column', value:$(this).text()}, {name:'width', value:$(this).outerWidth()}]);
});
}

And under the DataTable add:

<p:remoteCommand name="saveColumnWidth" process="@this"
actionListener="#{bean.saveColumnWidth(param.column, param.width)}" />

This logic assumes one table on page, but it can certainly be improved to work with any number of them.

Also note that I modified the original code from the issue linked but did not test my changes. Hopefully I can still make changes blindly and not break anything - if however that is not the case, please see original issue for working code. -mkoryak

PHP

Odds and Ends

Anything else?

If I am missing something that you made, or something that you know works, please open a new issue and I will add it to this page.