Sports Standings Tables by Group

The main logic here lives in a custom page with a custom Livewire component that houses a Filament table:

• We have created a simple Filament Page called "Groups Overview"
• That page loads the initial groups and runs a foreach loop to display a Livewire component for each group
• Livewire component loads details about the group and all the teams
• It forms a Filament table and displays that table on the page
• There is a modified database query to order our teams by the score they have (one win = 2 points, one loss = 1 point)
• The table has quite a few custom column implementations that mutate the data to achieve the desired result
  • The Order column has a custom implementation that displays a badge for X amount of places (configured in the config file)
  • The Name column has a prefix that displays the team flag
  • The Matches Played column counts how many games were played in real time
  • Wins and Losses columns count how many games were won/lost in real-time
  • The Total Points column sums up the scored vs. missed points from the format X:Y in real-time
  • Points calculates points in real-time for display (this could be extracted to the database, but we kept it as an example!)
  • Badges uses a clever Blade injection to display Filament badges based on W or L per each game.

Here's what that looks like in our code:

app/Filament/Pages/GroupsOverview.php:

use App\Models\Group;
use Filament\Pages\Page;
use Filament\Support\Icons\Heroicon;
 
class GroupsOverview extends Page
{
    // ...

Next, we'll create the groupped table that matches all of our requirements.