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.

2 Replies

LeandroFerreira•6d ago

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

DjomlaOP•5d 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

Gaming

Programming

Table Filter Custom Option Html