3.0 beta 2

Columns

The grid columns are defined via columns collection. The column object includes 3 main parts - the column itself (border, background, but no content), which is rendered below the rows, the reference to the column header object and the collection of the column cells. Most of column properties are simultaneously forwarded to the cell prototype and the column header, so that setting the column width (for example) will apply to all three.

Locked columns

The lock property of the grid component allows to specify the number of locked columns on the left side (i.e. the columns which are always visible regardless of horizontal scroll).

var grid = new AX.Grid({
    lock: 2 // lock two columns on the left
});

Configuration

var columns = [
    {header: 'Name', width: 100, bind: '$name'},
    {header: 'Company', width: 200, align: 'center', bind: '$company'},
    {header: 'Phone', width: 150, align: 'right', bind: '$phone'}
];

var grid = new AX.Grid({
    columns: columns
});

The header property is not just a text, but the reference to the AX.Header instance, so it is possible to configure the headers in more details.

var columns = [
    {header: {text: 'Name', align: 'center', classes: 'my-header'}, bind: '$name'}
];

Cells

The cells method allows detailed configuration of the column cells.

var columns = [
    {header: 'Link', cells: {classes: 'my-link', html: '<a href="{{$url}}">{{$text}}</a>'}}
];

Access

You can access individual columns via columns collection

var col = grid.columns().get(0);

or column() shortcut

var col = grid.column(0);

Styles

Use .ax-column selector to attach column styles (border and background layers) -

#myGrid .ax-column>.ax-border {
    border-right: 1px dotted #ccc;
}

#myGrid .ax-column.ax-1>.ax-background {
    background: #def;
}