Empty State

Without configuration an empty table shows "No results found.". Give it texts of your own in the Table class:

$table->emptyState(
    title: 'No rooms yet',
    description: 'Add the first room of this venue.',
    filteredTitle: 'No rooms match',
    filteredDescription: 'Try another search or filter.',
);

The filtered texts are shown while a search or a filter has a value, which includes a filter with a default value. Without them the table falls back to title and description.

From Vue

The emptyState prop takes the same keys and overrides the server texts one by one:

<TableBuilder :table="table" :empty-state="{title: $t('rooms.empty.title')}"/>

The `empty` Slot

Render anything you like in the empty row. The slot receives:

Scope	Description
`filtered`	Whether a search or filter is active
`title`	The title that would be shown
`description`	The description that would be shown, or `null`
`reset`	Removes the search and every filter from the query and reloads

<TableBuilder :table="table">
    <template #empty="{filtered, reset}">
        <div v-if="filtered" class="py-6">
            <p>No rooms match.</p>
            <Button variant="link" @click="reset">Clear search and filters</Button>
        </div>
        <div v-else class="py-6">
            <p>No rooms yet.</p>
            <Button as-child><Link :href="create()">Add room</Link></Button>
        </div>
    </template>
</TableBuilder>

reset removes the query parameters; a filter with a default value is applied again afterwards.

Empty State

From Vue

The empty Slot

The `empty` Slot