83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithAdds basic, programmatic column width support to DataTable via column
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithconfiguration property `width` and method `table.setColumnWidth(id, width);`.
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith@module datatable
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith@submodule datatable-column-widths
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith test: function () {
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // In modern browsers, <col style="width:X"> will make columns,
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // *including padding and borders* X wide. The cell content width
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // is reduced. In old browsers and all Opera versions to date, the
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // col's width style is passed to the cells, which causes cell
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // padding/border to bloat the rendered width.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith '<table style="position:absolute;visibility:hidden;border:0 none">' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith '<colgroup><col style="width:9px"></colgroup>' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith '<tbody><tr>' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith '<td style="' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith 'padding:0 4px;' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith 'font:normal 2px/2px arial;' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith 'border:0 none">' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith '.' + // Just something to give the cell dimension
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith '</td></tr></tbody>' +
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith broken = node.one('td').getComputedStyle('width') !== '1px';
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith_API docs for this extension are included in the DataTable class._
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithAdds basic, programmatic column width support to DataTable. Note, this does not
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithadd support for truncated columns. Due to the way HTML tables render, column
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithwidth is more like a "recommended width". Column content wider than the
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithassigned width will cause the column to expand, despite the configured width.
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithSimilarly if the table is too narrow to fit the column with the configured
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithcolumn width, the column width will be reduced.
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithTo set a column width, either add a `width` value to the column configuration
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithor call the `setColumnWidth(id, width)` method.
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithNote, assigning column widths is possible without this module, as each cell is
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithdecorated with a class appropriate for that column which you can statically
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithtarget in your site's CSS.
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithTo achieve absolute column widths, with content truncation, you can either:
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith1. Use this module, configure *all* columns to have `width`s, then add
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith `table-layout: fixed;` to your CSS for the appropriate `<table>`, or
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith2. Wrap the contents of all cells in the column with a `<div>` (using a
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith `cellTemplate` or `formatter`), assign the div's style `width`, then assign
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith the column `width` or add a CSS `width` to the column class created by
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith<pre><code>.yui3-datatable .yui3-datatable-col-foo {
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith width: 125px;
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith.yui3-datatable .yui3-datatable-col-foo .yui3-datatable-liner {
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith overflow: hidden;
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith padding: 4px 10px;
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith width: 125px;
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith</pre></code>
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith<pre><code>var table = new Y.DataTable({
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith cellTemplate:
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith '<td class="{className}">' +
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith '<div class="yui3-datatable-liner">{content}</div>' +
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith</code></pre>
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithTo add a liner to all columns, either provide a custom `bodyView` to the
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithDataTable constructor or update the default `bodyView`'s `CELL_TEMPLATE` like
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith<pre><code>table.on('renderBody', function (e) {
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith e.view.CELL_TEMPLATE = e.view.CELL_TEMPLATE.replace(/\{content\}/,
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith '<div class="yui3-datatable-liner">{content}</div>');
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith</code></pre>
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke SmithKeep in mind that DataTable skins apply cell `padding`, so assign your CSS
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith`width`s accordingly or override the `padding` style for that column's `<td>`s
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smithto 0, and add `padding` to the liner `<div>`'s styles as shown above.
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith@class DataTable.ColumnWidths
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith@for DataTable
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith The HTML template used to create the table's `<col>`s.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @property COL_TEMPLATE
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @type {HTML}
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @default '<col/>'
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith The HTML template used to create the table's `<colgroup>`.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @property COLGROUP_TEMPLATE
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @type {HTML}
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @default '<colgroup/>'
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith Assigns the style width of the `<col>` representing the column identifed by
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith `id` and updates the column configuration.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith Pass the empty string for `width` to return a column to auto sizing.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith This does not trigger a `columnsChange` event today, but I can be convinced
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith that it should.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @method setColumnWidth
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @param {Number|String|Object} id The column config object or key, name, or
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith index of a column in the host's `_displayColumns` array.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @param {Number|String} width CSS width value. Numbers are treated as pixels
186b3579b2d4dfe441df1f5b7a4a7ddc98d6e524Luke Smith @return {DataTable}
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith index = col && arrayIndex(this._displayColumns, col);
186b3579b2d4dfe441df1f5b7a4a7ddc98d6e524Luke Smith return this;
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith //----------------------------------------------------------------------------
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // Protected properties and methods
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith //----------------------------------------------------------------------------
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith Renders the table's `<colgroup>` and populates the `_colgroupNode` property.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @method _createColumnGroup
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith Hooks up to the rendering lifecycle to also render the `<colgroup>` and
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith subscribe to `columnChange` events.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @method initializer
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith Sets a columns's `<col>` element width style. This is needed to get around
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith browser rendering differences.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith The colIndex corresponds to the item index of the `<col>` in the table's
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith `<colgroup>`.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith To unset the width, pass a falsy value for the `width`.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @method _setColumnWidth
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @param {Number} colIndex The display column index
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @param {Number|String} width The desired width
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // TODO: move this to a conditional module
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // Opera (including Opera Next circa 1/13/2012) and IE7- pass on the
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // width style to the cells directly, allowing padding and borders to
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // expand the rendered width. Chrome 16, Safari 5.1.1, and FF 3.6+ all
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // make the rendered width equal the col's style width, reducing the
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // cells' calculated width.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith col = colgroup && colgroup.all('col').item(colIndex),
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // Adjust the width for browsers that make
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // td.style.width === col.style.width
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith if (width && Y.Features.test('table', 'badColWidth')) {
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith firstRow = this._tbodyNode && this._tbodyNode.one('tr');
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith cell = firstRow && firstRow.all('td').item(colIndex);
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith return parseInt(cell.getComputedStyle(prop), 10)|0;
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith // I hate this
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith Populates the table's `<colgroup>` with a `<col>` per item in the `columns`
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith attribute without children. It is assumed that these are the columns that
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith have data cells renderered for them.
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith @method _uiSetColumns
83abb4e792c64ccc94916233f9dedbd9fa638d50Luke Smith @since 3.5.0
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith _uiSetColumns: function () {
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith colgroup = this._colgroupNode = this._createColumnGroup();
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith this._tableNode.one('> thead, > tfoot, > tbody'));
db7877b089ad41f8aebc49c0810c81adc5c44cacLuke Smith for (i = 0, len = columns.length; i < len; ++i) {