“True” Column Resize for TableKit

UPDATE: On Barak’s suggestion I’ve added the possibility to keep the overall table width fixed. His proposed implementation was compensating for a cell’s width change by altering the width of the neighbouring cell. I’ve rewrote that into the tablekit-trueresize.js extension.

Since I was pretty much rewriting everything I’ve added two new parameters:

• trueResize – set to true for the resize to recalculate the table width
• fixedResize – set to true for the resize to keep the table width fixed (only works if trueResize is also true)

Usage:

TableKit.Resizable.init(table,
    {'trueResize' : true, 'keepWidth' : true});

I’ve updated the demo page too.

The resize feature of TableKit is wonderful. There are 2 problems with it though (well, not with it but with the way browser handle table layouts):

• you really cannot control the actual size of the columns
• column text wraps, resulting in uneven row heights

Well, there’s a solution to these, and you only need a coupe of CSS and JavaScript extra lines.

The markup (CSS that is – you can download it from here: tablekit-trueresize.css):

table {
   width: 600px;table-layout: fixed;
}

td,th {
   white-space: nowrap;
   overflow: hidden;
}

th {
   white-space: pre;
}

What we’re doing is:

• setting a width to the table
• setting the table layout as fixed (preventing browser from adjusting table/columns width)
• disabling white space wrapping, if IE7 for TH we must use

  white-space: pre;

• hiding cell text outside the cell boundaries

It’s that simple! Actually it isn’t. We’ll need to adjust table width on each column resize. The Javascript – you can download it from here: tablekit-trueresize.js.

Demo (new window):