mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +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
109 lines
2.5 KiB
Markdown
109 lines
2.5 KiB
Markdown
---
|
|
order: 20
|
|
title:
|
|
en-US: Fixed Columns and Header
|
|
zh-CN: 固定头和列
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
适合同时展示有大量数据和数据列。
|
|
|
|
> 若列头与内容不对齐或出现列重复，请指定**固定列**的宽度 `width`。如果指定 `width` 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有[超长连续字段破坏布局](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)。
|
|
>
|
|
> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。
|
|
|
|
## en-US
|
|
|
|
A Solution for displaying large amounts of data with long columns.
|
|
|
|
> Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
|
|
>
|
|
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
|
|
|
|
```jsx
|
|
import { Table } from 'antd';
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Full Name',
|
|
width: 100,
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
fixed: 'left',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
width: 100,
|
|
dataIndex: 'age',
|
|
key: 'age',
|
|
fixed: 'left',
|
|
},
|
|
{
|
|
title: 'Column 1',
|
|
dataIndex: 'address',
|
|
key: '1',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Column 2',
|
|
dataIndex: 'address',
|
|
key: '2',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Column 3',
|
|
dataIndex: 'address',
|
|
key: '3',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Column 4',
|
|
dataIndex: 'address',
|
|
key: '4',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Column 5',
|
|
dataIndex: 'address',
|
|
key: '5',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Column 6',
|
|
dataIndex: 'address',
|
|
key: '6',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Column 7',
|
|
dataIndex: 'address',
|
|
key: '7',
|
|
width: 150,
|
|
},
|
|
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
|
{
|
|
title: 'Action',
|
|
key: 'operation',
|
|
fixed: 'right',
|
|
width: 100,
|
|
render: () => <a>action</a>,
|
|
},
|
|
];
|
|
|
|
const data = [];
|
|
for (let i = 0; i < 100; i++) {
|
|
data.push({
|
|
key: i,
|
|
name: `Edrward ${i}`,
|
|
age: 32,
|
|
address: `London Park no. ${i}`,
|
|
});
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />,
|
|
mountNode,
|
|
);
|
|
```
|