#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# DataTable.ColumnWidths Class

Defined in: `datatable/js/colwidths.js:45`
Module: datatable-column-widths
Parent Module: datatable

Available since 3.5.0

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 `width`s, 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 `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 as shown above.

- Index

## Item Index