ADF Skinning: Change Style of ADF Table, Column, Header, Data Cell and pagination bar

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

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

af|column::row-header-cell {
    color: #0080c0;
    font-weight: bold;
}

af|table::data-row:highlighted af|column::data-cell, 
af|table::data-row:highlighted af|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:inactive af|column::data-cell,
af|column::data-cell:selected,
af|table::data-row:selected:busy,
af|column::data-cell:focus,
af|table::data-row:selected:focused af|column::banded-data-cell,
af|table::data-row:selected:focused af|column::data-cell,
af|table::data-row:selected af|column::data-cell {
    color: white;
    background-color: Red;
}

And Output is this

*************** UPDATE ***************

Change ADF Table Pagination Bar Style

Default pagination bar looks like this in af:table

In comment section blog readers asked about styling pagination bar background, So for that requirement we can use this CSS in skin file

af|table::navbar {
    background-color: Teal; 
}

af|table::navbar-page-link {
    color: white; 
}

af|table::navbar-current-page {
    background-color: Olive; 
}

af|table::navbar-page-input {
    background-color: Highlight; 
}

af|table::navbar-page-input-label {
    color: white; 
    font-weight: bold; 
    }

af|table::navbar-row-range-text {
    color: white; 
    font-weight: bold; 
}

and output is

Cheers :) Happy Learning