mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
90bb52190b
* demo(Table): add sticky offsetHeader * test: update snapshot * test: update snapshot
124 lines
2.4 KiB
TypeScript
124 lines
2.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Switch, Table } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
|
|
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: `Edward ${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>
|
|
)}
|
|
// antd site header height
|
|
sticky={{ offsetHeader: 64 }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|