ant-design/components/table/demo/colspan-rowspan.tsx
JiaQi a268fdde8f
style(Table): Add the rowScope style (#40304)
* Add the rowScope style

* doc(table): add demo about rowScope

* update snapshot

---------

Co-authored-by: Yuiai01 <dujiaqi@kezaihui.com>
Co-authored-by: muxinFeng <434980373@qq.com>
2023-03-02 20:51:40 +08:00

121 lines
2.2 KiB
TypeScript

import React from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
interface DataType {
key: string;
name: string;
age: number;
tel: string;
phone: number;
address: string;
}
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const sharedOnCell = (_: DataType, index: number) => {
if (index === 1) {
return { colSpan: 0 };
}
return {};
};
const columns: ColumnsType<DataType> = [
{
title: 'RowHead',
dataIndex: 'key',
rowScope: 'row',
},
{
title: 'Name',
dataIndex: 'name',
render: (text) => <a>{text}</a>,
onCell: (_, index) => ({
colSpan: index === 1 ? 5 : 1,
}),
},
{
title: 'Age',
dataIndex: 'age',
onCell: sharedOnCell,
},
{
title: 'Home phone',
colSpan: 2,
dataIndex: 'tel',
onCell: (_, index) => {
if (index === 3) {
return { rowSpan: 2 };
}
// These two are merged into above cell
if (index === 4) {
return { rowSpan: 0 };
}
if (index === 1) {
return { colSpan: 0 };
}
return {};
},
},
{
title: 'Phone',
colSpan: 0,
dataIndex: 'phone',
onCell: sharedOnCell,
},
{
title: 'Address',
dataIndex: 'address',
onCell: sharedOnCell,
},
];
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sydney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
},
{
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} bordered />;
export default App;