Add the ability to pass `className` to the header of a Table

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Currently, with the Table component, it is very easy to style the Table as a whole (using className), and very easy to style any individual row (using the rowClassName function). However, styling the header seems impossible from within the component.

If we pass a className to the table, targeting thead or .ant-table-thead within the referenced style doesn’t affect the header.

This makes the experience of altering the header of table very frustrating!! Considering that Ant Design is being advertised as an easy-to-use toolkit for building custom UIs, I think it is important that headers should be easily style-able. It is very common to want the header to look different than the rest of the rows, and currently - it is non-trivial. We can override the less variable for the header background (table-header-bg), but then what if we want to change the text-color too? What about other CSS variables?

There is no straightforward way to do this that I can find, and I think adding the ability to pass a headerClassName to the Table would be very elegant & useful to many developers/designers.

I have also asked this question here: https://github.com/react-component/table/issues/228

What does the proposed API look like?

import React from 'react';
import { Table } from 'antd';
import { css } from 'react-emotion';

const header = css({ backgroundColor: 'rgb(100, 108, 140)', color: 'white', margin: '50px'});
const body = css({ backgroundColor: 'green' });

const styledTable = ({data, columns}) => ( 
  <Table 
    dataSource={data} 
    columns={columns} 
    className={body} // note - this works currently! (but doesn't affect the header)
    headerClassName={header}  // I would love this! 
  />
));

Cheers, thanks for taking the time to read this!


<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->

[apieceofbart]

@thisissami This should work:

const body = css({
  backgroundColor: 'green',
  '& thead > tr > th': {
    backgroundColor: 'blue'
  }
})

If you are looking for a library and this is the only thing you’re missing in ant then let’s fix that and help others at the same time 😃

[thisissami]

@apieceofbart thanks for your help! Here’s a full react component anybody can grab if they’re having an issue with this in the future. (also addresses the issue of applying borders to a row as a whole)

import React from 'react';
import { Table } from 'antd';
import { css } from 'react-emotion';

const tableCSS = css({
  margin: '40px 120px',
  backgroundColor: 'white',
  '& table': {
    borderCollapse: 'collapse'
  },
  '& thead > tr > th': {
    backgroundColor: 'darkblue',
    color: 'white',
  },
  '& thead > tr': {
    borderWidth: '2px',
    borderColor: 'yellow',
    borderStyle: 'solid'
  }
});

const StyledTable = ({ data, columns }) => (
    <Table
      className={tableCSS}
      dataSource={data}
      columns={columns}
    />
);