diff --git a/components/table/Table.tsx b/components/table/Table.tsx index de20597118..5dd735576a 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -337,7 +337,7 @@ export default class Table extends React.Component, TableState< } return (a: T, b: T) => { - const result = (sortColumn!.sorter as CompareFn)(a, b); + const result = (sortColumn!.sorter as CompareFn)(a, b, sortOrder); if (result !== 0) { return (sortOrder === 'descend') ? -result : result; } @@ -345,7 +345,7 @@ export default class Table extends React.Component, TableState< }; } - toggleSortOrder(order: string, column: ColumnProps) { + toggleSortOrder(order: 'ascend'|'descend', column: ColumnProps) { let { sortColumn, sortOrder } = this.state; // 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题 let isSortColumn = this.isSortColumn(column); @@ -354,7 +354,7 @@ export default class Table extends React.Component, TableState< sortColumn = column; } else { // 当前列已排序 if (sortOrder === order) { // 切换为未排序状态 - sortOrder = ''; + sortOrder = undefined; sortColumn = null; } else { // 切换为排序状态 sortOrder = order; diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js index 7cc8c5a19c..b0cfd93261 100644 --- a/components/table/__tests__/Table.sorter.test.js +++ b/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 })); diff --git a/components/table/demo/head.md b/components/table/demo/head.md index c08228648f..71e9a69c53 100644 --- a/components/table/demo/head.md +++ b/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'; diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 273b383c78..5f0009d3aa 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -5,7 +5,7 @@ import { Store } from './createStore'; import { RadioChangeEvent } from '../radio'; import { CheckboxChangeEvent } from '../checkbox'; -export type CompareFn = ((a: T, b: T) => number); +export type CompareFn = ((a: T, b: T, sortOrder?: 'ascend' | 'descend') => number); export type ColumnFilterItem = { text: string; value: string, children?: ColumnFilterItem[] }; export interface ColumnProps { @@ -28,7 +28,7 @@ export interface ColumnProps { fixed?: boolean | ('left' | 'right'); filterIcon?: React.ReactNode; filteredValue?: any[]; - sortOrder?: boolean | ('ascend' | 'descend'); + sortOrder?: 'ascend' | 'descend'; children?: ColumnProps[]; onCellClick?: (record: T, event: any) => void; onCell?: (record: T) => any; @@ -127,7 +127,7 @@ export interface TableState { pagination: TablePaginationConfig; filters: TableStateFilters; sortColumn: ColumnProps | null; - sortOrder: string; + sortOrder: 'ascend' | 'descend' | undefined; } export type SelectionItemSelectFn = (key: string[]) => any;