How to Color Column Groups and Columns in APEX Interactive Reports

 In Oracle APEX, Interactive Reports offer a powerful way to organize and display data. One often-overlooked enhancement is styling column groups and their corresponding columns to improve visual clarity and user experience.

This blog guides you through how to color column group headers and their underlying columns using both CSS and JavaScript.

Step 1: Assign a Static ID to the Interactive Report

1. Open your APEX page in Page Designer.

2. Select the Interactive Report region.

3. Under the Advanced section, set the Static ID

This ID helps us target the report with custom code.

Step 2: Identify Column Groups You Want to Style

Suppose you want to color these column groups:

• End Item Info

• Sales Info

To identify them:

1. Run the page and open the browser’s Developer Tools (Right-click > Inspect)

2. Locate the column group headers and note the attribute data-idx (e.g., data-idx="1" for End Item Info, data-idx="2" for Sales Info).

To color only column groups Now go to Page  and below code inline 

#my_ig  .a-GV-headerGroup[data-idx="1"] {

    background-color: #cdcdcd;

}

#my_ig  .a-GV-headerGroup[data-idx="2"] {

    background-color: #31869b;

}

Step 3: Use JavaScript to Apply a Class to Each Column

You can assign CSS classes to all columns under a specific group using the Column Initialization JavaScript Function.

📍Go to:

• Page Designer → Interactive Report → Advanced

• Set the Column Initialization JavaScript Function to:

function(config) {

    config.defaultGridColumnOptions = {

        headingCssClasses: "SalesInfo"  

    }

    return config;

}

function(config) {

    config.defaultGridColumnOptions = {

        headingCssClasses: "EndItemInfo"

    }

    return config;

}

To use multiple classes (for example, assign EndItemInfo to certain columns), go to individual columns → Appearance → CSS Classes, and manually set them as needed.

 and now go to page  add below code in inline section 

Step 4: Add Final CSS to Style Groups and Columns

Now, go to the Page Designer → CSS > Inline section, and paste the following CSS code:

#my_ig  .a-GV-headerGroup[data-idx="1"] {

    background-color: #cdcdcd;

}

#my_ig  .a-GV-headerGroup[data-idx="2"] {

    background-color: #31869b;

}

#my_ig .EndItemInfo{

    background-color: #cdcdcd;

}

#my_ig .SalesInfo {

    background-color: #31869b;

}

This CSS targets both the group header and all column cells underneath by using the classes EndItemInfo and SalesInfo.