reactjs - How can we configure the Header of ant design table component?

Question

We have requirement where we need to show 'Hide/Show' columns feature on the header of table and also we want to provide different color to the header of table in ant design. Can anyone help me how can we do this? I did not find any control to do it as header rendering is completely internal to component.

Answer 1

What I tried to resolve the background colour issue of header is overwrite the ant style class as below

thead[class*="ant-table-thead"] th{
  background-color: yellow !important;
}

I am not sure if this is the correct way of doing or not. antd should provide the property on Table to configure the header style.

Is there any other better way to do it?