move sorter logic from div to th cell (#13669)

fix #13467

components/table/Table.tsx

@@ -26,6 +26,7 @@ import {
   TableComponents,
   RowSelectionType,
   TableLocale,
+  AdditionalCellProps,
   ColumnProps,
   CompareFn,
   TableStateFilters,
@@ -805,6 +806,7 @@ export default class Table<T> extends React.Component<TableProps<T>, 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<T> extends React.Component<TableProps<T>, TableState<
             />
           </div>
         );
+
+        onHeaderCell = (col: Column<T>) => {
+          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<T> extends React.Component<TableProps<T>, TableState<
             key="title"
             title={sortTitleString}
             className={sortButton ? `${prefixCls}-column-sorters` : undefined}
-            onClick={() => this.toggleSortOrder(column)}
           >
             {this.renderColumnTitle(column.title)}
             {sortButton}
           </div>,
           filterDropdown,
         ],
+        onHeaderCell,
       };
     });
   }

components/table/interface.tsx

@@ -43,6 +43,11 @@ export interface ColumnProps<T> {
   onHeaderCell?: (props: ColumnProps<T>) => any;
 }
 
+export interface AdditionalCellProps {
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  [name: string]: any;
+}
+
 export interface TableComponents {
   table?: React.ReactType;
   header?: {