File yui3/src/datatable/js/colwidths.js
/**
Adds basic, programmatic column width support to DataTable via column
configuration property `width` and method `table.setColumnWidth(id, width);`.
@module datatable
@submodule datatable-column-widths
@since 3.5.0
**/
var isNumber = Y.Lang.isNumber,
arrayIndex = Y.Array.indexOf;
Y.Features.add('table', 'badColWidth', {
test: function () {
var body = Y.one('body'),
node, broken;
if (body) {
// In modern browsers, <col style="width:X"> will make columns,
// *including padding and borders* X wide. The cell content width
// is reduced. In old browsers and all Opera versions to date, the
// col's width style is passed to the cells, which causes cell
// padding/border to bloat the rendered width.
node = body.insertBefore(
'<table style="position:absolute;visibility:hidden;border:0 none">' +
'<colgroup><col style="width:9px"></colgroup>' +
'<tbody><tr>' +
'<td style="' +
'padding:0 4px;' +
'font:normal 2px/2px arial;' +
'border:0 none">' +
'.' + // Just something to give the cell dimension
'</td></tr></tbody>' +
'</table>',
body.get('firstChild'));
broken = node.one('td').getComputedStyle('width') !== '1px';
node.remove(true);
}
return broken;
}
});
/**
_API docs for this extension are included in the DataTable class._
Adds basic, programmatic column width support to DataTable. Note, this does not
add support for truncated columns. Due to the way HTML tables render, column
width is more like a "recommended width". Column content wider than the
assigned width will cause the column to expand, despite the configured width.
Similarly if the table is too narrow to fit the column with the configured
column width, the column width will be reduced.
To set a column width, either add a `width` value to the column configuration
or call the `setColumnWidth(id, width)` method.
Note, assigning column widths is possible without this module, as each cell is
decorated with a class appropriate for that column which you can statically
target in your site's CSS.
To achieve absolute column widths, with content truncation, you can either:
1. Use this module, configure *all* columns to have `width`s, then add
`table-layout: fixed;` to your CSS for the appropriate `<table>`, or
2. Wrap the contents of all cells in the column with a `<div>` (using a
`cellTemplate` or `formatter`), assign the div's style `width`, then assign
the column `width` or add a CSS `width` to the column class created by
DataTable.
<pre><code>.yui3-datatable .yui3-datatable-col-foo {
padding: 0;
width: 125px;
}
.yui3-datatable .yui3-datatable-col-foo .yui3-datatable-liner {
overflow: hidden;
padding: 4px 10px;
width: 125px;
}
</pre></code>
<pre><code>var table = new Y.DataTable({
columns: [
{
key: 'foo',
cellTemplate:
'<td class="{className}">' +
'<div class="yui3-datatable-liner">{content}</div>' +
'</td>'
},
...
],
...
});
</code></pre>
To add a liner to all columns, either provide a custom `bodyView` to the
DataTable constructor or update the default `bodyView`'s `CELL_TEMPLATE` like
so:
<pre><code>table.on('table:renderBody', function (e) {
e.view.CELL_TEMPLATE = e.view.CELL_TEMPLATE.replace(/\{content\}/,
'<div class="yui3-datatable-liner">{content}</div>');
});
</code></pre>
Keep in mind that DataTable skins apply cell `padding`, so assign your CSS
`width`s accordingly or override the `padding` style for that column's `<td>`s
to 0, and add `padding` to the liner `<div>`'s styles as shown above.
@class DataTable.ColumnWidths
@for DataTable
@since 3.5.0
**/
function ColumnWidths() {}
Y.mix(ColumnWidths.prototype, {
/**
The HTML template used to create the table's `<col>`s.
@property COL_TEMPLATE
@type {String}
@default '<col/>'
@since 3.5.0
**/
COL_TEMPLATE: '<col/>',
/**
The HTML template used to create the table's `<colgroup>`.
@property COLGROUP_TEMPLATE
@type {String}
@default '<colgroup/>'
@since 3.5.0
**/
COLGROUP_TEMPLATE: '<colgroup/>',
/**
Assigns the style width of the `<col>` representing the column identifed by
`id` and updates the column configuration.
Pass the empty string for `width` to return a column to auto sizing.
This does not trigger a `columnsChange` event today, but I can be convinced
that it should.
@method setColumnWidth
@param {Number|String|Object} id The column config object or key, name, or
index of a column in the host's `_displayColumns` array.
@param {Number|String} width CSS width value. Numbers are treated as pixels
@return {DataTable}
@chainable
@since 3.5.0
**/
setColumnWidth: function (id, width) {
var col = this.getColumn(id),
index = col && arrayIndex(this._displayColumns, col);
if (index > -1) {
if (isNumber(width)) {
width += 'px';
}
col.width = width;
this._setColumnWidth(index, width);
}
return this;
},
//--------------------------------------------------------------------------
// Protected properties and methods
//--------------------------------------------------------------------------
/**
Renders the table's `<colgroup>` and populates the `_colgroupNode` property.
@method _createColumnGroup
@protected
@since 3.5.0
**/
_createColumnGroup: function () {
return Y.Node.create(this.COLGROUP_TEMPLATE);
},
/**
Hooks up to the rendering lifecycle to also render the `<colgroup>` and
subscribe to `columnChange` events.
@method initializer
@protected
@since 3.5.0
**/
initializer: function () {
this.after(['renderView', 'columnsChange'], this._uiSetColumnWidths);
},
/**
Sets a columns's `<col>` element width style. This is needed to get around
browser rendering differences.
The colIndex corresponds to the item index of the `<col>` in the table's
`<colgroup>`.
To unset the width, pass a falsy value for the `width`.
@method _setColumnWidth
@param {Number} colIndex The display column index
@param {Number|String} width The desired width
@protected
@since 3.5.0
**/
// TODO: move this to a conditional module
_setColumnWidth: function (colIndex, width) {
// Opera (including Opera Next circa 1/13/2012) and IE7- pass on the
// width style to the cells directly, allowing padding and borders to
// expand the rendered width. Chrome 16, Safari 5.1.1, and FF 3.6+ all
// make the rendered width equal the col's style width, reducing the
// cells' calculated width.
var colgroup = this._colgroupNode,
col = colgroup && colgroup.all('col').item(colIndex),
cell, getCStyle;
if (col) {
if (width && isNumber(width)) {
width += 'px';
}
col.setStyle('width', width);
// Adjust the width for browsers that make
// td.style.width === col.style.width
if (width && Y.Features.test('table', 'badColWidth')) {
cell = this.getCell([0, colIndex]);
if (cell) {
getCStyle = function (prop) {
return parseInt(cell.getComputedStyle(prop), 10)||0;
};
col.setStyle('width',
// I hate this
parseInt(width, 10) -
getCStyle('paddingLeft') -
getCStyle('paddingRight') -
getCStyle('borderLeftWidth') -
getCStyle('borderRightWidth') + 'px');
}
}
}
},
/**
Populates the table's `<colgroup>` with a `<col>` per item in the `columns`
attribute without children. It is assumed that these are the columns that
have data cells renderered for them.
@method _uiSetColumnWidths
@protected
@since 3.5.0
**/
_uiSetColumnWidths: function () {
if (!this.view) {
return;
}
var template = this.COL_TEMPLATE,
colgroup = this._colgroupNode,
columns = this._displayColumns,
i, len;
if (!colgroup) {
colgroup = this._colgroupNode = this._createColumnGroup();
this._tableNode.insertBefore(
colgroup,
this._tableNode.one('> thead, > tfoot, > tbody'));
} else {
colgroup.empty();
}
for (i = 0, len = columns.length; i < len; ++i) {
colgroup.append(template);
this._setColumnWidth(i, columns[i].width);
}
}
}, true);
Y.DataTable.ColumnWidths = ColumnWidths;
Y.Base.mix(Y.DataTable, [ColumnWidths]);
/**
Adds a style `width` setting to an associated `<col>`
element for the column.
Note, the assigned width will not truncate cell content, and
it will not preserve the configured width if doing so would
compromise either the instance's `width` configuration or
the natural width of the table's containing DOM elements.
If absolute widths are required, it can be accomplished with
some custom CSS and the use of a `cellTemplate`, or
`formatter`.
See the description of
[datatable-column-widths](DataTable.ColumnWidths.html)
for an example of how to do this.
{ key: 'a', width: '400px' },
{ key: 'b', width: '10em' }
@property width
@type String
@for DataTable.Column
*/