javascriptcssreactjsreact-data-table-component

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


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