每个表行中的语义用户界面(Reaction)映射手风琴 [英] Semantic UI (React) map accordion in every table row
本文介绍了每个表行中的语义用户界面(Reaction)映射手风琴的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一种解决方案,在该解决方案中,我将使用Accordion将数据映射到每个表行,而通过单击它,它将展开表行下的<div>
。
这是数据到TableRow的映射:
var mappedOrders = sortedOrders.map(order => {
return (
<Table.Row key={order._id}>
<Table.Cell>{order.address.lastName + " " + order.address.firstName}</Table.Cell>
<Table.Cell>{order.payment.vs}</Table.Cell>
<Table.Cell>
<Button onClick={this.openOrderDetails(order)} style={{ padding: '0.3em' }} size='medium' icon='edit' />
<Button style={{ padding: '0.3em' }} size='medium' icon='check' />
<Button style={{ padding: '0.3em' }} size='medium' icon='file pdf' />
<Button style={{ padding: '0.3em' }} size='medium' icon='shipping fast' />
<Button style={{ padding: '0.3em' }} size='medium' icon='close' />
</Table.Cell>
</Table.Row>
)
}
)
<Table compact padded selectable basic='very'>
<Table.Header>
<Table.Row style={{ textAlign: 'center' }}>
<Table.HeaderCell width={2}>Name</Table.HeaderCell>
<Table.HeaderCell width={1}>VS</Table.HeaderCell>
<Table.HeaderCell width={3}>Actions</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{mappedOrders}
</Table.Body>
</Table>
推荐答案
这对我有效(与您的用例不同)
但其想法是让手风琴"充当"一张桌子。Body,然后面板充当行。这使其正常工作
<Table>
<Table.Header>
<Table.HeaderCell>Node Type</Table.HeaderCell>
<Table.HeaderCell>Display</Table.HeaderCell>
</Table.Header>
<Accordion
fluid={true}
as={Table.Body}
panels={this.props.visibleNodes.map(n => {
return {
key: n.id,
class: "tr",
title: {
as: Table.Row,
className: "",
children: [
<Table.Cell key={`${n.id}_type`}>{n._node_type}</Table.Cell>,
<Table.Cell key={`${n.id}_display`}>{n._display}</Table.Cell>
]
},
content: {
children: JSON.stringify(n.properties)
}
};
})}
/>
</Table>
这篇关于每个表行中的语义用户界面(Reaction)映射手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文