` (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.
.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;
}
var table = new Y.DataTable({
columns: [
{
key: 'foo',
cellTemplate:
'<td class="{className}">' +
'<div class="yui3-datatable-liner">{content}</div>' +
'</td>'
},
...
],
...
});
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:
table.on('table:renderBody', function (e) {
e.view.CELL_TEMPLATE = e.view.CELL_TEMPLATE.replace(/\{content\}/,
'<div class="yui3-datatable-liner">{content}</div>');
});
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 `
`s
to 0, and add `padding` to the liner ` `'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 ` `s.
@property COL_TEMPLATE
@type {String}
@default ''
@since 3.5.0
**/
COL_TEMPLATE: '',
/**
The HTML template used to create the table's ``.
@property COLGROUP_TEMPLATE
@type {String}
@default ''
@since 3.5.0
**/
COLGROUP_TEMPLATE: '',
/**
Assigns the style width of the `` 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 `` 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 `` and
subscribe to `columnChange` events.
@method initializer
@protected
@since 3.5.0
**/
initializer: function () {
this.after(['renderView', 'columnsChange'], this._uiSetColumnWidths);
},
/**
Sets a columns's `` element width style. This is needed to get around
browser rendering differences.
The colIndex corresponds to the item index of the `` in the table's
``.
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 `` with a `` 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 ``
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
*/
}, '3.17.2', {"requires": ["datatable-base"]});
|