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

Sharing is Caring

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- 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 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|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|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

21 thoughts on “Change Style of ADF Table, Column, Header, Data Cell and pagination bar”

  1. i have no idea how to change table header style and column header style and where to paste the code that are given by you for column and table header

  2. Hi Ashish,
    we can traverse through CollectionModel to set selected rows or disclosed rows.

    But can we traverse through RichTreeTable to set properties (inline style) conditionally to rows (output text in the row)


  3. Vishnu

    For this purpose you can put condition on inline style property
    Suppose you want to hightlight Employees record where Department Id is 100 then you can write this in inline style of table columne like this
    #{row.bindings.DepartmentId==100 ? 'background-color:yellow;' : ''}
    Or if you have to change property of components inside columne then put same condition in output text inside column


  4. Hello Ashish,

    I want to change the background color of paginator part of the table, could you please suggest what is the correct component for the same in skin?

  5. Hi Ashish,

    Nice post.

    I have implemented this and working fine when i remove the rowBrandingInterval in table or setting this to 1.

    Why the rowBrandingInterval is coming by default to 0. Is there a way to set this to 1 to all tables globally?

    For each table we can remove this rowBrandingInterval, problem come in LOV popup table. By default it will apply to 0 and not working this banding.

    is there solution to solve this?


Leave a Reply

Your email address will not be published. Required fields are marked *