cssgridstylesinteractiveoracle-apex-20.1

APEX 20.1 - Styling Column Group Heading of Interactive Grid


Does anyone have an example showing how column headings can be styled in an Interactive Grid?

I would like the column headings in each of the 4 different Column Groups to have a different background color to make the groups more distinguishable: enter image description here

enter image description here

It doesn't look like there is a way to easily assign a style to the Column Group via the developer interface. So, I've tried to use the TH ID:

#R141502556723241100_ig_grid_vc_cur {
    background-color: #242d45;
    color: #ffffff;
}

but instead of changing the background-color for the Term/Element TH, it changes the background-color for whatever element is clicked on.


Solution

  • First add a static ID to your IG.

    Then you can use the following css snippet:

    
    /*
    
    where the value between the quotation marks ("") is the index of the column heading
    
    */
    #my-static-id  th[data-idx="0"] { 
      background-color: rebeccapurple;
    }
    
    #my-static-id  th[data-idx="1"] {
      background-color: green;
    }
    
    

    The result:

    enter image description here