getTables - стилизация без bootstrap

Попалась редактируемая табличка сверстанная на flex.

Ее проще сделать на getTables, но его нужно стилизовать под эту таблицу.
Под катом инструкция

Выводим таблицу:

{'!getTable' | snippet : [
    'showLog'=>1,
    'loadModels'=>'deliveryaddr',
    'getTableOuterTpl'=>'address.getTable.outer.tpl',
    'getTableRowTpl'=>'address.getTable.row.tpl',
    'getTableModalCreateUpdateTpl'=>'profile.getTable.Modal.CreateUpdate.tpl',
    'getTableEditFormTpl'=>'profile.getTable.EditForm.tpl',
    'getTableModalRemoveTpl'=>'address.getTable.Modal.Remove.tpl',
    'table'=>[
        'label'=>'Адрес доставки',
        'class'=>'DeliveryAddress',
        'pdoTools'=>[
            'class'=>'DeliveryAddress',
            'where'=>[
                'DeliveryAddress.user_id'=>$_modx->user.id,
            ],
            'limit'=>0,
        ],
        'actions'=>[
            'create'=>[
                'title'=>'',
                'icon'=>'',
                'text'=>'Добавить адрес',
                'modal'=>['title'=>'Добавить адрес доставки']
                ],
            'update'=>[
                'title'=>'',
                'icon'=>'',
                'cls'=>'adress-item__edit',
                'text'=>'<svg class="svg">
                  <use xlink:href="/assets/images/sprite.svg#edit"></use>
                </svg>',
                'modal'=>['title'=>'Редактирование адресов доставки']
                ],
            'remove'=>[
                'title'=>'',
                'icon'=>'',
                'cls'=>'adress-item__remove',
                'text'=>'<svg class="svg">
                  <use xlink:href="/assets/images/sprite.svg#remove"></use>
                </svg>',
                'modal'=>['title'=>'Вы уверены, что хотите 
 удалить этот адрес доставки?']
            ],
        ],
        'checkbox'=>0,
        'autosave'=>0,
        'row'=>[
                'id'=>['edit'=>['type'=>'hidden']],
                'user_id'=>['edit'=>['type'=>'hidden','force'=>'user_id',]],
                'text_address'=>[
                    'label'=>'Краткий адрес',
                    'content'=>'г. {$city}, ул. {$street}, {$building}-{$room}{if $floor}, {$floor}{/if}{if $entrance}, {$entrance}{/if}',
                    'skip_modal'=>1,
                ],
                'city'=>[
                    'label'=>'Город',
                    'edit'=>['validate'=>1,],
                    'modal_only'=>1,
                ],
                'street'=>[
                    'label'=>'Улица',
                    'edit'=>['validate'=>1,],
                    'modal_only'=>1,
                ],
                'building'=>[
                    'label'=>'Номер дома',
                    'edit'=>['validate'=>1,],
                    'modal_only'=>1,
                ],
                'room'=>[
                    'label'=>'Квартира/офис',
                    'edit'=>['validate'=>1,],
                    'modal_only'=>1,
                ],
                'entrance'=>[
                    'label'=>'Подъезд',
                    'modal_only'=>1,
                ],
                'floor'=>[
                    'label'=>'Этаж',
                    'modal_only'=>1,
                ],
                'index'=>[
                    'label'=>'Индекс',
                    'modal_only'=>1,
                ],
            ],
    ],
]}

Чанки
Вот эти чанки:

'getTableOuterTpl'=>'address.getTable.outer.tpl',
    'getTableRowTpl'=>'address.getTable.row.tpl',
    'getTableModalCreateUpdateTpl'=>'profile.getTable.Modal.CreateUpdate.tpl',
    'getTableEditFormTpl'=>'profile.getTable.EditForm.tpl',
    'getTableModalRemoveTpl'=>'address.getTable.Modal.Remove.tpl',

Нужно переделать под верстку. Главное, чтобы сохранились служебные div и классы:
get-table, get-table-tbody, get-table-topline-first в address.getTable.outer.tpl:

<div class="person-area-address__item get-table" data-name="{$name}" data-hash="{$hash}">
    {if $label}<h4>{$label}</h4>{/if}
    <div class="get-table-tbody">
        {foreach $tbody.trs as $tr}
            {$tr.html}
        {/foreach}
    </div>
    <div class="get-table-topline-first">
        {foreach $topBar['topBar/topline/first'] as $t}
                {$t.content}
        {/foreach}
    </div>
  </div>

Класс get-table-tr и data атрибуты в {foreach $tr.data as $k=>$v} data-{$k}="{$v} в address.getTable.row.tpl

<div class="adress-item get-table-tr" {foreach $tr.data as $k=>$v} data-{$k}="{$v}"{/foreach}>
    {foreach $tr.tds as $td}
        {if $td.edit.type != 'hidden'}
            {if $td.edit.field}
                <p data-field="{$td.edit.field}">{$td.content}</p>
            {else}
                {$td.content}
            {/if}
        {/if}
    {/foreach}
</div>

Чанк profile.getTable.Modal.CreateUpdate.tpl. Служебный класс gts_modal нужны атрибуты button name=«gts_action» value="{$modal.table_action}" и нужны скрытые инпуты.

<div class="modal-wrap gts_modal">
    <div class="modal">
        <div class="modal__body">
            <button class="modal__close">
                <svg class="svg">
                    <use xlink:href="/assets/images/sprite.svg#close"></use>
                </svg>
            </button>
            <div class="modal__title">
                {$modal.title}
            </div>
            <form action="" method="post" class="form gts-form">
                <input type="hidden" name="hash" value="{$modal.hash}">
                <input type="hidden" name="table_name" value="{$modal.table_name}">
                {foreach $modal.edits as $edit}
                    {$edit.modal_content}
                {/foreach}
                <button type="submit"  class="button btn-blue fz16 form__btn" name="gts_action" value="{$modal.table_action}">Сохранить</button>
            </form>
        </div>
    </div>
</div>

Чанк модалки удаления address.getTable.Modal.Remove.tpl. Служебный класс gts_modal:

<div class="modal-wrap modal-remove gts_modal">
    <div class="modal">
        <div class="modal__body">
            <button class="modal__close">
                <svg class="svg">
                    <use xlink:href="/assets/images/sprite.svg#close"></use>
                </svg>
            </button>
            <div class="modal__descr">
                {$modal.title}
            </div>
            <form action="" method="post" class="gts-form">
                <button type="submit" class="modal-remove-btn button btn-blue fz16" name="gts_action" value="getTable/remove" >
                    Да, удалить
                </button>
                
            </form>
            <button class="modal-remove-btn button btn-white fz16 modal-cancel">
                Отмена
            </button>
        </div>
    </div>
</div>

Скрипт модалка

По умолчанию getTables работает с bootstrap modal. Чтобы сделать кастомные модалки, нужно отредактировать скрипт assets/components/gettables/js/gettables.js.
Сохранить его как assets/components/gettables/js/gettables_custom.js и переписать в нем модуль getTables.Modal
Вот уже переписанный модуль для кастомной модалки:

getTables.Modal = {
        callbacks: {
            load: getTablesConfig.callbacksObjectTemplate(),

        },
        setup: function () {

        },
        initialize: function () {
            getTables.Modal.setup();
            $('body').append('<div class="temp-modal"></div>');
        },
        show: function (modal_html) {
            closeModal();
            $('.temp-modal').empty().append(modal_html);
            modal = document.querySelector('.gts_modal'),
            scroll = calcScroll();
            modal.classList.add('active');
            document.body.style.overflow = "hidden";
            header.style.width = "calc(100% - ".concat(scroll, "px)");
            document.body.style.marginRight = "".concat(scroll, "px");
            $('.gts_modal .modal__close').click(function(){getTables.Modal.close();});
            $('.gts_modal .modal-cancel').click(function(){getTables.Modal.close();});
        },
        load: function (button_data, table_data, tr_data) {
            getTables.Message.close();
            
            
            
            getTables.sendData.data = {
                gts_action: button_data.modal,
                hash: table_data.hash,
                table_data: table_data,
                button_data: button_data,
                tr_data: tr_data
            };

            var callbacks = getTables.Modal.callbacks;

            callbacks.load.response.success = function (response) {
                getTables.Modal.show(response.data.html);
                // modaWrap.forEach(function (item) {
                // item.style.width = "calc(100% - ".concat(scroll, "px)");
                // });
                //$(response.data.html).modal('show');

            };

            return getTables.send(getTables.sendData.data, getTables.Modal.callbacks.load, getTables.Callbacks.Modal.load);
        },
        close: function () {
            closeModal();
            $('.temp-modal').empty();
        },
    };

Нужно переписывать только функции show и close.
В системной настройке gettables_frontend_framework_js прописать [[+jsUrl]]gettables_custom.js

Финал
Извините за простыню кода. Не придумал как проще сделать. Жаль, что здесь нельзя сделать скрытый текст, как на хабре.