Filament•2y ago

How do I add icon to label of a column?

I am trying to add a icon to the label of a column to signify it has a tooltop

10 Replies

Dennis Koch•2y ago

I don't think we support this 🤔 You'll probably need a custom column.

RichtheKidOP•2y ago

Is it possible to pass custom html to the ->label() ?

Dennis Koch•2y ago

label(new HtmlString('your html'))

RichtheKidOP•2y ago

Alright thanks

RichtheKidOP•2y ago

I was able to add the icon, how do it make it appear on 1 line. Any suggestions?

toeknee•2y ago

->inlineLabel()

Dennis Koch•2y ago

Share your code 🤷🏼‍♂️

RichtheKidOP•2y ago

BadgeColumn::make('avg_performance')->label(fn () => new HtmlString(__('rental-schedules-resource.performance') . Blade::render('<x-heroicon-o-question-mark-circle class="w-3 h-3" x-tooltip.raw="Custom text" />')))->extraAttributes(['class' => 'flex items-center']),

toeknee•2y ago

please read the #❓┊help on asking for help.

BadgeColumn::make('avg_performance')->label(fn () => new HtmlString(__('rental-schedules-resource.performance') . Blade::render('<x-heroicon-o-question-mark-circle class="w-3 h-3" x-tooltip.raw="Custom text" />')))->extraAttributes(['class' => 'flex items-center']),

BadgeColumn::make('avg_performance')->label(fn () => new HtmlString(__('rental-schedules-resource.performance') . Blade::render('<x-heroicon-o-question-mark-circle class="w-3 h-3" x-tooltip.raw="Custom text" />')))->extraAttributes(['class' => 'flex items-center']),

Looking at that, you will want to make them span's to be inline. or use div's with inlines

LeandroFerreira•2y ago

A view could be better I think..

BadgeColumn::make('avg_performance')->label(view('custom-column'))

BadgeColumn::make('avg_performance')->label(view('custom-column'))

<!-- resources/views/custom-column.blade.php -->
<div class="flex items-center">
    <span>__('rental-schedules-resource.performance')</span>
    <x-heroicon-o-question-mark-circle class="w-3 h-3" x-tooltip.raw="Custom text" />
</div>

<!-- resources/views/custom-column.blade.php -->
<div class="flex items-center">
    <span>__('rental-schedules-resource.performance')</span>
    <x-heroicon-o-question-mark-circle class="w-3 h-3" x-tooltip.raw="Custom text" />
</div>

Gaming

Programming

How do I add icon to label of a column?