mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
72a7ba618f
* chore: update rc-table * add basic table style * checked all logic * checkbox support disabled * selection style * selection support radio * add selections support * selection extra style * select all locale * sorter logic * add more desc * init Filter hooks * init filter hooks * update style * filter style * filter style * fix filter * sort control * ajax it * add expandedable css * expandable view style * fixed style * border style * empty style * fix pagination style * add fixed demo * un-comment * clean up * fix filter check logic * fix overflow & ellipsis conflict * fix tes * adjust scroll shadow * fix border fixed style * add part of test case * add filter test part * more test case * issue related test * filter test * adjust pagination logic * fix pagination test case * all selection test case * table sorter test case * table basic test * fix test case * update faq * update expandable doc * add v4 doc * add summary docs * more demo * fix selection * update snapshot * update test case * fix ff styling * update rc-table * update snapshot * update snapshot * fix lint * fix style lint * fix style * update snapshot * update desc * fix missing icon
129 lines
2.2 KiB
Markdown
129 lines
2.2 KiB
Markdown
---
|
|
order: 22
|
|
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: 'Name',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
width: 100,
|
|
fixed: 'left',
|
|
filters: [
|
|
{
|
|
text: 'Joe',
|
|
value: 'Joe',
|
|
},
|
|
{
|
|
text: 'John',
|
|
value: 'John',
|
|
},
|
|
],
|
|
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
|
},
|
|
{
|
|
title: 'Other',
|
|
children: [
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
key: 'age',
|
|
width: 150,
|
|
sorter: (a, b) => a.age - b.age,
|
|
},
|
|
{
|
|
title: 'Address',
|
|
children: [
|
|
{
|
|
title: 'Street',
|
|
dataIndex: 'street',
|
|
key: 'street',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Block',
|
|
children: [
|
|
{
|
|
title: 'Building',
|
|
dataIndex: 'building',
|
|
key: 'building',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: 'Door No.',
|
|
dataIndex: 'number',
|
|
key: 'number',
|
|
width: 100,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Company',
|
|
children: [
|
|
{
|
|
title: 'Company Address',
|
|
dataIndex: 'companyAddress',
|
|
key: 'companyAddress',
|
|
width: 200,
|
|
},
|
|
{
|
|
title: 'Company Name',
|
|
dataIndex: 'companyName',
|
|
key: 'companyName',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Gender',
|
|
dataIndex: 'gender',
|
|
key: 'gender',
|
|
width: 80,
|
|
fixed: 'right',
|
|
},
|
|
];
|
|
|
|
const data = [];
|
|
for (let i = 0; i < 100; i++) {
|
|
data.push({
|
|
key: i,
|
|
name: 'John Brown',
|
|
age: i + 1,
|
|
street: 'Lake Park',
|
|
building: 'C',
|
|
number: 2035,
|
|
companyAddress: 'Lake Street 42',
|
|
companyName: 'SoftLake Co',
|
|
gender: 'M',
|
|
});
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Table
|
|
columns={columns}
|
|
dataSource={data}
|
|
bordered
|
|
size="middle"
|
|
scroll={{ x: 'calc(700px + 50%)', y: 240 }}
|
|
/>,
|
|
mountNode,
|
|
);
|
|
```
|