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

Related Posts

I’m an Oracle ACE, Blogger, Reviewer,
Technical Lead working on Oracle ADF

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

  1. 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)

    -Vishnu

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

    Ashish

  3. 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?

  4. 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?

    Thanks,
    Naresh

Leave a Reply

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