Inertia Table Documentation

Appearance

Empty State ​

Inertia Table can show an Empty State when there are no records to display. You can use this feature to show a message and buttons, for example, to navigate to a create page. It is only shown on the first page when no filters or search queries are applied.

Defining the Empty State ​

To define the Empty State, you can use the emptyState() method in your Table class. This method 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 will show a message saying, "No results found." You can customize this by passing arguments to the make() method or by using the respective 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 can customize this by passing an icon name to the icon argument or the icon() method. You may also hide the icon by passing false:

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

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

Actions ​

You can add buttons to the Empty State by using the action() method. In its simplest form, you can pass a label and a URL:

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

However, you may also specify an icon and a Button Variant, which uses the same Variant enum as seen with Row Actions:

php
use InertiaUI\Table\Variant;

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

Additionally, you can pass a custom class for the button and use 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 passing a literal URL, you can pass a callback that receives a Url instance. To learn more about the Url class, check out the Row Links documentation.

php
use InertiaUI\Table\Url;

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

Data Attributes ​

You can add Data Attributes to the Empty State by using the dataAttributes argument in the make() method or by using the dataAttributes method. You don't have to prefix the keys with data-.

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

Metadata ​

You can add metadata to the Empty State by using the meta argument in the make() or by using the meta() method.

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

In the default Table component, this metadata is unused and not passed to any DOM element. However, this feature can be useful when using a custom Empty State component.

Custom Empty State Component ​

Instead of using the default Empty State UI, you can use your own implementation. To do this, you should pass a slot named emptyState to the Table component. You don't have to worry about whether the Empty State is shown or not; the Table component will handle this for you.

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>}
/>