mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
bd02b83da4
* feat: Table new sticky prop * add example * update snapshots * fix typo * fix example and improve less * rename to @zindex-table-fixed-column * fix compile error * fix header z-index * upgrade rc-table and add active style * improve less var * upgrade rc-table and remove hover style Co-authored-by: 二货机器人 <smith3816@gmail.com>
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
99 |
|
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.
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 }} sticky />,
mountNode,
);