Семантическая UI (React) карта аккордеона в каждой строке таблицы - PullRequest
Новая
       7

Семантическая UI (React) карта аккордеона в каждой строке таблицы

0 голосов
/ 10 ноября 2018

Я ищу решение, в котором я бы сопоставил данные с каждой строкой таблицы с аккордеоном, где, щелкнув по ней, можно развернуть <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>

1 Ответ

0 голосов
/ 08 марта 2019

Это сработало для меня (не такой же, как у вас)

Но идея состоит в том, чтобы аккордеон действовал "как" 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>
...