[英]Antd table how to fixed first row
您可以通過使用子標題來實現此效果,然后將子 header 設置為看起來像固定的第一行。
請參閱我在這里整理的示例:
干杯!
代碼:
const { Table } = antd;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name1',
children: [
{
title: 'Summary',
dataIndex: 'name',
key: 'name2',
},
],
sorter: (a, b) => a.name - b.name
},
{
title: 'Age',
children: [
{
dataIndex: 'age',
key: 'age',
},
],
sorter: (a, b) => a.age - b.age
},
{
title: 'Company',
children: [
{
dataIndex: 'companyAddress',
key: 'companyAddress',
},
],
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
children: [
{
dataIndex: 'age',
key: 'age',
},
],
},
];
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,
);```
您可以通過指定滾動選項來使用固定的 header 選項,這將允許在表https://ant.design/components/table/#components-table-demo-fixed-header內滾動
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.