Coloring the column headers

Apps (Frontend)
1

Hello together,

I try to alter the color of my column headers but I didn’t find a proper example in the documentation.
Here is a screenshot for a better understanding of what I’m trying to achieve. The green arrows mark the column headers, which I want to color grey:

Bildschirmfoto 2022-07-18 um 14.16.55
Bildschirmfoto 2022-07-18 um 14.16.553180×414 19.9 KB

Thank you!

2

If there is a possibility with the CustomCellHighlighting-Component it would be great, because we use this component already with this table :slight_smile:

3

Hi, as far as i know, there is no way with the CC (at least for the headers, the cells on the left can be colored via CC).
But you can use CSS here for both:

#yourTableContainer th {color:var(–color-iron)}
#yourTableContainer tr td:first-child {color:var(–color-iron) !important}

4

Yes, it worked. This is my CSS:
div#table_GTIN_con thead th { background-color: var(–color-iron); }

Thank you very much for your help, also to @nasir.ahmad who showed me the way with the developer Tools :slight_smile:

1 Like
5

It is also possible to control the color of the header via global styles:

"styles": {
    "table": {
      "header": {
        "backgroundColor": "var(--color-iron)" 
      }
    }
  }