How to make custom component using filament functionality/ methods ?

in Laravel 11 / filamentphp 3.2 app several times I use similar TextColumn with icon and tooltip as :

          TextColumn::make('summary_points_percent')
                 ->getStateUsing(function (Model $record): string {
                     return UserQuizRequestHelper::getSummaryPointsPercent($record);
                 })
                 ->icon(static fn(UserQuizRequest $record) => \Str::substrCount($record->summary_points_percent, '100%') === 1 ? UserQuizRequestHelper::get100PercentResultIcon() : '')
                 ->tooltip(static fn(UserQuizRequest $record)
                 => \Str::substrCount($record->summary_points_percent, '100%') ? '100 percent result' : '')
                 ->iconPosition('after'),

I works ok but I wonder if there is a way to implement it as a) custom component b) custom propery of TextColumn component ?

I found an example how custom TextColumn

https://www.youtube.com/watch?v=FKqv4WJwEwU

with command

php   artisan  make:table-column  SummaryPointsPercent

I got component and blade file - I can use any laravel commands here - but I need to use filament functionality/ methods "icon", "tooltip" and I do not know how can I do it...

Merklin

1 year ago

Level 7

To use those methods, open the TextColumn class and see what traits are used. Then, inspect them and import those that you need into your new table column class. You may have to add use Filament\Tables\Columns\Concerns; at the top of your new class if autoimport doesn't work.

For example, to use an icon you need use Concerns\HasIcon; trait.

karim_aouaouda

1 year ago

Level 1

if realy need to do that, and i think you don't becasue you can use htmlfunction for example if i want to make the user column more customable just, use html() and view() methods for example :

		return $table
						->columns([
								TextColumn::make('user_id')
										->label('user')
										->html()
										->view(function(Model $record, string $state){
												return view(
															'your-custom-view', 
															['user' => User::find($state)]
);
										})
										->icon()
										...
						])

like this, instead of render a user id as a number u can render more information in an html format like a pic and if you perform more details like why you need a component maybe we can provide you with a better sollution, if you need really a custom component, just extends the TextColumn Component

Merklin

1 year ago

Level 7

@karim_aouaouda This is good for a single use. Suppose you need the same column to be used in multiple resources. It is better to create a custom component to reduce code bloat and code duplication.

karim_aouaouda

1 year ago

Level 1

@Merklin yes, exactly however , that's why i ask him to provide more details, i mean who knows if he will use it in many resources :)

mstdmstd

1 year ago

Level 8

Yes, I need some custom component, which would be used in many components

I opened files vendor/filament/tables/src/Columns/TextColumn.php and vendor/filament/tables/resources/views/columns/text-column.blade.php.

THey have a lot of code,especially the last file...

As I need to all functionality of TextColumn and add some functionality I modified in app/Tables/Columns/SummaryPointsPercent.php :

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;
use Filament\Tables\Columns\TextColumn;

class SummaryPointsPercent extends TextColumn
{
    protected string $view = 'tables.columns.summary-points-percent';
}

So I extend my component from TextColumn.

Next I need to edit resources/views/tables/columns/summary-points-percent.blade.php file. It has o lot of code. a) I do not think that is a good idea to edit it - it is rather complicated. b) If there is a way to edit / add code to source of my SummaryPointsPercent :

                 ->getStateUsing(function (Model $record): string {
                     return UserQuizRequestHelper::getSummaryPointsPercent($record);
                 })
                 ->icon(static fn(UserQuizRequest $record) => \Str::substrCount($record->summary_points_percent, '100%') === 1 ? UserQuizRequestHelper::get100PercentResultIcon() : '')
                 ->tooltip(static fn(UserQuizRequest $record)
                 => \Str::substrCount($record->summary_points_percent, '100%') ? '100 percent result' : '')
                 ->iconPosition('after')

Not shure in which way I can do it...

I hope I explaned clear what I want...

Please or to participate in this conversation.