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/change style of ADF 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 the table component
Read Previous posts about- 

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 shows different background colour for rows.

To set the 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 the 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

Related Posts