Data Table : changing background color of header row

[Manav]

Hi,

Can we change the background color of datatable header rows. I tried using background-color property but in vain.

[leventgny]

Try with more specific css selectors like;

Code: Select all

<p:dataTable styleClass="myTable" ... />

.ui-datatable.myTable th {
    background: red;
}

[Manav]

Hi,

Thanks for looking into it. But it doesn't work. The row bgcolor is still the default one - light grey.

[cagatay.civici]

Check your css, your theme can overwrite with a background image.

[paulg]

I am having the same issue. I can not figure out how to change the background color of the headers or footers of a data table. Spplying the a style only chnges the color of a data cell, not a header cell.

Code: Select all

    <p-dataTable [value]="_countriesHC"
                 [rows]="5" [paginator]="true" [pageLinks]="3"
                 [responsive]="true" [stacked]="stacked">

        <p-column field="DisplayName" header="Country Name" sortable="true" style="background-color:rgba(255, 0, 0, 0.51);"></p-column>
        <p-column field="CountryId" header="Country Guid" style="background-color:rgba(0, 0, 255, 0.51);"></p-column>
        <p-column field="Abbreviation" header="Country Abbreviation" sortable="true" style="background-color:rgba(0, 128, 0, 0.53);"></p-column>


        <footer>
            <div class="ui-helper-clearfix" style="width:100%">
                <button pButton type="button" icon="fa-plus" iconPos="left" label="Add" style="float:left;" (click)="hello()"></button>
            </div>
        </footer>

    </p-dataTable>

I have also not been able to figure out how to apply a different theme for PrimiNG to use either.

The docs say:

Code: Select all

<context-param>  
    <param-name>primefaces.THEME</param-name>  
    <param-value>bootstrap</param-value>  
</context-param>  

but does not say where to put this code. I am using the DataTable in a MVC.Net application running Angular2 on the frontEnd, inside an angular2 component template.

[paulg]

Try with more specific css selectors like;

Code: Select all

<p:dataTable styleClass="myTable" ... />

.ui-datatable.myTable th {
    background: red;
}

Since it is apparent you are using some attribute names other than the standard CSS attributes, such as "background" instead of "background-color", where are all these redefined CSS attributes defined?

[mert.sincan]

Hi Paulg,

For PrimeNg, please see this issues;
https://github.com/primefaces/primeng/issues/321
https://github.com/primefaces/primeng/issues/329