He creado una tabla HTML y no puedo arrastrar nuevos elementos a las celdas de la tabla

Hola. Si creo una tabla HTML con el siguiente bloque de código, todo funciona, puedo dejar una Quote, por ejemplo, en cualquier celda:

 bm.add('table1centered', {
        etiqueta: '1 centrado',
        categoría: 'Distribución de botones',
        atributos: { clase: 'fa fa-table' },
        contenido: '<f7-list-item iPatrolType="f7-table">
        <borde de tabla="0" ancho="100%" estilo="altura-min:5mm;">
          <tbody>
            <tr>
              <td width="45%">
              </td>
              <td width="10%">
              </td>
              <td width="45%">
              </td>
            </tr>
          </tbody>
        </table>
        '</f7-list-item>
    });

Pero el siguiente código produce una tabla html sin posibilidad de insertar nuevo elemento en una celda. ¿Qué estoy haciendo mal?

   bm.add('f7-list-item-table', {
        etiqueta: 'Mesa',
        categoría: 'Distribución de botones',
        atributos: { clase: 'fa fa-table' },
        contenido: '<f7-list-item iPatrolType="f7-table"></f7-list-item>'
    });
    domComps.addType('f7-list-item-table', {
        model: dModel.extend({
            defaults: Object.assign({}, dModel.prototype.defaults,
                {
                    Rasgos: [
                        // las cadenas se convierten automáticamente en tipos de texto
                        { tipo: 'número', etiqueta: 'columnas', nombre: 'columnas', marcador de posición: 'por ejemplo, cantidad de columnas', por defecto: 3 },
                        { tipo: 'text', etiqueta: 'columnas anchas', nombre: 'columnwidths', marcador de posición: 'ej. 33%,34%,33%', por defecto: '33%,34%,33%' },
                    ]
                }),
            Initialize(O, opt) {
                dModel.prototype.initialize.apply(esto, argumentos);

this.get('traits').each(function (trait) {
                    if (trait.get('name') == 'columnas') {
                        trait.set('valor', 3);
                    }
                    if (trait.get('name') == 'columnwidths') {
                        trait.set('valor', '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 plantilla = '<f7-list-item iPatrolType="f7-table"><table width="100%" style="min-height:5mm;"><tr class="row">';
                this.showalert(plantilla);
                para (sea index = 0; index < columnas; index++) { var wStr = columnwidthsArray.length >= index ? columnwidthsArray[index] : '';
                    si (wStr && !wStr.endsWith('%'))
                        wStr += '%';
                    plantilla += '<td' + (wStr ? ' width="' + wStr + '"' : '') + ' class="cell"></td>';
                }
                plantilla += '</tr></table></f7-list-item>';

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

Ver: dView
            .extend({
                etiquetaNombre: 'f7-list-item',
                inicialize(o) {
                    dView.prototype.initialize.apply(esto, argumentos);
                    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(",");

Plantilla var = '<li>
                    <borde de la tabla="1" ancho="100%" estilo="min-altura:15mm;" >
                    <tr>';
                    para (sea index = 0; index < columnas; index++) { wStr = ''; var wStr = columnwidthsArray.length >= index ? columnwidthsArray[index] : '';
                        si (wStr && !wStr.endsWith('%'))
                            wStr += '%';
                        plantilla += '<td' + (wStr ? ' ancho="' + wStr + '""' : '') + ' ></td>';
                    }
                    plantilla += '</tr></table></li> ';

plantilla de retorno;
                },
                render(... args) {
                    this.updateAttributes();
                    this.updateClasses();

var template = this.getHtmlTemplate();
                    this.el.className = "tabla de elementos-de la lista f7";
                    this.el.innerHTML = plantilla;
                    this.showalert(this.el.outerHTML);
                    devuelvo esto;
                }
            }),
    });