Filament Custom Page Example with Repeater: Pick Game Winners

Filament is a great admin panel system, but it often confuses users how to create a custom non-CRUD page in Filament that wouldn't be a typical Resource? This tutorial will provide an example.

The Initial Task

In this tutorial, we will create a custom Filament page with just one form. We will use a Repeater field for selecting the winners for the game.

This tutorial has three Models:

• Game
• Player
• User

This is what the DB schema looks like:

Our task is to build a custom page to pick the winner players for a particular game. So it's not a typical "Game Edit" page but something different.

It will be a Repeater with 10 dropdowns.

Important: after selecting the player in one dropdown, it should automatically be removed from all the other dropdowns.

Setup Filament Resource

We will have only one Filament Resource for Games.

app/Filament/Resources/GameResource.php:

use App\Models\Game;
use Filament\Resources\Form;
use Filament\Resources\Table;
use Filament\Resources\Resource;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Components\TextInput;
 
class GameResource extends Resource
{
    protected static ?string $model = Game::class;
 
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->required(),
            ]);
    }
 
    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name'),
            ]);
    }
 
    public static function getPages(): array
    {
        return [
            'index'   => Pages\ListGames::route('/'),
            'create'  => Pages\CreateGame::route('/create'),
            'edit'    => Pages\EditGame::route('/{record}/edit'),
        ];
    }
}

Step 1. Empty Custom Page with a Link

So first, we need to create...