DataTable.ColumnWidths 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 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.