colwidths.js revision 81619e546ba03384a7bc5cbdd1e5971de2231a6c
/**
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 `min-width`. Column content wider than the assigned width
will cause the column to expand, though if a table width is set, the overall
width will be respected by reducing the width of other columns if possible.
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 forced column widths with truncation,
either add a column `formatter` or update the table's `bodyView`'s
`CELL_TEMPLATE` to include a `<div>` liner (by convention, assigned a classname
"yui3-datatable-liner"), then set the width and overflow for those `<div>`s in
your CSS. For example, to give the column "foo" an absolute width, add this to
your site CSS:
```
.yui3-datatable .yui3-datatable-foo .yui3-datatable-liner {
overflow: hidden;
width: 125px;
}
```
and assign a `formatter` for the "foo" column in your JavaScript:
```
var table = new Y.DataTable({
columns: [
{
key: 'foo',
formatter: '<div class="yui3-datatable-liner">{value}</div>',
allowHTML: true
},
...
],
...
});
```
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('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 `<td>`s
to 0, and add `padding` to the liner `<div>`'s styles.
@module datatable-column-widths
**/
arrayIndex = Y.Array.indexOf;
test: function () {
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
'<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>',
}
return broken;
}
});
/**
Class extension for DataTable to add support for assigning column widths.
@class DataTable.ColumnWidths
**/
function ColumnWidths() {}
/**
The HTML template used to create the table's `<col>`s.
@property COL_TEMPLATE
@type {HTML}
@default '<col/>'
**/
COL_TEMPLATE: '<col/>',
/**
The HTML template used to create the table's `<colgroup>`.
@property COLGROUP_TEMPLATE
@type {HTML}
@default '<colgroup/>'
**/
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
**/
if (index > -1) {
width += 'px';
}
}
},
//----------------------------------------------------------------------------
// Protected properties and methods
//----------------------------------------------------------------------------
/**
Renders the table's `<colgroup>` and populates the `\_colgroupNode` property.
@method _createColumnGroup
@protected
**/
_createColumnGroup: function () {
},
/**
Hooks up to the rendering lifecycle to also render the `<colgroup>` and
subscribe to `columnChange` events.
@method initializer
@protected
**/
initializer: function (config) {
this.after('renderTable', function (e) {
this._uiSetColumns();
});
},
/**
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
**/
// TODO: move this to a conditional module
// 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,
if (col) {
width += 'px';
}
// Adjust the width for browsers that make
// td.style.width === col.style.width
if (cell) {
};
// I hate this
getCStyle('paddingLeft') -
getCStyle('paddingRight') -
getCStyle('borderLeftWidth') -
}
}
}
},
/**
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 _uiSetColumns
@protected
**/
_uiSetColumns: function () {
var template = this.COL_TEMPLATE,
colgroup = this._colgroupNode,
columns = this._displayColumns,
i, len;
if (!colgroup) {
this._tableNode.insertBefore(
} else {
}
}
}
}, true);