在 react-bootstrap-table 2 中单击单元格时显示 react Bootstrap Popover

Question

用react-bootstrap-table2设计section。我只想显示带有单击特定单元格的选项的弹出窗口。有什么方法可以结合 react-bootstrap-table2 和 react bootstrap popover.

Answer 1

您需要导入所有必需的组件，然后按照适合您的方式简单地组合它们。您不需要使用文档推荐的按钮。我在这里有一个工作示例。 https://codesandbox.io/s/confident-bush-8dxgo 它很难看，我只是把它放在一起，但它会让你很好地了解如何组合它们。下次尝试 post 一些你试过的代码。

Answer 2

可以在 bootstrap table 道具中使用 格式化程序。参考 link ： 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>    
    );
};

在 react-bootstrap-table 2 中单击单元格时显示 react Bootstrap Popover

Display react Bootstrap Popover when click on a cell in react-bootstrap-table 2

reactjs

react-bootstrap-table