DOCS
DOCS

Languages

Version

Theme

表格构造器 - Columns

文本字段

文本字段展示对应数据库数据中的简单文本：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')

展示描述

描述可被用于在字段内容的上方或者下方渲染额外的文本。

使用 description() 方法会在文本内容的下方显示描述：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->description(fn (Post $record): string => $record->description)

默认情况下，描述显示在主文本下方，不过你也可以传入第二个参数将其移动到文本上方：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->description(fn (Post $record): string => $record->description, position: 'above')

日期格式

你可以使用 date() 和 dateTime() 方法，对使用 PHP 日期格式串的值进行格式化:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('created_at')->dateTime()

你可以使用 since() 方法用 Carbon 的 diffForHumans() 格式化字段状态值：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('created_at')->since()

货币格式

money() 方法让你快速格式化以任何货币格式化金额。此功能内部使用 akaunting/laravel-money 实现：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('price')->money('eur')

限制文本长度

你也可以使用 limit() 限制单元格值的长度:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')->limit(50)

你也可以重新使用传入到 limit() 的值：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')
    ->limit(50)
    ->tooltip(function (TextColumn $column): ?string {
        $state = $column->getState();
 
        if (strlen($state) <= $column->getLimit()) {
            return null;
        }
 
        // Only render the tooltip if the column contents exceeds the length limit.
        return $state;
    })

限制字数

你可以使用 words() 限制单元格字数：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')->words(10)

内容换行

如果你的字段内容太长，你需要让其换行。可以使用 wrap() 方法：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')->wrap()

渲染 HTML

如果字段值是 HTML，可以使用 html() 方法渲染:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')->html()

Enum 格式

你可以使用 enum() 方法将一套已知的单元格值进行转换：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('status')->enum([
    'draft' => 'Draft',
    'reviewing' => 'Reviewing',
    'published' => 'Published',
])

展示行号

你可能需要在表格中展示当前行的行号：

use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;
 
TextColumn::make('index')->getStateUsing(
    static function (stdClass $rowLoop, HasTable $livewire): string {
        return (string) (
            $rowLoop->iteration +
            ($livewire->tableRecordsPerPage * (
                $livewire->page - 1
            ))
        );
    }
),

自定义格式

你也可以传入一个自定义格式的回调函数作为参数到 formatStateUsing() 方法中，回调函数可以接收单元格的状态 state 参数，和可选参数 $record：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('status')
    ->formatStateUsing(fn (string $state): string => __("statuses.{$state}"))

如果 cell 为空添加占位符

有时，你想在 cell 值为空时展示占位符：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('updated_at')
    ->placeholder('Never')

自定义颜色

你可以为文本设置颜色，比如 primary、secondary、success、warning 或 danger:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('status')
    ->color('primary')

添加图标

文本字段也可以添加图标:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->icon('heroicon-s-mail')

使用 iconPosition() 设置图标位置:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->icon('heroicon-s-mail')
    ->iconPosition('after') // `before` or `after`

自定义文本字体大小

使用 size('sm') 可以让文本字体变小：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->size('sm')

或者 size('lg') 使其变大：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->size('lg')

自定义字体粗细

文本字段字体粗细默认是常规字体。不过你可以改为如下选项: thin、extralight、light、medium、semibold、bold、extrabold 或 black。

比如，你可以使用 weight('bold') 改为粗体：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->weight('medium')

自定义字体类型

你可以将字体类型修改为如下选项：sans、serif 或 mono。

比如，你可以使用 fontFamily('mono') 将字体设置为 mono：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('text')
    ->fontFamily('mono')

允许将文本复制到剪切板

你可以将文本设为可复制，这样点击单元格可将文本复制到剪切板，并可以选择指定自定义确认消息和持续时间(以毫秒为单位)。此功能仅在应用程序启用 SSL 时有效。

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->copyable()
    ->copyMessage('Email address copied')
    ->copyMessageDuration(1500)

Filament 在后台面板中使用 tooltip 展示复制信息。如果你想要在后台面板之外使用复制特性，请确保你的应用中安装了 @ryangjchandler/alpine-tooltip 。

自定义复制到剪贴板的文本

使用 copyableState() 方法，你可以自定义复制到剪贴板的文本：

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('url')
    ->copyable()
    ->copyableState(fn (string $state): string => "URL: {$state}")

本函数中，你可以使用 $record 函数访问整条记录：

use App\Models\Post;
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('url')
    ->copyable()
    ->copyableState(fn (Post $record): string => "URL: {$record->url}")
Edit on GitHub

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

上一页
开始
下一页
Icon column