table

Таблица с возможностью добавления колонок и изменения типов непосредственно в таблице, без дополнительного конфигурирования.
Для построения таблицы требуются все элементы, так же как и в html.
type => table type => table:head type => table:row type => table:th type => table:body type => table:row type => table:td
При использовании элемента table:head добавляется возможность добавления или удаления колонок в таблице. Так же можно выбрать и тип данных. При добавлении новой колонки, параметры tpl и prepare берутся из первой колонки в таблице.
Пример
<?php
return [
'settings' => [],
'templates' => [
'TableWithHead' => [
'type' => 'table',
'placeholder' => 'Table title',
'value' => true,
'items' => [
'thead' => [
'type' => 'table:head',
'items' => [
'row' => [
'type' => 'table:row',
'items' => [
[
'type' => 'table:th',
'items' => [
[
'type' => 'id',
'value' => 'id'
]
],
'tpl' => '@CODE:<th>[+mf.items+]</th>'
],
[
'type' => 'table:th',
'items' => [
[
'type' => 'text',
'value' => 'Title'
]
],
'tpl' => '@CODE:<th>[+mf.items+]</th>'
],
[
'type' => 'table:th',
'items' => [
[
'type' => 'text',
'value' => 'Text'
]
],
'tpl' => '@CODE:<th>[+mf.items+]</th>'
],
[
'type' => 'table:th',
'items' => [
[
'type' => 'date',
'value' => 'Date'
]
],
'tpl' => '@CODE:<th>[+mf.items+]</th>'
],
[
'type' => 'table:th',
'items' => [
[
'type' => 'image',
'value' => 'Image'
]
],
'tpl' => '@CODE:<th>[+mf.items+]</th>'
]
],
'tpl' => '@CODE:<tr>[+mf.items+]</tr>'
]
],
'tpl' => '@CODE:<thead class="thead-dark">[+mf.items+]</thead>'
],
'tbody' => [
'type' => 'table:body',
'items' => [
'row' => [
'type' => 'table:row',
'items' => [
[
'type' => 'table:td',
'items' => [
[
'type' => 'id'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'text'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'text'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'date'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'image'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
]
],
'tpl' => '@CODE:<tr>[+mf.items+]</tr>'
]
],
'tpl' => '@CODE:<tbody>[+mf.items+]</tbody>'
]
],
'tpl' => '@CODE:<table class="table table-sm table-hover table-bordered">[+mf.items+]</table>'
],
'Table' => [
'type' => 'table',
'title' => 'Table',
'placeholder' => 'Table 1 title',
'value' => false,
'items' => [
'tbody' => [
'type' => 'table:body',
'items' => [
'row' => [
'type' => 'table:row',
'items' => [
[
'type' => 'table:td',
'items' => [
[
'type' => 'id',
'placeholder' => 'id'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'text',
'placeholder' => 'Title'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'text',
'placeholder' => 'Title'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'date',
'placeholder' => 'Date'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
],
[
'type' => 'table:td',
'items' => [
[
'type' => 'image',
'placeholder' => 'Image'
]
],
'tpl' => '@CODE:<td>[+mf.items+]</td>'
]
],
'tpl' => '@CODE:<tr>[+mf.items+]</tr>'
]
],
'tpl' => '@CODE:<tbody>[+mf.items+]</tbody>'
]
],
'tpl' => '@CODE:<table class="table table-sm table-hover table-bordered">[+mf.items+]</table>'
]
]
];