mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
140 lines
2.8 KiB
Markdown
140 lines
2.8 KiB
Markdown
---
|
||
order: 99
|
||
title:
|
||
en-US: Fixed header and scroll bar with the page
|
||
zh-CN: 随页面滚动的固定表头和滚动条
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
对于长表格,需要滚动才能查看表头和滚动条,那么现在可以设置跟随页面固定表头和滚动条。
|
||
|
||
## en-US
|
||
|
||
For long table,need to scroll to view the header and scroll bar,then you can now set the fixed header and scroll bar to follow the page.
|
||
|
||
```tsx
|
||
import { Switch, Table } from 'antd';
|
||
import type { ColumnsType } from 'antd/es/table';
|
||
import React, { useState } from 'react';
|
||
|
||
interface DataType {
|
||
key: React.Key;
|
||
name: string;
|
||
age: number;
|
||
address: string;
|
||
}
|
||
|
||
const columns: ColumnsType<DataType> = [
|
||
{
|
||
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: DataType[] = [];
|
||
for (let i = 0; i < 100; i++) {
|
||
data.push({
|
||
key: i,
|
||
name: `Edrward ${i}`,
|
||
age: 32,
|
||
address: `London Park no. ${i}`,
|
||
});
|
||
}
|
||
|
||
const App: React.FC = () => {
|
||
const [fixedTop, setFixedTop] = useState(false);
|
||
|
||
return (
|
||
<Table
|
||
columns={columns}
|
||
dataSource={data}
|
||
scroll={{ x: 1500 }}
|
||
summary={() => (
|
||
<Table.Summary fixed={fixedTop ? 'top' : 'bottom'}>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={0} colSpan={2}>
|
||
<Switch
|
||
checkedChildren="Fixed Top"
|
||
unCheckedChildren="Fixed Top"
|
||
checked={fixedTop}
|
||
onChange={() => {
|
||
setFixedTop(!fixedTop);
|
||
}}
|
||
/>
|
||
</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={2} colSpan={8}>
|
||
Scroll Context
|
||
</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={10}>Fix Right</Table.Summary.Cell>
|
||
</Table.Summary.Row>
|
||
</Table.Summary>
|
||
)}
|
||
sticky
|
||
/>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
```
|