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:

filament custom page DB schema

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.

custom page result

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...

The full tutorial [7 mins, 1239 words] is only for Premium Members

Login Or Become a Premium Member for $129/year or $29/month
What else you will get:
  • 59 courses (1057 lessons, total 42 h 44 min)
  • 80 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials