jQuery.floatThead

PrimeFaces DataTable widget

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

Integrations

Javascript

Java

PHP

Odds and Ends

Anything else?