Table Filter Custom Option Html

Hi all, In my resource $table, I want to have custom html in one of my select filters.

            ->filters([
                Tables\Filters\SelectFilter::make('sport_id')
                    ->options(function () {
                        $sports = Sport::all();

                        return $sports->mapWithKeys(function ($sport) {
                            $imageUrl = url('/storage/' . $sport->image);
                            $optionLabel = "<span class='filter-option'>
                                <img src='{$imageUrl}' alt='{$sport->name}' class='sport-icon'>
                                {$sport->name}
                            </span>";
                            return [$sport->id => $optionLabel];
                        })->toArray();
                    })
                    ->searchable()
                    ->label('Sport'),

            ->filters([
                Tables\Filters\SelectFilter::make('sport_id')
                    ->options(function () {
                        $sports = Sport::all();

                        return $sports->mapWithKeys(function ($sport) {
                            $imageUrl = url('/storage/' . $sport->image);
                            $optionLabel = "<span class='filter-option'>
                                <img src='{$imageUrl}' alt='{$sport->name}' class='sport-icon'>
                                {$sport->name}
                            </span>";
                            return [$sport->id => $optionLabel];
                        })->toArray();
                    })
                    ->searchable()
                    ->label('Sport'),

But Im getting raw HTML as result.

Solution:

Actually: https://github.com/filamentphp/filament/pull/14228...

GitHub

Htmlable Select Filter by CodeWithDennis · Pull Request #14228 · fi...

Description The SelectFilter didn't support the ->allowHtml() method, even though the Select:: form component does. This PR fixes that issue. Visual changes Functional changes Co...

Jump to solution

6 Replies

LeandroFerreira•2mo ago

$optionLabel = new HtmlString("<span class=...

DjomlaOP•2mo ago

@LeandroFerreira Can you provide whole example how can I get image in label in SelectFilter as I can't make this to work Thanks

anacrk•3w ago

Struggling with the same issue, it seems that filters do not allow html inside, i tried with HtmlString, string, rendered blade view etc... Anyone have an idea for this ? 👀

toeknee•3w ago

Sounds like the SelectFilter needs support adding for allowHtml()

Solution

toeknee•3w ago

Actually: https://github.com/filamentphp/filament/pull/14228

GitHub

Htmlable Select Filter by CodeWithDennis · Pull Request #14228 · fi...

Description The SelectFilter didn't support the ->allowHtml() method, even though the Select:: form component does. This PR fixes that issue. Visual changes Functional changes Co...

anacrk•3w ago

Thank you so much!

Gaming

Programming

Table Filter Custom Option Html