ArtiGrid
v1.5

HTML template Crud

With ArtiGrid, you can fully customize the layout of your CRUD interface using simple HTML templates. This approach gives you complete control to reposition elements like search controls, action buttons, pagination, and the table exactly where you need them.

Instead of being restricted to a fixed layout, you can design your own interface by rearranging placeholders such as {search_input}, {search_column}, {add_button}, {bulk_delete}, {pagination}, {perpage}, and {table}.

Unlike traditional CRUD generators, ArtiGrid separates the search input and the column selector, allowing you to place them independently in your layout. For example, you can position the column filter next to other controls while keeping the search input aligned to the right, or even hide one of them if needed.

For backward compatibility, the {search} placeholder is still available and renders both elements together.

This flexibility makes it easy to adapt the UI to different dashboards, admin panels, or custom design systems without modifying the core logic.


<?php
    $grid = new ArtiGrid();
    $grid->setCrudTemplate('
        <div class="d-flex justify-content-between align-items-center mb-2 p-2">
            <div class="d-flex gap-2">
                {bulk_delete} 
                {pagination}
            </div>
            <div class="d-flex gap-2">
                {add_button}
                {refresh}
            </div>
        </div>
        <div>{table}</div>
        <div class="d-flex align-items-center mt-2 p-2 w-100">
            <div>
                {perpage}
            </div>
            <div class="ms-auto d-flex gap-2 align-items-center">
                {search_input}
                {search_column}
            </div>
        </div>
    ');
    $grid->table('payments')
        ->template('bootstrap5')
        ->fieldCss('customerNumber', ['customerNumber', 'demo'])
        ->formFields(['customerNumber','checkNumber','paymentDate', 'amount']) // show certain fields in the form
        ->modal();
    echo $grid->render();
?>
    paymentId customerNumber checkNumber paymentDate amount Actions