editor.DomComponents.addType('table_clone', {
        model: tableType.model.extend({
            defaults: {
                ...tableType.model.prototype.defaults,
            },

            init() {
                this.renderTable(this.get('payload'));
            },

            renderTable(payload = false) {
                //console.log('QQ: ', payload);
                const start = new Date().getTime();
                if (!payload) payload = this.get('payload');
                const components = [];

                for (const data of payload.data) {
                    const column = {
                        tagName: 'tr',
                        draggable: false,
                        removable: false,
                        copyable: false,
                        selectable: false,
                        components: []
                    };

                    for (const item of data) {
                        column.components.push({
                            tagName: 'td',
                            type: 'text',
                            content: utils.replaceTextVariables(item.text),
                            attributes: { column_id: item.id },
                            style: {
                                'padding-left': '3px',
                                'padding-right': '3px',
                                'padding-top': '3px',
                                'padding-bottom': '3px',
                                'border-style': 'solid',
                                'border-color': 'black',
                                'border-width': '1px',
                                ...(item.style ? item.style : {})
                            },
                            draggable: false,
                            removable: false,
                            copyable: false,
                            editable: true,
                            resizable: true
                        });
                    }

                    components.push(column);
                }

                //console.log('Press F: ', JSON.parse(JSON.stringify(components)));

                //this.set('components', components);
                // console.log('RENDER: ', Date.now() - start);
                // // return;
                //this.components().set(components);

                window.lastComps = components;

                //this.component().replaceWith(components);
                //this.component().add(components);
                this.set({ components, payload: { ...payload, date: Date.now() }});
            }
        }, {
            isComponent: el => {
                if (el.getAttribute &&
                    el.getAttribute('data-gjs-type') == 'table_clone') {
                    return { type: 'table_clone' };
                }
            },
        }),

        view: tableType.view
    });