diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 59b7a461fb..d2d48db31a 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -26,6 +26,7 @@ import { TableComponents, RowSelectionType, TableLocale, + AdditionalCellProps, ColumnProps, CompareFn, TableStateFilters, @@ -805,6 +806,7 @@ export default class Table extends React.Component, TableState< const key = this.getColumnKey(column, i) as string; let filterDropdown; let sortButton; + let onHeaderCell = column.onHeaderCell; const sortTitle = this.getColumnTitle(column.title, {}) || locale.sortTitle; const isSortColumn = this.isSortColumn(column); if ((column.filters && column.filters.length > 0) || column.filterDropdown) { @@ -839,8 +841,27 @@ export default class Table extends React.Component, TableState< /> ); + + onHeaderCell = (col: Column) => { + let colProps: AdditionalCellProps = {}; + // Get original first + if (column.onHeaderCell) { + colProps = { + ...column.onHeaderCell(col), + }; + } + // Add sorter logic + const onHeaderCellClick = colProps.onClick; + colProps.onClick = (...args) => { + this.toggleSortOrder(column); + if (onHeaderCellClick) { + onHeaderCellClick(...args); + } + }; + return colProps; + }; } - const sortTitleString = (sortButton && typeof sortTitle === 'string') ? sortTitle : undefined; + const sortTitleString = sortButton && typeof sortTitle === 'string' ? sortTitle : undefined; return { ...column, className: classNames(column.className, { @@ -854,13 +875,13 @@ export default class Table extends React.Component, TableState< key="title" title={sortTitleString} className={sortButton ? `${prefixCls}-column-sorters` : undefined} - onClick={() => this.toggleSortOrder(column)} > {this.renderColumnTitle(column.title)} {sortButton} , filterDropdown, ], + onHeaderCell, }; }); } diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 51c1d7d6e5..18c650a85a 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -43,6 +43,11 @@ export interface ColumnProps { onHeaderCell?: (props: ColumnProps) => any; } +export interface AdditionalCellProps { + onClick?: React.MouseEventHandler; + [name: string]: any; +} + export interface TableComponents { table?: React.ReactType; header?: {