Data Table - Create Edit Delete Actions

Data table has action buttons and column available for use.

Create button

Pass add property (boolean) to enable create button.

Optionally, pass addText text for the button.

Use (create) event to handle the creation.

Example:

<DataTable columns="$columns" items="$items" add addText="Create Hero" (create)="addNew" />

<?php

namespace ExamplesUi\Tables;

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

class FormsExample extends BaseComponent
{
    //...

    public function addNew()
    {
        $id = count($this->items) + 1;
        $hero = new HeroModel();
        $hero->Id = ++$id;
        $hero->Name = 'Ant-Man #' . $id;
        $hero->Description = "Adventurer, Biochemist, former manager of Avengers Compound'";
        $this->items = [...$this->items, $hero];
    }
}

The result:

Edit and Delete

To enable edit and delete action pass edit and remove (boolean) properties.

The buttons appear in an extra column with the "Actions" title. Each property controls its own button, so edit alone shows only the edit button.

To handle events use (edit) and (delete).

(edit) - (T $item): void

(delete) - (T $item): void

Type is optional.

Example:

<DataTable
    columns="$columns"
    items="$items"
    edit
    remove
    (edit)="onEdit"
    (delete)="onDelete"
/>

<?php

namespace ExamplesUi\Tables;

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

class FormsExample extends BaseComponent
{
    //...

    public function onEdit(HeroModel $hero)
    {
        $hero->Name = 'New ' . $hero->Name;
    }

    public function onDelete(HeroModel $hero)
    {
        $this->items = array_filter($this->items, fn(HeroModel $m) => $m !== $hero);
    }
}

The result:

Inline Edit

You can use inline editing with editInline property set to true.

Pass edit_{COLUMN_NAME} slots for the template if edit mode is activated.

Use (save) event to save the result.

Or (cancel) to reset the editing.

Example:

<DataTable
    #dataTable
    columns="$columns"
    items="$items"
    edit
    editInline
    (save)="onSave"
    (edit)="preserveHero"
    (cancel)="onCancel"
>
    <slotContent name="edit_Name" data="$item">
        <td>
            <TextInput inset name="Name" model="$item->Name" />
        </td>
    </slotContent>
</DataTable>

<?php

namespace ExamplesUi\Tables;

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

class FormsExample extends BaseComponent
{
    public ?DataTable $dataTable = null;
    public string $heroNameBeforeEdit = '';
    //...

    public function onSave(HeroModel $hero)
    {
        // switch off the edit mode
        $this->dataTable->finishEdit();
        // save the hero, in our case it's already updated
    }

    public function preserveHero(HeroModel $hero)
    {
        $this->heroNameBeforeEdit = $hero->Name;
    }

    public function onCancel(HeroModel $hero)
    {
        // cancel the edit, reset all changes if need
        $hero->Name = $this->heroNameBeforeEdit;
    }
}

The result:

To add your own toolbar buttons or row buttons, see Actions.

Properties

add - (optional) shows the create button in the toolbar and in the empty state. Default: false.

addText - (optional) the text of the create button. Default: Add.

edit - (optional) shows the edit button in each row. Default: false.

remove - (optional) shows the delete button in each row. Default: false.

editInline - (optional) the edit button switches the row to edit mode, using the edit_{COLUMN_NAME} slots. Default: false.

Events

(create) - (): void. Emitted when the create button is clicked.

(edit) - (T $item): void. Emitted when the edit button is clicked.

(delete) - (T $item): void. Emitted when the delete button is clicked.

(save) - (T $item): void. Emitted when the save button is clicked in inline edit mode.

(cancel) - (T $item): void. Emitted when the cancel button is clicked in inline edit mode. The table leaves edit mode before it emits the event.

Methods

finishEdit() - leaves inline edit mode. Call it on a table reference (#dataTable) after you save the item.

Slots

edit_{COLUMN_NAME} - the cell for the column in inline edit mode. Receives the item in data. Wrap the content in a td.