After a long vacation I'm back to work :)
This post is about changing look n feel of ADF Faces af:table component
I have seen many questions related to changing table column header style , selected row style, changing row banding styles etc
So this post is all about af:table styling , how can we use ADF Skin to modify default look of table component
Read Previous posts about- ADF Skinning
By Default ADF Table looks like this
Change Table Header Style-
Use column-header-cell-content selector to style af:table column header
af|column::column-header-cell-content {
color:white;
font-weight:bold;
text-align:center;
background-color:#3f5c9a;
padding:3px;
}
And Output is this
Change table data cell and banded data cell style -
When we set RowBandingInterval property of table to greater than zero, it show different background color for rows .
To set background color of rows we have to set both data-cell and banded-data-cell styles
And Output is this
![]()
af|column::data-cell {
color:black;
background-color:#aad8ef;
}
af|column::banded-data-cell {
color:maroon;
}
And Output is this
Change RowHeader column style and Highlighted Row Style
To change style of RowHeader column - Use row-header-cell selector and for highlighted row use
af|table::data-row:highlighted
And Output is this
![]()
af|column::row-header-cell {
color:#0080c0;
font-weight:bold;
}
af|table::data-row:highlightedaf|column::data-cell,
af|table::data-row:highlightedaf|column::banded-data-cell {
color:brown;
background-color:yellow;
}
And Output is this
Change ADF Table selected Row Style
Doing this a bit tricky ;) We have to apply style for all states (active, busy , inactive etc)
af|table::data-row:selected:inactiveaf|column::data-cell,
af|column::data-cell:selected,
af|table::data-row:selected:busy,
af|column::data-cell:focus,
af|table::data-row:selected:focusedaf|column::banded-data-cell,
af|table::data-row:selected:focusedaf|column::data-cell,
af|table::data-row:selectedaf|column::data-cell {
color:white;
background-color: Red;
}
And Output is this
Cheers :) Happy Learning