Filament 表格操作按钮固定技巧

在 Filament 的表格中，当列数较多需要横向滚动时，最右侧的操作按钮列会随着滚动而移出视野，这样用户需要频繁滚动才能操作表格行。

可以使用下面的方式通过自定义 CSS 样式来实现操作按钮列的固定效果。

创建主题

按照 Filament 文档创建一个自定义主题。

php artisan make:filament-theme admin --pm=yarn

然后按照以下步骤操作：

在 vite.config.js 的 input 数组中添加一个新项：resources/css/filament/admin/theme.css
在管理面板提供者中注册主题：->viteTheme('resources/css/filament/admin/theme.css')
运行 yarn build 编译主题

添加 CSS 样式

将以下 CSS 代码添加到主题文件中：

.fi-ta-row {
    .fi-ta-cell:last-of-type {
        @apply relative right-0 top-0 bottom-0;
        > div {
            @apply bg-white dark:bg-gray-900;
        }
    }
    .fi-ta-cell:last-of-type {
        @apply sticky;
        > div {
            @apply shadow-md rounded-full py-2;
        }
    }
}

仅悬停时固定

如果只想在鼠标悬停在行上时固定操作按钮，可以将代码修改为：

.fi-ta-row {
    /* 确保行有相对定位 */
    @apply relative;

    &:hover .fi-ta-cell:last-of-type {
        /* 确保按钮在其他内容之上 */
        @apply sticky right-0 z-20;

        > div {
            @apply bg-white dark:bg-gray-900 shadow-md rounded-lg px-2;
            /* 确保按钮容器有正确的堆叠上下文 */
            @apply relative;
            /* 可选:添加模糊背景效果 */
            @apply backdrop-blur-lg;
        }
    }
}

使用 position: sticky 实现固定效果
通过 @apply 指令应用 Tailwind CSS 类
使用 last-of-type 选择器定位操作按钮列
通过 dark: 变体支持暗色模式

选择性固定操作按钮

如果只想对特定资源的表格启用固定效果,可以通过以下步方式实现:

在资源类比如 app/Filament/Resources/UserResource.php 中添加自定义 CSS 类:

use Filament\Resources\Table;

class UserResource extends Resource
{
    public static function table(Table $table): Table
    {
        return $table
            ->recordClasses('sticky-actions-row');
    }
}

修改 CSS 样式，只对带有特定类的表格生效:

/*resources/css/filament/admin/theme.css*/
.sticky-actions-row.fi-ta-row {
    &:hover .fi-ta-cell:last-of-type {
        @apply sticky right-0 z-20;

        > div {
            @apply bg-white dark:bg-gray-900 shadow-md rounded-lg px-2;
            /* 确保按钮容器有正确的堆叠上下文 */
            @apply relative;
            /* 可选:添加模糊背景效果 */
            @apply backdrop-blur-lg;
        }
    }
}

这样只有添加了 sticky-actions-row 类的资源表格才会启用固定操作按钮的效果，其他资源表格将保持默认行为。

也可以根据需要为不同的资源表格添加不同的类名，实现差异化的固定效果:

// app/Filament/Resources/PostResource.php
public static function table(Table $table): Table
{
    return $table
        ->recordClasses('always-sticky-actions'); // 使用不同的类名
}

然后在 CSS 中为不同的类名定义不同的样式:

/* resources/css/filament/admin/theme.css */
/* 悬停时固定 */
.sticky-actions-row.fi-ta-row {
    /* 确保行有相对定位 */
    @apply relative;

    &:hover .fi-ta-cell:last-of-type {
        /* 确保按钮在其他内容之上 */
        @apply sticky right-0 z-20;

        > div {
            @apply bg-white dark:bg-gray-900 shadow-md rounded-lg px-2;
            /* 确保按钮容器有正确的堆叠上下文 */
            @apply relative;
            /* 可选:添加模糊背景效果 */
            @apply backdrop-blur-lg;
        }
    }
}

/* 始终固定 */
.always-sticky-actions.fi-ta-row {
    .fi-ta-cell:last-of-type {
        @apply relative right-0 top-0 bottom-0;
        > div {
            @apply bg-white dark:bg-gray-900;
        }
    }
    .fi-ta-cell:last-of-type {
        @apply sticky;
        > div {
            @apply shadow-md rounded-full py-2;
        }
    }
}

这样只有添加了 sticky-actions-row 类的资源表格当鼠标悬浮时才会启用固定操作按钮的效果，添加了 always-sticky-actions 类的资源表格将始终固定操作按钮，而其他资源表格将保持默认行为。