Can't remove white header in react-data-table-component

Issue

I am trying to remove the white background in the header of a react-data-table-component.

I’m also fine with removing the header in its total, but also can’t figure out how.

Below my code of the table component

    <DataTable                                  
        className="dataTables_wrapper"
        columns={this.columns()}
        data={data}
        progressPending={loading}
        pointerOnHover
        />

I tried to change the style of the component with this css code but it doesn’t seem to work…

.dataTables_wrapper .rdt_TableHeader {
    background-color: blue
    color: blue;
}
.dataTables_wrapper .rdt_TableHead {
    background-color: blue;
    color: blue;
}

Example of how my table looks right now

Solution

You can use noHeader attribute.

 <DataTable                                  
    className="dataTables_wrapper"
    columns={this.columns()}
    data={data}
    progressPending={loading}
    pointerOnHover
    noHeader={true}
    />

Documentation

Answered By – Onurgule

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published