sort by click column area

components/locale-provider/default.tsx

@@ -16,6 +16,7 @@ export default {
     emptyText: 'No data',
     selectAll: 'Select current page',
     selectInvert: 'Invert current page',
+    sortTitle: 'Sort',
   },
   Modal: {
     okText: 'OK',

components/locale-provider/zh_CN.tsx

@@ -16,6 +16,7 @@ export default {
     emptyText: '暂无数据',
     selectAll: '全选当页',
     selectInvert: '反选当页',
+    sortTitle: '排序',
   },
   Modal: {
     okText: '确定',

components/table/Table.tsx

@@ -355,24 +355,22 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     };
   }
 
-  toggleSortOrder(order: 'ascend'|'descend', column: ColumnProps<T>) {
+  toggleSortOrder(column: ColumnProps<T>) {
-    let { sortColumn, sortOrder } = this.state;
+    const { sortOrder } = this.state;
     // 只同时允许一列进行排序，否则会导致排序顺序的逻辑问题
-    let isSortColumn = this.isSortColumn(column);
+    let newSortOrder: 'descend' | 'ascend' | undefined;
-    if (!isSortColumn) {  // 当前列未排序
+    // 切换排序状态，按照降序/升序/不排序的顺序
-      sortOrder = order;
+    if (!sortOrder) {
-      sortColumn = column;
+      newSortOrder = 'descend';
-    } else {                      // 当前列已排序
+    } else if (sortOrder === 'descend') {
-      if (sortOrder === order) {  // 切换为未排序状态
+      newSortOrder = 'ascend';
-        sortOrder = undefined;
+    } else {
-        sortColumn = null;
+      newSortOrder = undefined;
-      } else {                    // 切换为排序状态
-        sortOrder = order;
-      }
     }
+
     const newState = {
-      sortOrder,
+      sortOrder: newSortOrder,
-      sortColumn,
+      sortColumn: newSortOrder ? column : null,
     };
 
     // Controlled
@@ -380,7 +378,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       this.setState(newState);
     }
 
-    const onChange = this.props.onChange;
+    const { onChange } = this.props;
     if (onChange) {
       onChange.apply(null, this.prepareParamsArguments({
         ...this.state,
@@ -791,13 +789,11 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
           <div className={`${prefixCls}-column-sorter`} key="sorter">
             <Icon
               className={`${prefixCls}-column-sorter-up ${isAscend ? 'on' : 'off'}`}
-              title="↑"
               type="caret-up"
               theme="filled"
             />
             <Icon
               className={`${prefixCls}-column-sorter-down ${isDescend ? 'on' : 'off'}`}
-              title="↓"
               type="caret-down"
               theme="filled"
             />
@@ -824,11 +820,12 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
           const headerCellProps = column.onHeaderCell ? column.onHeaderCell(columnProps) : {};
           return {
             onClick: (e: MouseEvent) => {
-              this.handleColumnHeaderClick(e);
+              this.toggleSortOrder(column);
               if (headerCellProps && headerCellProps.onClick) {
                 headerCellProps.onClick(e);
               }
             },
+            title: locale.sortTitle,
             ...headerCellProps,
           };
         },
@@ -836,10 +833,6 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     });
   }
 
-  handleColumnHeaderClick = (e: MouseEvent) => {
-    console.log(e);
-  }
-
   handleShowSizeChange = (current: number, pageSize: number) => {
     const pagination = this.state.pagination;
     pagination.onShowSizeChange!(current, pageSize);

components/table/interface.tsx

@@ -57,6 +57,7 @@ export interface TableLocale {
   emptyText?: React.ReactNode | (() => React.ReactNode);
   selectAll?: React.ReactNode;
   selectInvert?: React.ReactNode;
+  sortTitle?: string;
 }
 
 export type RowSelectionType = 'checkbox' | 'radio';

components/table/style/index.less

@@ -84,6 +84,9 @@
         height: 4px;
         transition: all .3s;
         display: block;
+        &.on {
+          color: @primary-color;
+        }
       }
 
       &-down {
@@ -128,6 +131,10 @@
     &.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
       right: 28px + 8px;
     }
+
+    &.@{table-prefix-cls}-column-has-sorters {
+      user-select: none;
+    }
   }
 
   &-thead > tr:first-child > th {