Показывать реагирующий Bootstrap Popover при нажатии на ячейку в реагирующей загрузочной таблице 2

Question

Дизайн раздела с реактив-бутстрап-таблицей2. Я просто хочу показать поповер с опциями при нажатии на конкретные ячейки. Есть ли способ объединить реакцию-бутстрап-таблица2 и реагировать загрузчик поповера.

Answer 1

Возможно использование форматера в подпорках загрузочной таблицы. Ссылка ссылка: https://react -bootstrap-table.github.io / реагируют-самозагрузки-table2 / документы / колонки-props.html * 1 005 *

Вот мой код

List.tsx
    const columns: ColumnProps<User>[] = [    {
                dataField: 'action',
                text: '',
                formatter: ColumnFormatterFactory,
                style: { overflow: 'inherit' },
            },
    ];
        <BootstrapTable
                        bootstrap4
                        bordered={false}
                        classes="mb-5 table-fit"
                        columns={columns}
                        data={this.records}
                        filter={filterFactory()}
                        keyField="id"
                        noDataIndication="No Users yet."
                        remote={{ sort: true, filter: true }}
                        rowClasses="clickable-row"
                        onTableChange={handleTableChange}
                    />


ColumnFormatterFactory.tsx

export const ColumnFormatterFactory = (cell: any, row: number, rowIndex: any, formatExtraData:any) => {
    return (
            <Dropdown>
                <Dropdown.Toggle
                    id={`${row.id}-dropdown`}
                >
                <span >More</span>
                </Dropdown.Toggle>
        <Dropdown.Menu>        
            <Dropdown.Item >one1</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item >two</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item >three</Dropdown.Item>
        </Dropdown.Menu>       
            </Dropdown>    
    );
};

Answer 2

Вам нужно будет импортировать все необходимые компоненты и просто объединить их так, как вам удобно. Вам не нужно использовать кнопку, которую рекомендуют документы. У меня есть рабочий пример здесь. https://codesandbox.io/s/confident-bush-8dxgo это уродливо, и я просто бросил это вместе, но это даст вам хорошее представление о том, как их объединить. В следующий раз попробуйте опубликовать код, который вы пробовали.