DataTable.ColumnWidths Class

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 widths, 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.

.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 widths 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.