Editable i dropdown

Robię taką fajną tabelkę którą można edytować każdy wiersz ale pojawia się problem bo nie wiem jak zmienić "Dostawce","Odbiorce","Dostawca/Odbiorca". Nie chciał bym wstawiać w to miejsce tekstu tylko te właśnie ikonki.
Tak wygląda fragment tabelki:

<tr>
   <td>1</td>
   <td class="text-center"><i class="ri-shield-user-line text-success" data-toggle="tooltip" title="Dostawca/Odbiorca"></i></td>
   <td>Lipka</td>
   <td>502-131-13-13</td>
   <td>MIejscowosc 23</td>
   <td>Miasto</td>
   <td>42-134</td>
   <td>521-144-141</td>
</tr>
<tr>
   <td>2</td>
   <td class="text-center"><i class="ri-user-shared-2-line text-primary" data-toggle="tooltip" title="Odbiorca"></i></td>
   <td>Melon</td>
   <td>802-531-13-13</td>
   <td>Miejscowosc 22</td>
   <td>Miasto</td>
   <td>98-234</td>
   <td>521-144-141</td>
</tr>

A tak wygląda fragment kodu który pozwala na edycje:

!function (t) {
    "use strict";
    var o = function () { }
        ;
    o.prototype.init = function () {
            t("#btn-editable").Tabledit({
                buttons: {
                    edit: {
                        class: "btn btn-success", html: '<span class="mdi mdi-pencil"></span>', action: "edit"
                    }
                }
                , inputClass: "form-control form-control-sm", deleteButton: !1, saveButton: !1, autoFocus: !1, columns: {
                    identifier: [0, "id"], editable: [[2, "col2"], [3, "col3"], [4, "col4"], [5, "col5"], [6, "col6"], [7, "col7"]]
                }

            }
            )
    }
        ,
        t.EditableTable = new o,
        t.EditableTable.Constructor = o
}

Ma ktoś pomysł jak w pierwszej kolumnie wrzucić dropdown razem z tymi ikonkami do edycji?