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>'
        ]
    ]
];