Feature: (Issue 10213): Column 'sorter' function is passed 'sortOrder…

…' as param (#10306)

* Table Column's sorter prop can now be provided a fn to which 'sortOrder' is passed as param

* head.md: added documentation for new use of 'sorter' prop function

components/table/Table.tsx

@@ -337,15 +337,15 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     }
 
     return (a: T, b: T) => {
-      const result = (sortColumn!.sorter as CompareFn<T>)(a, b);
+      const result = (sortColumn!.sorter as CompareFn<T>)(a, b, sortOrder);
       if (result !== 0) {
         return (sortOrder === 'descend') ? -result : result;
       }
       return 0;
     };
   }
 
-  toggleSortOrder(order: string, column: ColumnProps<T>) {
+  toggleSortOrder(order: 'ascend'|'descend', column: ColumnProps<T>) {
     let { sortColumn, sortOrder } = this.state;
     // 只同时允许一列进行排序，否则会导致排序顺序的逻辑问题
     let isSortColumn = this.isSortColumn(column);
@@ -354,7 +354,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       sortColumn = column;
     } else {                      // 当前列已排序
       if (sortOrder === order) {  // 切换为未排序状态
-        sortOrder = '';
+        sortOrder = undefined;
         sortColumn = null;
       } else {                    // 切换为排序状态
         sortOrder = order;

components/table/__tests__/Table.sorter.test.js

@@ -74,6 +74,20 @@ describe('Table.sorter', () => {
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
   });
 
+  it('provides sortOrder in the sorterFn', () => {
+    let actualSortOrder;
+    mount(createTable({ },
+      {
+        sortOrder: 'ascend',
+        sorter: (a, b, sortOrder) => {
+          actualSortOrder = sortOrder;
+          return sorterFn(a, b);
+        },
+      },
+    ));
+    expect(actualSortOrder).toEqual('ascend');
+  });
+
   it('fires change event', () => {
     const handleChange = jest.fn();
     const wrapper = mount(createTable({ onChange: handleChange }));

components/table/demo/head.md

@@ -17,10 +17,12 @@ title:
 
 Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
 
-Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
+Use `sorter` to make a column sortable. `sorter` can be a function of the type `function(a, b) { ... }` for sorting data locally.
 
 Uses `defaultSortOrder` to make a column sorted by default.
 
+If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
+
 ````jsx
 import { Table } from 'antd';
 

components/table/interface.tsx

@@ -5,7 +5,7 @@ import { Store } from './createStore';
 import { RadioChangeEvent } from '../radio';
 import { CheckboxChangeEvent } from '../checkbox';
 
-export type CompareFn<T> = ((a: T, b: T) => number);
+export type CompareFn<T> = ((a: T, b: T, sortOrder?: 'ascend' | 'descend') => number);
 export type ColumnFilterItem = { text: string; value: string, children?: ColumnFilterItem[] };
 
 export interface ColumnProps<T> {
@@ -28,7 +28,7 @@ export interface ColumnProps<T> {
   fixed?: boolean | ('left' | 'right');
   filterIcon?: React.ReactNode;
   filteredValue?: any[];
-  sortOrder?: boolean | ('ascend' | 'descend');
+  sortOrder?: 'ascend' | 'descend';
   children?: ColumnProps<T>[];
   onCellClick?: (record: T, event: any) => void;
   onCell?: (record: T) => any;
@@ -127,7 +127,7 @@ export interface TableState<T> {
   pagination: TablePaginationConfig;
   filters: TableStateFilters;
   sortColumn: ColumnProps<T> | null;
-  sortOrder: string;
+  sortOrder: 'ascend' | 'descend' | undefined;
 }
 
 export type SelectionItemSelectFn = (key: string[]) => any;