Создайте раздел с помощью response-bootstrap-table2. Я просто хочу показать всплывающее окно с параметрами щелчка по определенным ячейкам. Есть ли способ объединить react-bootstrap-table2 и react-bootstrap popover.
Отображение React Bootstrap Popover при нажатии на ячейку в response-bootstrap-table 2
Ответы (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
спасибо за ваш ответ. но меня спрашивали о Combine the bootstrap popover в react-bootstrap-table, а не с помощью responsestrap popover. я нашел решение для своего вопроса
- person Venkat; 11.06.2019