Follow by Email

Thursday, 14 April 2016

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

15 comments :

  1. Can You Send me Source File at
    Email :ashehzad612@gmail.com
    Thanks

    ReplyDelete
    Replies
    1. Shehzad

      I don't have source file :(
      But why you need that , you can use CSS mentioned in post directly and in case of any issue feel free to ask

      Ashish

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

    ReplyDelete
  3. Have you any video related to this tutorial?

    ReplyDelete
    Replies
    1. Shehzad

      First read this post- ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

      After that paste CSS code mentioned in this post in CSS file of your application then drop a table on page and check it

      Ashish

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

    ReplyDelete
    Replies
    1. 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

      Delete
  5. Well information about change style of adf table.Your post is helps in my Oracle ADF Trainingto understand concepts.

    ReplyDelete
  6. 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?

    ReplyDelete
    Replies
    1. Even I want to achieve the same

      Delete
    2. Hi
      Sumit and Ashish

      Now check updated post , I have added CSS for styling ADF Table Pagination bar

      Ashish

      Delete
  7. Hello Ashish,

    column content data that comes from LOV doesn't affect with row highlighted .. why?

    ReplyDelete
    Replies
    1. Can you share a image of that ?

      Delete
    2. https://goo.gl/photos/QKgpJy8pZ9rPbppz5

      Delete