Отображение React Bootstrap Popover при нажатии на ячейку в response-bootstrap-table 2

Создайте раздел с помощью response-bootstrap-table2. Я просто хочу показать всплывающее окно с параметрами щелчка по определенным ячейкам. Есть ли способ объединить react-bootstrap-table2 и react-bootstrap popover.


person Venkat    schedule 10.06.2019    source источник


Ответы (2)


Можно использовать форматировщик в свойствах таблицы начальной загрузки. Ссылка для справки: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html

Вот мой код

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>    
    );
};
person Venkat    schedule 11.06.2019

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

person Taylor Belk    schedule 10.06.2019
comment
спасибо за ваш ответ. но меня спрашивали о Combine the bootstrap popover в react-bootstrap-table, а не с помощью responsestrap popover. я нашел решение для своего вопроса - person Venkat; 11.06.2019