CODEWITHSUNDEEP
cssgridstylesinteractiveoracle-apex-20.1
LG-C
LG-C

Reputation: 47

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.

Upvotes: 1

Views: 2467

Answers (1)

davidm
davidm

Reputation: 1760

First add a static ID to your IG.

  • Static ID: my-static-id

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

Upvotes: 1

Related Questions