diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 0bbe4e7266..dc75b72b41 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -58,6 +58,11 @@ export interface TableRowSelection { selections?: SelectionDecorator[] | boolean; } +export interface DefaultColumnSortOrder { + columnTitle: string; + sortOrder: 'ascend' | 'descend'; +} + export interface TableProps { prefixCls?: string; dropdownPrefixCls?: string; @@ -70,6 +75,7 @@ export interface TableProps { 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 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), @@ -332,16 +338,32 @@ export default class Table extends React.Component, 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, diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js index 43b0dd2edc..ed3d147cd1 100644 --- a/components/table/__tests__/Table.sorter.test.js +++ b/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()); diff --git a/components/table/demo/head.md b/components/table/demo/head.md index 00d76afb02..07ef679de5 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -89,5 +89,10 @@ function onChange(pagination, filters, sorter) { console.log('params', pagination, filters, sorter); } -ReactDOM.render(, mountNode); +ReactDOM.render(
, mountNode); ```` diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 8428b5fe84..83f8c7c183 100644 --- a/components/table/index.en-US.md +++ b/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) | |