Inertia Table Documentation

Appearance

Empty State ​

An Inertia Table with no records to display may show an empty state with a title, message, icon, and call-to-action buttons (such as "Create user"). The empty state only appears when the table genuinely has no records, not when filters or a search query have hidden them, and it may be fully replaced with a custom Vue or React slot when the default UI doesn't fit.

Defining the Empty State ​

To define the Empty State, implement the emptyState() method on your Table class. It should return an instance of the EmptyState class.

php
use InertiaUI\Table\EmptyState;

class Users extends Table
{
    public function emptyState(): ?EmptyState
    {
        return EmptyState::make();
    }
}

By default, the Empty State shows "No results found." You may customize it via arguments on make() or the dedicated fluent methods:

php
EmptyState::make(
    title: 'No users found',
    message: 'Whoops! It looks like there are no users to display.',
);

EmptyState::make()
    ->title('No users found')
    ->message('Whoops! It looks like there are no users to display.');

Icon ​

The default UI shows an empty inbox icon. You may customize it by passing an icon name to the icon argument or the icon() method. Pass false to hide the icon entirely:

php
EmptyState::make(icon: 'UsersIcon');

EmptyState::make()->icon(false);

Actions ​

You may add buttons to the Empty State via the action() method. At its simplest, pass a label and a URL:

php
EmptyState::make()->action('Create User', route('users.create'));

You may also specify an icon and a Button Variant, using the same Variant enum as Row Actions:

php
use InertiaUI\Table\Variant;

EmptyState::make()->action(
    label: 'Create User',
    url: route('users.create'),
    variant: Variant::Info,
    icon: 'UserAddIcon'
);

You may also pass a custom class for the button along with Data Attributes and Metadata:

php
EmptyState::make()->action(
    label: 'Create User',
    url: route('users.create'),
    buttonClass: 'custom-class',
    dataAttributes: ['button-type' => 'create'],
    meta: ['key' => 'value'],
);

Instead of a literal URL, you may pass a callback that receives a Url instance. See the Row Links documentation for the full list of Url methods.

php
use InertiaUI\Table\Url;

EmptyState::make()->action(
    label: 'Create User',
    url: fn (Url $url) => $url->route('users.create')->openInNewTab(),
);

Data Attributes ​

You may add Data Attributes to the Empty State via the dataAttributes argument on make() or the dataAttributes() method. Keys do not need a data- prefix.

php
EmptyState::make()->dataAttributes([
    'users-type' => 'customers',
]);

Metadata ​

You may attach metadata to the Empty State via the meta argument on make() or the meta() method:

php
EmptyState::make()->meta([
    'key' => 'value',
]);

The default Table component ignores this metadata and does not pass it to any DOM element. It becomes useful when using a custom Empty State component.

Custom Empty State Component ​

To replace the default Empty State UI with your own, pass a slot named emptyState to the Table component. The Table component takes care of deciding when to render it.

vue
<Table :resource="users">
    <template #emptyState="{ table }">
        <div class="border-gray-200 border-2 p-4 rounded-md text-center">
            Oh no! No users found.
        </div>
    </template>
</Table>
jsx
<Table
    resource={users}
    emptyState={(table) => <div className="border-gray-200 border-2 p-4 rounded-md text-center">
        Oh no! No users found.
    </div>}
/>