Data Table - Empty States

When items is empty, the data table does not show an empty table. It shows an EmptyState block instead, and hides the pager.

There are two cases, and the table shows a different message for each:

The list has no items. The table shows your icon, title and text. If add is on, it also shows the create button, which emits (create) like the one in the toolbar.

The search filtered out all items. The table shows "No matches" with a Clear search button. The button empties the search box and emits (search) with an empty string. The create button is not shown here.

Example

Search for a name that does not exist to see the "No matches" state. Click Remove all with an empty search box to see the empty list state.

HTML:

<DataTable columns="$columns" items="$shown" search add addText="Add sample heroes" (search)="onSearch" (create)="addSamples"
    emptyIcon="bi-people" emptyTitle="No heroes yet" emptyText="Heroes you add show up here.">
    <slotContent name="actions">
        <button type="button" class="btn btn-outline-danger" (click)="removeAll">Remove all</button>
    </slotContent>
</DataTable>

PHP:

<?php

namespace ExamplesUi\Tables;

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

class TableEmptyExample extends BaseComponent
{
    public array $columns = [];
    // all heroes
    public array $heroes = [];
    // heroes that match the search
    public array $shown = [];
    public string $searchText = '';

    public function init()
    {
        $this->columns = [
            new TableColumn('Id'),
            new TableColumn('Name'),
        ];
        $this->addSamples();
    }

    public function addSamples()
    {
        $names = ['Superman', 'Batman', 'Wonder Woman'];
        $list = [];
        $id = 0;
        foreach ($names as $name) {
            $hero = new HeroModel();
            $id++;
            $hero->Id = $id;
            $hero->Name = $name;
            $list[] = $hero;
        }
        $this->heroes = $list;
        $this->applySearch();
    }

    public function removeAll()
    {
        $this->heroes = [];
        $this->applySearch();
    }

    public function onSearch(string $text)
    {
        $this->searchText = strtolower($text);
        $this->applySearch();
    }

    public function applySearch()
    {
        $text = $this->searchText;
        $this->shown = array_values(array_filter(
            $this->heroes,
            fn(HeroModel $hero) => $text === '' || strpos(strtolower($hero->Name), $text) !== false
        ));
    }
}

Custom Empty Block

To replace the whole block for the empty list, use the empty slot. The slot is not used for the "No matches" case.

<DataTable columns="$columns" items="$heroes">
    <slotContent name="empty">
        <p class="text-muted text-center py-5">No heroes yet. Import a list to get started.</p>
    </slotContent>
</DataTable>

Properties

emptyIcon - (optional) the icon of the empty list block. Default: bi-inbox.

emptyTitle - (optional) the title of the empty list block. Default: Nothing here yet.

emptyText - (optional) the text under the title. Default: '' (no text).

Slots

empty - replaces the block shown when the list has no items.