如何在Filament资源页面的表格前后添加HTML块及附加信息

一、表格前后添加HTML块 #

在Filament的列表页面（表格页面），可以通过重写getHeader()和getFooter()方法，直接返回HTML代码块，分别渲染在表格的顶部和底部。

示例代码：

use Filament\Pages\ListRecords;

class ListProducts extends ListRecords
{
    protected static string $resource = ProductResource::class;

    // 表格顶部添加HTML提示块
    protected function getHeader(): ?string
    {
        return <<<'HTML'
            <div class="p-4 bg-blue-50 rounded-lg mb-4">
                <h3 class="text-lg font-semibold">产品列表说明</h3>
                <p>此页面展示所有已上架的产品，操作列支持编辑、删除等操作。</p>
            </div>
        HTML;
    }

    // 表格底部添加HTML提示块
    protected function getFooter(): ?string
    {
        return <<<'HTML'
            <div class="p-4 bg-gray-50 rounded-lg mt-4">
                <p>⚠️ 删除产品后无法恢复，请确认操作前备份相关数据。</p>
            </div>
        HTML;
    }
}

你可以在HTML里使用Filament内置的Tailwind CSS类，保持和系统风格统一。

二、表格旁展示额外文本/信息 #

如果需要在表格侧边（左右均可）展示信息，有两种常用方法：

方法1：自定义页面布局 #

重写列表页面的getContent()方法，引入自定义Blade视图，用网格布局拆分表格和信息块。

1. 修改列表页面代码：

use Filament\Pages\ListRecords;
use Illuminate\Contracts\View\View;

class ListProducts extends ListRecords
{
    protected static string $resource = ProductResource::class;

    // 自定义页面内容结构
    public function getContent(): View
    {
        return view('filament.pages.list-products', [
            'table' => $this->table,
        ]);
    }
}

2. 创建对应的Blade视图文件resources/views/filament/pages/list-products.blade.php：

<x-filament-panels::page>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧信息栏 -->
        <div class="lg:col-span-1">
            <div class="p-6 bg-white rounded-lg shadow">
                <h3 class="text-xl font-bold mb-3">操作指南</h3>
                <ul class="space-y-2">
                    <li>✅ 点击「新建产品」按钮添加商品</li>
                    <li>🔍 顶部搜索框支持按名称/分类检索</li>
                    <li>⚙️ 编辑产品可修改状态、价格等信息</li>
                </ul>
            </div>
        </div>
        <!-- 右侧表格区域 -->
        <div class="lg:col-span-2">
            {{ $table }}
        </div>
    </div>
</x-filament-panels::page>

调整grid-cols参数可以切换左右布局的宽度占比。

方法2：使用自定义Widget #

如果信息是固定提示或统计类内容，可以创建Widget并挂载到页面侧边栏。

1. 创建Widget类：

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;

class ProductGuideWidget extends Widget
{
    protected static string $view = 'filament.widgets.product-guide-widget';

    // 设置Widget宽度
    protected int | string | array $columnSpan = 'full';
}

2. 创建Widget对应的视图resources/views/filament/widgets/product-guide-widget.blade.php：

<div class="p-4 bg-white rounded-lg shadow">
    <h3 class="text-lg font-semibold mb-2">产品管理提示</h3>
    <p>产品状态设为「下架」后，将不会在前端商城展示，如需恢复上架请编辑产品修改状态。</p>
</div>

3. 在列表页面挂载Widget到侧边栏：

protected function getSidebarWidgets(): array
{
    return [
        ProductGuideWidget::class,
    ];
}

内容的提问来源于stack exchange，提问作者Akinbomi Oluwadamilare