1

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.

LG-C
  • 47
  • 6

1 Answers1

1

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

davidm
  • 1,570
  • 11
  • 24
  • Hi, i am using column groups as well. What if i just want to color the column groups and not column headers? – Velocity Mar 15 '21 at 13:04