如何通过单击react bootstrap表2中的列单元格来制作弹出窗口或选择具有不同选项的选项？

Question

我有一个 react-bootstrap-table-next ，其中有多列。我希望当我单击列单元格中的“编辑”按钮时，它会打开一个弹出窗口或使用3个​​选项进行选择：

1. 删除
2. 设置为默认
3. 编辑

这是图像。 有人可以为我提供正确的方法。 3 dots clicked and a list is opened for choices

这是我的代码。在“编辑”列中有事件和onclick侦听器，我必须在其中渲染组件。

    export const Columns = (callback) => {
          return ([{
        dataField: "code",
        text: "Code",
        sort: true,
        headerStyle: { width: "8%" }
    },
    {
        dataField: "description",
        text: "Description",
        sort: true,
        headerStyle: { width: "40%" }
    },
    {
        dataField: "shortName",
        text: "ShortName",
        sort: true,
        headerStyle: { width: "10%" }
    },
    {
        dataField: "currencyCode",
        text: "Currency",
        sort: true,
        headerStyle: { width: "10%" }
    },
    {
        dataField: "isActive",
        text: "Active/Inactive",
        sort: false,
        formatter: StatusSwitchRenderer,
        headerStyle: { width: "12%" },
        align: 'center',
        attrs: { class: "cdmStatus" }

    },
    {
        dataField: "dateAndTime",
        text: "Last Modified Date",
        sort: true,
        formatter: Helper.completeDateFormat,
        headerStyle: { width: "12%" }
    },{
        dataField: "isDefault",
        text:"",
        sort:false,
        formatter: setDefault,
        headerStyle: { width: "10%" },
        style: (cell, row, rowIndex, colIndex) => {
            if (row.isDefault) {
            return {
                backgroundColor: '#faede7'
            };
            }
            return {
            backgroundColor: '#e5f3fe'
            };
        }
    },
    {
        dataField: "edit",
        text: "Edit",
        sort: false,
        formatter: rankFormatter,
        headerAttrs: { width: 50 },
        attrs: { width: 50, class: "EditRow" },
        events: {
            onClick: (e, column, columnIndex, row, rowIndex) => {
                console.log("Aya tou sahi")

         } 
       }
   }])
 }