Data Table - Actions

Besides the built-in create, edit and delete buttons, you can add your own buttons to the table toolbar and to each row.

Example

HTML:

<DataTable columns="$columns" items="$heroes" add addText="Add hero" (create)="addHero">
    <slotContent name="head">
        <h5 class="mb-3">Heroes</h5>
    </slotContent>
    <slotContent name="actions">
        <button type="button" class="btn btn-outline-secondary" (click)="reverse">Reverse order</button>
        <button type="button" class="btn btn-outline-secondary" (click)="exportList">Export</button>
    </slotContent>
    <slotContent name="column_Actions" data="$item">
        <td class="text-end table-stacked-actions">
            <button type="button" class="btn btn-sm btn-outline-primary" (click)="promote($item)">Promote</button>
        </td>
    </slotContent>
</DataTable>

PHP:

<?php

namespace ExamplesUi\Tables;

use ExamplesUi\HeroModel;
use Viewi\Components\BaseComponent;
use Viewi\UI\Components\Tables\TableColumn;

class TableActionsExample extends BaseComponent
{
    public array $columns = [];
    public array $heroes = [];
    public string $message = 'Click a button to see what happens.';

    public function init()
    {
        $this->columns = [
            new TableColumn('Id'),
            new TableColumn('Name'),
            // a column without a matching property, rendered by the column_Actions slot
            new TableColumn('Actions', 'Actions', null, 'text-end'),
        ];
        // ...
    }

    public function reverse()
    {
        $this->heroes = array_reverse($this->heroes);
        $this->message = 'The order is reversed.';
    }

    public function exportList()
    {
        $this->message = 'Exported ' . count($this->heroes) . ' heroes.';
    }

    public function promote(HeroModel $hero)
    {
        $this->message = $hero->Name . ' is promoted.';
    }

    // ...
}

Toolbar Buttons

Put your buttons into the actions slot. They are shown in the toolbar, before the create button.

The toolbar is shown when search or add is on, or when the actions slot is used. So you can have toolbar buttons without the create button.

The buttons are laid out in a row with a gap between them and wrap to the next line when there is not enough room. Do not add margins to them. Below 920px the search box and the buttons take a full row each, and the buttons are centered.

Content Above the Toolbar

Use the head slot for content above the toolbar, such as a title or breadcrumbs. With sticky on, it stays in view together with the toolbar.

Row Buttons

For your own row buttons, add a column and render it with a column_{COLUMN_NAME} slot. The column key does not need to match a property of the item, because the slot renders the cell.

Add the table-stacked-actions class to the td to push the buttons to the end of the row card in the stacked layout. The built-in edit and delete column already has it.

Slots

head - content above the toolbar.

actions - buttons in the toolbar, before the create button.

column_{COLUMN_NAME} - the cell for the column. Receives the item in data. Wrap the content in a td.