I've created html table and cannot drag new elements to table cells

Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell:

 bm.add('table1centered', {
        label: '1 centered',
        category: 'Button Layout',
        attributes: { class: 'fa fa-table' },
        content: '<f7-list-item iPatrolType="f7-table">
        <table border="0" width="100%" style="min-height:5mm;">
          <tbody>
            <tr>
              <td width="45%">
              </td>
              <td width="10%">
              </td>
              <td width="45%">
              </td>
            </tr>
          </tbody>
        </table>
        </f7-list-item>'
    });

But next code produces html table with no possibility to drop new element into a cell. What am I doing wrong?

   bm.add('f7-list-item-table', {
        label: 'Table',
        category: 'Button Layout',
        attributes: { class: 'fa fa-table' },
        content: '<f7-list-item iPatrolType="f7-table"></f7-list-item>'
    });
    domComps.addType('f7-list-item-table', {
        model: dModel.extend({
            defaults: Object.assign({}, dModel.prototype.defaults,
                {
                    traits: [
                        //         // strings are automatically converted to text types
                        { type: 'number', label: 'columns', name: 'columns', placeholder: 'eg. columns quantity', default: 3 },
                        { type: 'text', label: 'column widths', name: 'columnwidths', placeholder: 'eg. 33%,34%,33%', default: '33%,34%,33%' },
                    ]
                }),
            initialize(o, opt) {
                dModel.prototype.initialize.apply(this, arguments);

                this.get('traits').each(function (trait) {
                    if (trait.get('name') == 'columns') {
                        trait.set('value', 3);
                    }
                    if (trait.get('name') == 'columnwidths') {
                        trait.set('value', '33%,34%,33%');
                    }
                });

            },
            showalert(mess) {
                setTimeout(() => { alert(mess); }, 1000);
            },
            getHtmlTemplate() {
                var columns = this.get('traits').where({ name: 'columns' })[0].get('value');
                var columnwidths = this.get('traits').where({ name: 'columnwidths' })[0].get('value');
                var columnwidthsArray = columnwidths.split(",");

                var template = '<f7-list-item iPatrolType="f7-table"><table width="100%" style="min-height:5mm;"><tr class="row">';
                // this.showalert(template);
                for (let index = 0; index < columns; index++) {
                    var wStr = columnwidthsArray.length >= index ? columnwidthsArray[index] : '';
                    if (wStr && !wStr.endsWith('%'))
                        wStr += '%';
                    template += '<td' + (wStr ? ' width="' + wStr + '"' : '') + ' class="cell"></td>';
                }
                template += '</tr></table></f7-list-item>';

                return template;
            },
            toHTML: function () {
                return this.getHtmlTemplate();
            }
        },
            {
                isComponent: function (el) {
                    if (el.tagName == 'F7-LIST-ITEM' && el.getAttribute('iPatrolType') == 'f7-table') {
                        return { type: 'f7-list-item-table' };
                    }
                },
            }),

        view: dView
            .extend({
                tagName: 'f7-list-item',
                initialize(o) {
                    dView.prototype.initialize.apply(this, arguments);
                    this.listenTo(this.model,
                        'change:attributes:columns ' +
                        'change:attributes:columnwidths '
                        , this.render)
                },
                showalert(mess) {
                    setTimeout(() => { alert(mess); }, 1000);
                },
                getHtmlTemplate() {
                    // this.showalert("getHtmlTemplate");
                    var columns = this.model.get('traits').where({ name: 'columns' })[0].get('value');
                    var columnwidths = this.model.get('traits').where({ name: 'columnwidths' })[0].get('value');
                    var columnwidthsArray = columnwidths.split(",");

                    var template = `<li>
                    <table border="1" width="100%" style="min-height:15mm;"
                    >
                    <tr>`;
                    for (let index = 0; index < columns; index++) {
                        wStr = '';
                        var wStr = columnwidthsArray.length >= index ? columnwidthsArray[index] : '';
                        if (wStr && !wStr.endsWith('%'))
                            wStr += '%';
                        template += '<td ' + (wStr ? ' width="' + wStr + '"' : '') + ' ></td>';
                    }
                    template += '</tr></table></li> ';

                    return template;
                },
                render(...args) {
                    this.updateAttributes();
                    this.updateClasses();

                    var template = this.getHtmlTemplate();
                    this.el.className = "f7-list-item-table";
                    this.el.innerHTML = template;
                    // this.showalert(this.el.outerHTML);
                    return this;
                }
            }),
    });