Как сделать поповер или выбрать другой вариант, нажав на ячейку столбца в таблице начальной загрузки реакции 2?

Question

У меня есть таблица реакции-начальной загрузки, где у меня есть несколько столбцов. Я хочу, чтобы, когда я нажимал кнопку редактирования в ячейке столбца, он открывал всплывающее окно или выбирал с 3 вариантами:

1. удалять
2. Установить по умолчанию
3. редактировать

вот изображение прилагается. Может кто-нибудь, пожалуйста, предоставьте мне правильный способ сделать это. 3 точки нажали, и список открыт для выбора

Вот мой код В столбце "Редактирование" есть прослушиватель событий и щелчков, где мне нужно визуализировать компонент.

    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")

         } 
       }
   }])
 }