This commit is contained in:
愚道 2018-05-03 16:58:50 +08:00
commit 013df45a70
4 changed files with 23 additions and 7 deletions

View File

@ -333,7 +333,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
}
return (a: T, b: T) => {
const result = (sortColumn!.sorter as CompareFn<T>)(a, b);
const result = (sortColumn!.sorter as CompareFn<T>)(a, b, sortOrder);
if (result !== 0) {
return (sortOrder === 'descend') ? -result : result;
}
@ -341,7 +341,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
};
}
toggleSortOrder(order: string, column: ColumnProps<T>) {
toggleSortOrder(order: 'ascend'|'descend', column: ColumnProps<T>) {
let { sortColumn, sortOrder } = this.state;
// 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题
let isSortColumn = this.isSortColumn(column);
@ -350,7 +350,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
sortColumn = column;
} else { // 当前列已排序
if (sortOrder === order) { // 切换为未排序状态
sortOrder = '';
sortOrder = undefined;
sortColumn = null;
} else { // 切换为排序状态
sortOrder = order;

View File

@ -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 }));

View File

@ -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';

View File

@ -5,7 +5,7 @@ import { Store } from './createStore';
import { RadioChangeEvent } from '../radio';
import { CheckboxChangeEvent } from '../checkbox';
export type CompareFn<T> = ((a: T, b: T) => number);
export type CompareFn<T> = ((a: T, b: T, sortOrder?: 'ascend' | 'descend') => number);
export type ColumnFilterItem = { text: string; value: string, children?: ColumnFilterItem[] };
export interface ColumnProps<T> {
@ -28,7 +28,7 @@ export interface ColumnProps<T> {
fixed?: boolean | ('left' | 'right');
filterIcon?: React.ReactNode;
filteredValue?: any[];
sortOrder?: boolean | ('ascend' | 'descend');
sortOrder?: 'ascend' | 'descend';
children?: ColumnProps<T>[];
onCellClick?: (record: T, event: any) => void;
onCell?: (record: T) => any;
@ -127,7 +127,7 @@ export interface TableState<T> {
pagination: TablePaginationConfig;
filters: TableStateFilters;
sortColumn: ColumnProps<T> | null;
sortOrder: string;
sortOrder: 'ascend' | 'descend' | undefined;
}
export type SelectionItemSelectFn = (key: string[]) => any;