Languages

Version

Theme

表格

空状态

简介

表格的“空状态”指的是渲染时表格中没有数据。

Table with empty state

设置空状态标题

要自定义空状态时的标题,请使用 emptyStateHeading() 方法:

use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->emptyStateHeading('No posts yet');
}
Table with customized empty state heading

设置空状态描述

要自定义空状态时的描述,请使用 emptyStateDescription() 方法:

use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->emptyStateDescription('Once you write your first post, it will appear here.');
}
Table with empty state description

设置空状态图标

要自定义空状态时的图标,请使用 emptyStateIcon() 方法:

use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->emptyStateIcon('heroicon-o-bookmark');
}
Table with customized empty state icon

添加空状态操作

你可以添加 Action 到空状态中,用以提示用户采取措施。将操作传入到 emptyStateActions() 方法中:

use Filament\Actions\Action;
use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->emptyStateActions([
            Action::make('create')
                ->label('Create post')
                ->url(route('posts.create'))
                ->icon('heroicon-m-plus')
                ->button(),
        ]);
}
Table with empty state actions

使用自定义空状态视图

通过将视图传入到 emptyState() 方法,你可以使用完全自定义空状态视图:

use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->emptyState(view('tables.posts.empty-state'));
}
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

Previous
行分组