Saturday, October 11, 2014

Update af:table properties using Skin

Here is how default table looks like with Row Banding Interval set to 1.


Now, let's apply skin changes (shown later) and we can change layout as shown below.


Notice, few very visible changes. Here is skin code for each change.

Change Title to be centered.
af|column::column-header-cell-content {
    text-align: center;
}

Change Row banding color.
af|column::banded-data-cell {
    background-color: #DDD;
}

Change table row height.
af|table::data-row {
    height: 26px;
}