mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
deps: upgrade rc-table (#2958)
* feat: remove Table columns paging, close: #2883 * css: add style for table multi-header * feat: multi-header supports fitler & sorter and so on * feat: multi-heaader works with Table[scroll.y] * feat: multi-header should works with Table[scroll.x] * style: update code style to please lint
This commit is contained in:
Benjy Cui
偏右
parent
4026221d45
commit
77a45f0b00
@ -7,7 +7,7 @@ import Pagination from '../pagination';
|
||||
import Icon from '../icon';
|
||||
import Spin from '../spin';
|
||||
import classNames from 'classnames';
|
||||
import { flatArray } from './util';
|
||||
import { flatArray, treeMap } from './util';
|
||||
import assign from 'object-assign';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
@ -280,7 +280,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
}
|
||||
|
||||
getFilteredValueColumns(columns?) {
|
||||
return (columns || this.props.columns || []).filter(column => 'filteredValue' in column);
|
||||
return (columns || this.props.columns || []).filter(column => column.filteredValue);
|
||||
}
|
||||
|
||||
getFiltersFromColumns(columns?) {
|
||||
@ -373,7 +373,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
const newState = {
|
||||
selectionDirty: false,
|
||||
pagination,
|
||||
filters: null,
|
||||
filters: {},
|
||||
};
|
||||
const filtersToSetState = assign({}, filters);
|
||||
// Remove filters which is controlled
|
||||
@ -631,7 +631,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
renderColumnsDropdown(columns) {
|
||||
const { sortOrder } = this.state;
|
||||
const locale = this.getLocale();
|
||||
return columns.map((originColumn, i) => {
|
||||
return treeMap(columns, (originColumn, i) => {
|
||||
let column = assign({}, originColumn);
|
||||
let key = this.getColumnKey(column, i);
|
||||
let filterDropdown;
|
||||
|
||||
125
components/table/demo/grouping-columns.md
Normal file
125
components/table/demo/grouping-columns.md
Normal file
@ -0,0 +1,125 @@
|
||||
---
|
||||
order: 20
|
||||
title:
|
||||
en-US: Grouping table head
|
||||
zh-CN: 表头分组
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`columns[n]` 可以内嵌 `children`，以渲染分组表头。
|
||||
|
||||
## en-US
|
||||
|
||||
Group table head with `columns[n].children`。
|
||||
|
||||
```jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
filters: [{
|
||||
text: '姓李的',
|
||||
value: '李',
|
||||
}, {
|
||||
text: '姓胡的',
|
||||
value: '胡',
|
||||
}],
|
||||
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
||||
},
|
||||
{
|
||||
title: '其它',
|
||||
children: [
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: 100,
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
children: [
|
||||
{
|
||||
title: '街道',
|
||||
dataIndex: 'street',
|
||||
key: 'street',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '小区',
|
||||
children: [
|
||||
{
|
||||
title: '单元',
|
||||
dataIndex: 'building',
|
||||
key: 'building',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '门牌',
|
||||
dataIndex: 'number',
|
||||
key: 'number',
|
||||
width: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '公司',
|
||||
children: [
|
||||
{
|
||||
title: '地址',
|
||||
dataIndex: 'companyAddress',
|
||||
key: 'companyAddress',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
width: 200,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
key: 'gender',
|
||||
width: 60,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: '胡彦祖',
|
||||
age: Math.ceil(Math.random() * 100),
|
||||
street: '拱墅区和睦街道',
|
||||
building: 3,
|
||||
number: 2035,
|
||||
companyAddress: '西湖区湖底公园',
|
||||
companyName: '湖底有限公司',
|
||||
gender: '男',
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
bordered size="middle"
|
||||
scroll={{ x: 1010, y: 240 }}
|
||||
/>,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
order: 20
|
||||
hidden: true
|
||||
title:
|
||||
en-US: paging the columns
|
||||
zh-CN: 列分页
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对于列数很多的数据，可以进行横向的分页，通过切换符切换当前展现的列。
|
||||
|
||||
## en-US
|
||||
|
||||
You can split long columns to switchable views.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name' },
|
||||
{ title: '年龄', dataIndex: 'age', key: 'age' },
|
||||
{ title: '列1', dataIndex: 'age', key: '1' },
|
||||
{ title: '列2', dataIndex: 'age', key: '2' },
|
||||
{ title: '列3', dataIndex: 'age', key: '3' },
|
||||
{ title: '列4', dataIndex: 'age', key: '4' },
|
||||
{ title: '列5', dataIndex: 'age', key: '5' },
|
||||
{ title: '列6', dataIndex: 'age', key: '6' },
|
||||
{ title: '列7', dataIndex: 'age', key: '7' },
|
||||
{ title: '列8', dataIndex: 'age', key: '8' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
render: () => <a href="#">操作</a>,
|
||||
},
|
||||
];
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
}];
|
||||
|
||||
ReactDOM.render(<Table columns={columns} dataSource={data} columnsPageRange={[2, 9]} columnsPageSize={4} />, mountNode);
|
||||
````
|
||||
@ -269,6 +269,9 @@
|
||||
.@{table-prefix-cls}-thead > tr > th,
|
||||
.@{table-prefix-cls}-tbody > tr > td {
|
||||
border-right: 1px solid @border-color-split;
|
||||
}
|
||||
.@{table-prefix-cls}-thead > tr:first-child > th,
|
||||
.@{table-prefix-cls}-tbody > tr > td {
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
@ -14,3 +14,13 @@ export function flatArray(data = [], childrenName = 'children') {
|
||||
loop(data);
|
||||
return result;
|
||||
}
|
||||
|
||||
export function treeMap(tree: Object[], mapper: Function, childrenName = 'children') {
|
||||
return tree.map((node, index) => {
|
||||
const extra = {};
|
||||
if (node[childrenName]) {
|
||||
extra[childrenName] = treeMap(node[childrenName], mapper, childrenName);
|
||||
}
|
||||
return assign({}, mapper(node, index), extra);
|
||||
});
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
"rc-slider": "~4.0.0",
|
||||
"rc-steps": "~2.1.5",
|
||||
"rc-switch": "~1.4.2",
|
||||
"rc-table": "~4.6.0",
|
||||
"rc-table": "~5.0.0",
|
||||
"rc-tabs": "~5.9.2",
|
||||
"rc-time-picker": "^2.0.0",
|
||||
"rc-tooltip": "~3.4.2",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user