Table: Add ability to customize header and sorter

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

What problem does this feature solve?

It seems like right now there is no possibility to customize table’s header clickables such as sorter and filter, as well as their positions.

E.g. A lot of users are used to sorters with toggle logic tied to header title and sort icon being changed upon that action. There is already an open issue for this particular example.

But there, probably, could be more and ideally a solution would be flexible enough to cover other cases. Worth covering situations for when a specific column can be changed and not only on a table level.

With that being told, table should be able to provide ways to render custom header as well as to fire sorter callback. Adding such API will give developers to build their tables upon antd more easily.

What does the proposed API look like?

Below is a raw schematic API that supposedly explains the idea

static defaultProps = {
  ColumnHeader: (...args) => (
    <React.Fragment>
       {this.props.renderColumnTitle(...args)}
       {this.props.renderColumnSorter(...args)}
       {this.props.renderColumnFilter(...args)}
   </React.Fragment>
 )
}

...
// https://github.com/ant-design/ant-design/blob/bf5b6ae1f3b5da4629a7d10a2d1764eaa3fbbb04/components/table/Table.tsx#L760
column.title = (
  <span key={key}>
    {this.props.ColumnHeader(column, this.props, this, ...)}
  </span>
);



...
<Table
   renderColumnSorter: (col, props, ctx) => {
     const icon = col.sorter.order === 'ascend' ? 'up' : 'down';
     const direction = col.sorter.order === 'ascend' ? 'descend' : 'ascend;

      return <Button icon={icon} onClick={ctx.toggleSortOrder(direction) />
   }

[afc163]

I see, we could support passing function to title:

columns={[{
  title: (filters, sortOrder) => <div>Title</div>,
}]}

[vavdav]

@RixBai how do you hide default sort icons in the header?