Add support for table default sort order (#6449)

components/table/Table.tsx

@@ -58,6 +58,11 @@ export interface TableRowSelection<T> {
   selections?: SelectionDecorator[] | boolean;
 }
 
+export interface DefaultColumnSortOrder {
+  columnTitle: string;
+  sortOrder: 'ascend' | 'descend';
+}
+
 export interface TableProps<T> {
   prefixCls?: string;
   dropdownPrefixCls?: string;
@@ -70,6 +75,7 @@ export interface TableProps<T> {
   rowClassName?: (record: T, index: number) => string;
   expandedRowRender?: any;
   defaultExpandedRowKeys?: string[] | number[];
+  defaultSortOrder?: DefaultColumnSortOrder;
   expandedRowKeys?: string[] | number[];
   expandIconAsCell?: boolean;
   expandIconColumnIndex?: number;
@@ -156,7 +162,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     this.columns = props.columns || normalizeColumns(props.children);
 
     this.state = {
-      ...this.getSortStateFromColumns(),
+      ...this.getDefaultSortOrder(this.columns),
       // 减少状态
       filters: this.getFiltersFromColumns(),
       pagination: this.getDefaultPagination(props),
@@ -332,16 +338,32 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return filters;
   }
 
+  getDefaultSortOrder(columns?) {
+    const definedSortState = this.getSortStateFromColumns(columns);
+
+    if (this.props.defaultSortOrder && !definedSortState.sortColumn) {
+      let columnTitle = this.props.defaultSortOrder.columnTitle;
+      return {
+        sortColumn: flatFilter(columns || this.columns || [], column => column.title === columnTitle)[0],
+        sortOrder: this.props.defaultSortOrder.sortOrder
+      };
+    }
+
+    return definedSortState;
+  }
+
   getSortStateFromColumns(columns?) {
-    // return fisrt column which sortOrder is not falsy
+    // return first column which sortOrder is not falsy
     const sortedColumn =
       this.getSortOrderColumns(columns).filter(col => col.sortOrder)[0];
+
     if (sortedColumn) {
       return {
         sortColumn: sortedColumn,
         sortOrder: sortedColumn.sortOrder,
       };
     }
+
     return {
       sortColumn: null,
       sortOrder: null,

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

@@ -38,6 +38,28 @@ describe('Table.sorter', () => {
     expect(wrapper.find('thead')).toMatchSnapshot();
   });
 
+  it('default sort order ascend', () => {
+    const wrapper = mount(createTable({
+      defaultSortOrder: {
+        columnTitle: 'Name',
+        sortOrder: 'ascend',
+      },
+    }));
+
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
+  });
+
+  it('default sort order descend', () => {
+    const wrapper = mount(createTable({
+      defaultSortOrder: {
+        columnTitle: 'Name',
+        sortOrder: 'descend',
+      },
+    }));
+
+    expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+  });
+
   it('sort records', () => {
     const wrapper = mount(createTable());
 

components/table/demo/head.md

@@ -89,5 +89,10 @@ function onChange(pagination, filters, sorter) {
   console.log('params', pagination, filters, sorter);
 }
 
-ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
+ReactDOM.render(<Table
+  columns={columns}
+  dataSource={data}
+  onChange={onChange}
+  defaultSortOrder={{ columnTitle: 'Age', sortOrder: 'descend' }}
+/>, mountNode);
 ````

components/table/index.en-US.md

@@ -60,7 +60,8 @@ const columns = [{
 | rowKey        | get row's key, could be a string or function | string\|Function(record):string | 'key' |
 | rowClassName  | get row's className | Function(record, index):string | - |
 | expandedRowRender  | expanded container render for each row | Function | - |
-| defaultExpandedRowKeys | initial expanded row keys | string[] | - |
+| defaultSortOrder | default column sorting | Object({columnTitle, sortOrder}) | - |
+| defaultExpandedRowKeys | initial expanded row keys |  | - |
 | expandedRowKeys | current expanded rows keys | string[] | - |
 | defaultExpandAllRows | expand all rows initially | boolean | false |
 | onExpandedRowsChange | function to call when the expanded rows change | Function(expandedRows) | |