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.

score 19 · Answer 1 · answered Jun 23 '17 at 03:38

19

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?

answered Jun 23 '17 at 03:38

kalpana pagariya

354
1
3
10

This is what I meant by "ordinary CSS" and it is certainly a correct way of doing it. There is no point in adding component level attributes to do the same thing that you can already do in CSS. It would just make the API unnecessarily bloated. – Jesper We Jun 24 '17 at 13:45
You can add your own `className="xxx"` if you don't want to override antd's classes. – Jesper We Jun 24 '17 at 13:48
@kalpana_pagariya Two years later and I am facing a [similar issue with configuring antd tables](https://stackoverflow.com/questions/58287043/) -- could you please elaborate on how you overwrote the antd style class? – B--rian Oct 08 '19 at 13:17

score 8 · Accepted Answer · answered Jun 22 '17 at 08:41

8

You can use the <Table.Column title={<...any react node...>}> attribute in combination with ordinary CSS.

answered Jun 22 '17 at 08:41

Jesper We

5,977
2
26
40

1

But correct me if I'm wrong but this will only effect the inner cell of the header, you can't use this method to set the color of the whole header? – TOHB Jan 15 '22 at 11:25

score 2 · Answer 3 · answered Apr 14 '21 at 13:15

The solution offered by kalpana did not work for me. What did work (Ant V4.10.x) was this:

thead > tr > th {
  background-color: yellow;
}

Note that the !important setting is not required to make this work.

Similarly, if you want to target the cells of the table, you can use:

tbody > tr > td {
  background-color: yellow;
}

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

3 Answers3

Linked