Add support for column defaultSortOrder (#6449) (#8111)

Fixes #6449

components/table/Column.tsx

@@ -12,6 +12,7 @@ export interface ColumnProps<T> {
   filterDropdownVisible?: boolean;
   onFilterDropdownVisibleChange?: (visible: boolean) => void;
   sorter?: boolean | ((a: any, b: any) => number);
+  defaultSortOrder?: 'ascend' | 'descend';
   colSpan?: number;
   width?: string | number;
   className?: string;

components/table/Table.tsx

@@ -139,7 +139,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),
@@ -303,16 +303,33 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return filters;
   }
 
+  getDefaultSortOrder(columns?) {
+    const definedSortState = this.getSortStateFromColumns(columns);
+
+    let defaultSortedColumn = flatFilter(columns || [], column => column.defaultSortOrder != null)[0];
+
+    if (defaultSortedColumn && !definedSortState.sortColumn) {
+      return {
+        sortColumn: defaultSortedColumn,
+        sortOrder: defaultSortedColumn.defaultSortOrder,
+      };
+    }
+
+    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,
@@ -707,10 +724,9 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
       if (column.sorter) {
         let isSortColumn = this.isSortColumn(column);
         if (isSortColumn) {
-          column.className = column.className || '';
-          if (sortOrder) {
-            column.className += ` ${prefixCls}-column-sort`;
-          }
+          column.className = classNames(column.className, {
+            [`${prefixCls}-column-sort`]: sortOrder,
+          });
         }
         const isAscend = isSortColumn && sortOrder === 'ascend';
         const isDescend = isSortColumn && sortOrder === 'descend';

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

@@ -18,13 +18,16 @@ describe('Table.sorter', () => {
     { key: 3, name: 'Jerry' },
   ];
 
-  function createTable(props) {
+  function createTable(tableProps, columnProps = {}) {
     return (
       <Table
-        columns={[column]}
+        columns={[{
+          ...column,
+          ...columnProps,
+        }]}
         dataSource={data}
         pagination={false}
-        {...props}
+        {...tableProps}
       />
     );
   }
@@ -38,7 +41,23 @@ describe('Table.sorter', () => {
     expect(wrapper.find('thead')).toMatchSnapshot();
   });
 
-  it.only('sort records', () => {
+  it('default sort order ascend', () => {
+    const wrapper = mount(createTable({}, {
+      defaultSortOrder: 'ascend',
+    }));
+
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
+  });
+
+  it('default sort order descend', () => {
+    const wrapper = mount(createTable({}, {
+      defaultSortOrder: 'descend',
+    }));
+
+    expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+  });
+
+  it('sort records', () => {
     const wrapper = mount(createTable());
 
     wrapper.find('.ant-table-column-sorter-up').simulate('click');

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -7868,7 +7868,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     </span>
                   </th>
                   <th
-                    class=""
+                    class="ant-table-column-sort"
                   >
                     <span>
                       Age
@@ -7884,7 +7884,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                           />
                         </span>
                         <span
-                          class="ant-table-column-sorter-down off"
+                          class="ant-table-column-sorter-down on"
                           title="↓"
                         >
                           <i
@@ -7930,29 +7930,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
               <tbody
                 class="ant-table-tbody"
               >
-                <tr
-                  class="ant-table-row  ant-table-row-level-0"
-                >
-                  <td
-                    class=""
-                  >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
-                    John Brown
-                  </td>
-                  <td
-                    class=""
-                  >
-                    32
-                  </td>
-                  <td
-                    class=""
-                  >
-                    New York No. 1 Lake Park
-                  </td>
-                </tr>
                 <tr
                   class="ant-table-row  ant-table-row-level-0"
                 >
@@ -7966,7 +7943,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     Jim Green
                   </td>
                   <td
-                    class=""
+                    class="ant-table-column-sort"
                   >
                     42
                   </td>
@@ -7986,10 +7963,33 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                       class="ant-table-row-indent indent-level-0"
                       style="padding-left:0px"
                     />
-                    Joe Black
+                    John Brown
+                  </td>
+                  <td
+                    class="ant-table-column-sort"
+                  >
+                    32
                   </td>
                   <td
                     class=""
+                  >
+                    New York No. 1 Lake Park
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row  ant-table-row-level-0"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="ant-table-row-indent indent-level-0"
+                      style="padding-left:0px"
+                    />
+                    Joe Black
+                  </td>
+                  <td
+                    class="ant-table-column-sort"
                   >
                     32
                   </td>
@@ -8012,7 +8012,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     Jim Red
                   </td>
                   <td
-                    class=""
+                    class="ant-table-column-sort"
                   >
                     32
                   </td>

components/table/demo/head.md

@@ -17,6 +17,8 @@ Use `filters` to generate filter menu in columns, `onFilter` to determine filter
 
 Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
 
+Uses `defaultSortOrder` to make a column sorted by default.
+
 ````jsx
 import { Table } from 'antd';
 
@@ -47,6 +49,7 @@ const columns = [{
 }, {
   title: 'Age',
   dataIndex: 'age',
+  defaultSortOrder: 'descend',
   sorter: (a, b) => a.age - b.age,
 }, {
   title: 'Address',
@@ -89,5 +92,9 @@ 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}
+/>, mountNode);
 ````

components/table/index.en-US.md

@@ -76,7 +76,7 @@ const columns = [{
 | onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) |  |
 | onRowClick | Callback executed when a row is clicked | Function(record, index, event) | - |
 | onRowContextMenu | Callback executed when right click on a row | Function(record, index, event) | - |
-| onRowDoubleClick | Callback executed when a row is double clicked | Function(record, index, event) | - |
+| onRowDoubleClick|  Callback executed when a row is double clicked | Function(record, index, event) | - |
 | onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event) | - |
 | onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event) | - |
 
@@ -101,6 +101,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
 | sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
 | sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
+| defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - |
 | title | Title of this column | string\|ReactNode | - |
 | width | Width of this column | string\|number | - |
 | onCellClick | Callback executed when table cell is clicked | Function(record, event) | - |