How to customize look and feel of ADF table?

How to customize look and feel of ADF table?

Sometimes we need to customize ADF table, so here I will explain how to change look and feel of table using CSS.

  1. Showing table without header cell and row selection background color set to transparent like following image.

af|table.stylestable {
    border:none;
}

af|table.stylestable af|column::column-header-cell {
    display:none;
}

.AFTableCellDataVHGrid:alias 
{
border:none
}

af|table.stylestable::data-row:selected af|column::data-cell
{
background-color:transparent;
border: none;
}
af|table.stylestable::data-row:selected:focused af|column::data-cell
{
background-color:transparent;
border: none;
}

af|table.stylestable::data-row af|column::data-cell
{
background-color:transparent;
border: none;
}

2.Show table column header vertically.

.mypheader
{

position: absolute;
bottom: 0;
width: 93%;
padding: 16px 0 16px 16px;
box-sizing: border-box;
right: 7%;
padding-right: 0;

}



3.Change Table Header Background color.

.mytablehdr th{

background: #F9F18E;
color: #c00d2d;
font-weight: bold;
font-size: 12px;
 padding: 3px;
}

4.Showing parent heading for column e.g Group and Division in following image.

To achieve this surround your code and name column with another column

                       
   

                       
              

                
              

              
                
              
  
          

About Manish Pandey

Manish is a Project Leader at Jagran Prakashan Ltd, focused on Jdeveloper Fusion Web Application(specifically Oracle ADF). He shares his knowledge through the OTN Jdev/ADF Forum. He has written more than 50 article about Oracle ADF and Jdeveloper.

Leave a Reply

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

*