Header Color *Updated*

[deanparker-web]

Is is possible to change the background color in the header?

I have tried the following and it does not work.

sheet.Range(0, 0, 1, 4).Format = new CellFormat() { BackgroundColor = "#FFFF00" };

[anmcgrath]

Hi @deanparker-web the only way you can do this at the moment is to override the css variables:

.vars[theme='default']{
--row-header-bg-color: #fafafa;
--col-header-bg-color: #fafafa;
--headers-foreground-color: #5c5a5a;
--active-header-bg-color: rgba(121, 150, 179, 0.18);
--header-selected-bg-color: #0a53be;
}

Would setting individual column/row heading colours be something you are interested in?

[deanparker-web]

I have tested the CSS..

<style> .vars[theme='default'] { --row-header-bg-color: #FFFF00; --col-header-bg-color: #fafafa; --headers-foreground-color: #5c5a5a; --active-header-bg-color: rgba(121, 150, 179, 0.18); --header-selected-bg-color: #0a53be; } </style>

Changing row-header sets the col and row color.
Changing col-header appears to do nothing.

As for setting individual heading colors...
Most of the data grids I work with allow you to set the header color (back/text) and type of font ie: bold.
IMO: Fixing the fonts, and colors gives your GUI a polished, professional feel.

A work around I am using, hide headers and put headers in column 1. There is no sorting, etc. but is not needed.

[deanparker-web]

I have come up with another work around that might help other users.
The text is no longer black, but is readable.

<div class="yellow-box"></div>
<Datasheet Sheet="sheet"
           FrozenTopCount="0"
           StickyHeaders="true" />

<style>
    .yellow-box {
        width: 800px; /* Set to width of grid. */
        height: 22px;
        position: absolute;
        top: 7px;
        left: 66px;
        background-color: yellow;
        opacity: 0.5;
        z-index: 99;
        pointer-events: none;
    }
</style>

[deanparker-web]

I am trying to create some of the headers as yellow and some white.

Code to do this, there are 5 titles and I created a box for each one.

<div class="box yellow1">Title 1</div>
<div class="box yellow2">Title 2</div>
<div class="box yellow3">Title 3</div>
<div class="box yellow4">Title 4</div>
<div class="box yellow5">Title 5</div>
<Datasheet Sheet="sheet" StickyHeaders="true" />

Style Sheet

    .box {
        height: 22px;
        position: absolute;
        top: 7px;
        background-color: yellow;
        opacity:1;
        z-index: 99;
        pointer-events: none;
        font-size: 10px;
        font-weight: 600;
        color: black;
        text-align: center;
        line-height: 22px;
    }
    .yellow1 {
        width: 46px;
        left: 66px;
    }
    .yellow2 {
        width: 75px;
        left: 148px;
    }
    .yellow3 {
        width: 69px;
        left: 259px;
    }
    .yellow4 {
        width: 69px;
        left: 364px;
    }
    .yellow5 {
        width: 69px;
        left: 469px;
    }

For white titles code behind

editor.Sheet.Columns.SetHeadings(5, 5, "Title 6");
editor.Sheet.Columns.SetHeadings(6, 6, "Title 7");

[anmcgrath]

Thanks @deanparker-web I've updated in #181 so that the css variables are now correct for the row/col background colours.

For setting specific styles for row/column headers you could use the css:

.row-head[data-row="5"]{
    background:red;
}
.col-head[data-col="5"]{
    background:red;
}

[deanparker-web]

Works Perfectly, thank you.