Projects‎ > ‎XBL‎ > ‎

Datatable Methods to Update Column Widths


The datatable component supports resizeable columns. Depending on your browser two different methods can be used to update table column widths in JavaScript:

  1. For browsers that support it, a style element can be added to the document's head with the CSS definitions of the column widths. Resizing a column is then a matter of updating the corresponding rule. Of course, this assumes that class attributes have been set in each table cell.
  2. Style attributes can also be set directly in each table cell to define their width.
The first method is more elegant but doesn't seem to work well in IE. According to a comment in YUI's datable.js:

 * Notes: This technique is not performant in IE6. IE7 crashes if DataTable is
 * nested within another TABLE element.

If the second method needs to be implemented for IE, it is tempting to use it for every browser and the purpose of this note is to evaluate the speed of both method for a browser such as Firefox that supports them.

Tests with Firefox

The tests have been done using the table-width-performance-test.xhtml sample page attached to this note.

It includes simple scripts that resize a table using these methods and are easy to profile using a profiler such as the one that is included in FireBug and the page is self documented.

Results with Firefox

These tests have been run width the following parameters:

  • Between 1 and 200 rows
  • 5 columns
  • Columns resized from 10 to 210 pixels by steps of 10 pixels.
All the results are expressed in milliseconds.

The results show that the time taken to resize a column doesn't depend on the number of rows with the first method and is proportional to the number of rows in the second one, suggesting that it mainly depends on the number of DOM updates (one per column in the first method, one per cell in the second one).

Number of rows Number of columns Width step Time (stylesheet) Time (style attributes)
1 5 10 0,5 0,49
2 5 10 0,52 1,21
5 5 10 0,5 2,66
10 5 10 0,55 4,21
100 5 10 0,16 18,12
200 5 10 0,17 39,65

These results show that implementing both methods is really useful if we want to support efficiently large tables in Firefox.
Alessandro Vernet,
Aug 1, 2009, 6:19 AM