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.

Disintegration

Answer 1

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

Suggestibility

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? – Meritorious

Answer 2

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?

Disintegration

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. – Suggestibility

You can add your own className="xxx" if you don't want to override antd's classes. – Suggestibility

@kalpana_pagariya Two years later and I am facing a similar issue with configuring antd tables -- could you please elaborate on how you overwrote the antd style class? – Rettarettig

Answer 3

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;
}

Sumerian

Answer 4

Late answer, but hopefully it helps someone.

If the styling you want to apply via className are one of headerBg, headerColor, headerBorderRadius, headerFilterHoverBg, headerSortActiveBg, headerSortHoverBg, headerSplitColor then you can use the Design token, either on your table alone, or globally so the style is applied across all table headers in your app.

import { ConfigProvider, Table } from 'antd'

<ConfigProvider
  theme={{
    components: {
      Table: {
        headerBg: '#fff' /* example, changes header background color to white */,
        /* other properties: https://ant.design/components/table#design-token */
      },
    },
  }}
>
  <Table />
  {/* or any other component that contains one or more Tables to apply styling to all tables within */}
</ConfigProvider>

Refer to https://ant.design/components/table#design-token for more details about the token, its description, type and default value.

Furthermore, there is showHeader prop on the Table, that hides or shows the header row

If you wish to remove or add a column or update the title of the column (header), update the columns array provided to the Table component accordingly.

Ardor