diff --git a/components/table/Column.tsx b/components/table/Column.tsx index ac86c747ed..72e56cf7c8 100644 --- a/components/table/Column.tsx +++ b/components/table/Column.tsx @@ -12,6 +12,7 @@ export interface ColumnProps { filterDropdownVisible?: boolean; onFilterDropdownVisibleChange?: (visible: boolean) => void; sorter?: boolean | ((a: any, b: any) => number); + defaultSortOrder?: 'ascend' | 'descend'; colSpan?: number; width?: string | number; className?: string; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index c63f1d9e5e..92209fd3c9 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -139,7 +139,7 @@ export default class Table extends React.Component, 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 extends React.Component, 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 extends React.Component, 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'; diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js index 1c826ffb0f..7cc8c5a19c 100644 --- a/components/table/__tests__/Table.sorter.test.js +++ b/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 ( ); } @@ -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'); diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index 6a7c9d6f96..f70895402f 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -7868,7 +7868,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = ` - - - - @@ -7966,7 +7943,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = ` Jim Green @@ -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 + + + + + + @@ -8012,7 +8012,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = ` Jim Red diff --git a/components/table/demo/head.md b/components/table/demo/head.md index 00d76afb02..0718fef0e4 100644 --- a/components/table/demo/head.md +++ b/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(
Age @@ -7884,7 +7884,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = ` /> -
- - John Brown - - 32 - - New York No. 1 Lake Park -
42 + 32 + New York No. 1 Lake Park +
+ + Joe Black + 32 32
, mountNode); +ReactDOM.render(
, mountNode); ```` diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 556b04931e..c63ec002be 100644 --- a/components/table/index.en-US.md +++ b/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) | - |