Getting started
Library
Components
Integrations
Sorters
You can use sorters in the media library to sort the returned selection of media items.
Default Media Library sort
By default, the Media Library is sorted in the following order:
- Filesystem-based drivers (e.g., S3, Local): name ascending
- MediaLibraryItem-driver: created descending
The reason for the difference is that filesystems do not always reliably store the created date of files, but rather the updated date. For the MediaLibraryItem-driver, we can rely on the created date stored in the database.
To modify the default sort order, you can use the ->defaultSorterModifications() method on the driver:
use RalphJSmit\Filament\Explore\Drivers\Modifications\Orders\FilenameModification;
use RalphJSmit\Filament\Explore\Sorters\Enums\SortDirection;
$driver
->defaultSorterModifications([
FilenameModification::make()
->sortDirection(SortDirection::Ascending),
]);Default sorters
By default, the Media Library comes with the following sorters:
Name
The name sorter allows you to order media items by name.
Updated
The updated sorter allows you to order media items by updated date.
Size
The size sorter allows you to sort media items by mime type.
Type
The type sorter allows you to sort media items by type.
Custom sorter
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.
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:
$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:
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:
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.
Disable sorting
To hide all sorters, pass an empty array to the sorters() method when registering the plugin:
$plugin->sorters([]);