import React from
'react'
import { Table, Badge, Menu, Dropdown, Space, Switch
} from
'antd';
import { DownOutlined
} from
'@ant-design/icons';
const
{ Column
} = Table
;
export default class SubTable extends React.Component
{
state
= {
firstRow: false,
secondrow: false,
dataSource:
[
{
key:
"0",
name:
"Edward King 0",
expandable:
false
},
{
key:
"1",
name:
"Edward King 1",
expandable:
false
}
]
};
handleChnage
= key
=> {
let k
= parseInt
(key
);
let data
= this.state.dataSource
;
let value
= data
[k
].expandable
;
data
[k
].expandable
= !value
;
this.setState
({
dataSource: data
});
};
render
() {
const
{ dataSource
} = this.state
;
return (
<Table
bordered
dataSource
={dataSource
}
pagination
={false
}
expandRowByClick
={true
}
expandable
={{
expandedRowRender: record
=> (
<p style
={{ margin: 0
}}>{"Here is expandable row"}</p
>
),
rowExpandable: record
=> record.expandable
}}
>
<Column title
="name" dataIndex
="name" width
="30%" editable
={true
} /
>
<Column
align
="right"
render
={(text, record, index
) => {
return <Switch onChange
={() => this.handleChnage
(record.key
)} /
>;
}}
/
>
</Table
>
);
}
}
或者
import React from
'react'
import { Table, Badge, Menu, Dropdown, Space,
} from
'antd';
const columns
= [
{ title:
"Name", dataIndex:
"name", key:
"name" },
{ title:
"Age", dataIndex:
"age", key:
"age" },
{ title:
"Address", dataIndex:
"address", key:
"address" }
];
const data
= [
{
key: 1,
name:
"John Brown",
age: 32,
address:
"New York No. 1 Lake Park",
description:
"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
},
{
key: 2,
name:
"Jim Green",
age: 42,
address:
"London No. 1 Lake Park",
description:
"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
},
{
key: 3,
name:
"Joe Black",
age: 32,
address:
"Sidney No. 1 Lake Park",
description:
"My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
}
];
function customIcon
(props
) {
let record
= props.record
;
return <a onClick
={e
=> props.onExpand
(record, e
)}>{record.name
}</a
>;
}
export default class SubTable extends React.Component
{
render
() {
return (
<Table
columns
={columns
}
expandedRowRender
={record
=> (
<p style
={{ margin: 0
}}>{record.description
}</p
>
)}
dataSource
={data
}
// expandRowByClick
={true
}
expandIcon
={customIcon
}
/
>
);
}
}
