Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin

Hello Everyone

In this tutorial, We'll learn to change look n feel of ADF tree table component using Oracle ADF Skin
Here I am using Departments and Employees table HR Schema to prepare the model and created tree Table using view link between Departments and Employees View Object


You can check this link to know more about treeTable component - How to create treeTable in Oracle ADF

Added basic styling for master data in inlineStyle property of af:treeTable and it looks like this

<af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                              selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single"
                              id="tt1" width="350px" columnStretching="last" verticalGridVisible="false"
                              horizontalGridVisible="false" autoHeightRows="-1">
                    <f:facet name="nodeStamp">
                        <af:column id="c1"
                                   inlineStyle="#{node.DepartmentId!=null ?'font-weight:bold;color:white;background-color:#0086fe;' : ''}"
                                   width="200">
                            <af:outputText value="#{node.DepartmentName}" id="ot1"/>
                        </af:column>
                    </f:facet>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>
                    </f:facet>
                    <af:column id="c2"
                               inlineStyle="#{node.DepartmentId!=null ?'font-weight:bold;color:white;background-color:#0086fe;' : ''}">
                        <af:panelGroupLayout id="pgl1" layout="horizontal">
                            <af:outputText value="#{node.FirstName}" id="ot3"/>
                            <af:spacer width="3" height="0" id="s1"/>
                            <af:outputText value="#{node.LastName}" id="ot4"/>
                        </af:panelGroupLayout>
                    </af:column>
                </af:treeTable>

Now for styling of child records created an ADF skin file - How to create and apply ADF Skin

Change style of data-cell and banded data-cell

Use these selectors to modify child records property

/**Change properties of a data cell**/
 af|column::data-cell{
    background-color: #b5ddff;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #00496e;
}

/**Change properties of a banded data cell**/
 af|column::banded-data-cell {
    background-color: #b5ddff;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #00496e;
}

Change style of the column for the hover event 

/**Change properties of a column on hover**/
af|table::data-row:highlighted af|column::data-cell, 
af|table::data-row:highlighted af|column::banded-data-cell {
    color: brown;
    background-color: #ffde73;
    font-weight:bold;
}

Change af:treeTable selected row style 

/**Change properties of a selected column**/
af|table::data-row:selected:inactive af|column::data-cell,
af|table::data-row:selected:inactive af|column::banded-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, 
af|table::data-row:selected af|column::banded-data-cell {
    color: white;
    background-color: #008484;
    font-weight: bold;
}

Change Expand and Collapse icon of af:treeTable

Use these selectors to change icons of treeTable

af|treeTable::collapsed-icon-style {
    background-image: url("../../bullet_toggle_plus.png");
}

af|treeTable::expanded-icon-style {
    background-image: url("../../bullet_toggle_minus.png");
}

Cheers :) Happy Learning