Tricks

Center icon on Boolean or Icon columns

May 30, 2022
Ramón Zayas
Table builder

When you use BooleanColumn or IconColumn the icon is not centered even if you use the alignCenter() option. You can use some extra CSS on the column to get the desired result. Use extraAttributes(['class' => 'flex justify-center']).

IconColumn::make('track_hits')
->extraAttributes(['class' => 'flex justify-center'])
->options(['heroicon-o-chart-pie' => fn ($state): bool => $state == true])
->url(fn (Link $record): string|null => $record->track_hits ? LinkResource::getUrl('stats', ['record' => $record]) : null).
->label(__('Tracking')),
avatar

It works for me with additional w-full class