Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add sortColumn to title render #19012

Merged
merged 2 commits into from Sep 26, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/table/Table.tsx
Expand Up @@ -1203,12 +1203,13 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
}

renderColumnTitle(title: ColumnProps<T>['title']) {
const { filters, sortOrder } = this.state;
const { filters, sortOrder, sortColumn } = this.state;
// https://github.com/ant-design/ant-design/issues/11246#issuecomment-405009167
if (title instanceof Function) {
return title({
filters,
sortOrder,
sortColumn,
});
}
return title;
Expand Down
2 changes: 1 addition & 1 deletion components/table/index.en-US.md
Expand Up @@ -138,7 +138,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| 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 | - | |
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 3.15.2 |
| title | Title of this column | ReactNode\|({ sortOrder, filters }) => ReactNode | - | |
| title | Title of this column | ReactNode\|({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string\|number | - | |
| onCell | Set props on per cell | Function(record, rowIndex) | - | |
| onFilter | Callback executed when the confirm filter button is clicked | Function | - | |
Expand Down
2 changes: 1 addition & 1 deletion components/table/index.zh-CN.md
Expand Up @@ -143,7 +143,7 @@ const columns = [
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | Function\|boolean | - | |
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - | |
| sortDirections | 支持的排序方式,取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` | 3.15.2 |
| title | 列头显示文字(函数用法 `3.10.0` 后支持) | ReactNode\|({ sortOrder, filters }) => ReactNode | - | |
| title | 列头显示文字(函数用法 `3.10.0` 后支持) | ReactNode\|({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | 列宽度([指定了也不生效?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string\|number | - | |
| onCell | 设置单元格属性 | Function(record, rowIndex) | - | |
| onFilter | 本地模式下,确定筛选的运行函数 | Function | - | |
Expand Down
6 changes: 5 additions & 1 deletion components/table/interface.tsx
Expand Up @@ -29,7 +29,11 @@ export interface FilterDropdownProps {
export interface ColumnProps<T> {
title?:
| React.ReactNode
| ((options: { filters: TableStateFilters; sortOrder?: SortOrder }) => React.ReactNode);
| ((options: {
filters: TableStateFilters;
sortOrder?: SortOrder;
sortColumn?: ColumnProps<T> | null;
}) => React.ReactNode);
key?: React.Key;
dataIndex?: string; // Note: We can not use generic type here, since we need to support nested key, see #9393
render?: (text: any, record: T, index: number) => React.ReactNode;
Expand Down