` (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 {HTML}
+ @default ''
+ @since 3.5.0
+ **/
+ COL_TEMPLATE: '',
+
+ /**
+ The HTML template used to create the table's ``.
+
+ @property COLGROUP_TEMPLATE
+ @type {HTML}
+ @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]);
+
+
+}, '3.10.3', {"requires": ["datatable-base"]});
|