Creating a custom sorter requires several steps to link it up correctly with the driver. In this example, we'll create a sorter that allows users to sort media items based on whether they are marked as "featured".

Create sorter

First, the sorter-class must be created. This class is responsible for rendering the sorter and defining which modifications should be applied when the sorter is used.

app/MediaLibrary/Sorters/FeaturedSorter.php

use App\MediaLibrary\Modifications\Orders\FeaturedModification;

class FeaturedSorter extends Sorter
{
    public function getIcon(?SortDirection $sortDirection): string | BackedEnum | null
    {
        return Heroicon::OutlinedStar;
    }

    public function getLabel(): string | Htmlable | null
    {
        return 'Sort by featured';
    }

    public function getModifications(?SortDirection $sortDirection): array
    {
        $modifications = [];

        if ($sortDirection) {
            $modifications[] = FeaturedModification::make()->sortDirection($sortDirection);
        }

        return $modifications;
    }
}

Register sorter

Next, the sorter must be registered on the library:

app/Providers/Filament/YourPanelProvider.php

$plugin
    ->sorters([
        FeaturedSorter::make('featured'),
    ])

Create modification

Next, a modification needs to be created. A modification is returned from the sorter, and is responsible for holding the "information" about what needs to be ordered:

app/MediaLibrary/Modifications/Orders/FeaturedModification.php

use RalphJSmit\Filament\Explore\Drivers\Modifications\Modification;
use RalphJSmit\Filament\Explore\Sorters\Enums\SortDirection;

class FeaturedModification extends Modification
{
    protected SortDirection $sortDirection;

    public function sortDirection(SortDirection $sortDirection): static
    {
        $this->sortDirection = $sortDirection;

        return $this;
    }

    public function getSortDirection(): SortDirection
    {
        return $this->sortDirection;
    }
}

Generally, order-modifications only contain the sortDirection() methods.

Apply modification

Finally, it must be told to the driver how to exactly apply the above modification:

app/Providers/Filament/YourPanelProvider.php

use App\MediaLibrary\Modifications\Orders\FeaturedModification;
use RalphJSmit\Filament\Explore\Sorters\Enums\SortDirection;

$plugin
    ->driver(MediaLibraryItemDriver::class, function (MediaLibraryItemDriver $driver) {
        $driver->applyModificationUsing(function (mixed $target, Modification $modification, Closure $next) {
            if ($modification instanceof FeaturedModification) {
                $direction = match ($modification->getSortDirection()) {
                    SortDirection::Ascending => 'asc',
                    SortDirection::Descending => 'desc',
                };
            
                return $target->orderBy('is_featured', $direction);
            }
            
            return $next($target, $modification);
        });
    });

If you have not yet made the choice for a driver, consider using the default recommended Media Library Item-driver. As this driver is database-based, you can easily add custom columns to the filament_media_library-table where you can conveniently store such extra meta-data as whether an item is featured.

This way, the sorter will determine what modifications need to be applied when retrieving the media results, and the driver knows how to interpret these modifications and will apply them.

In the UI, the sorter will now show up as such:

You can read more about modifications and their types in the Modifications documentation.

On this page

Filament Plugins

Sorters

Default sorters

Name

Updated

Size

Type

Custom sorter

Create sorter

Register sorter

Create modification

Apply modification