conditional table column

Hello i'm trying to make a conditional column..
I've follow this online tutorial to make a settings page https://blog.moonguard.dev/setting-page-with-filament

I've made some change to accept media (I'm using curator plugin) and what i want to achieve is a conditional column

If the type of my setting is media i want a CuratorColumn. For everything else a TextColumn but i don't know how to make this

return $table
            ->columns([
                Tables\Columns\TextColumn::make('label')
                    ->sortable()
                    ->searchable(),
                // If the type is "media" make a CuratorColumn on value
                CuratorColumn::make('value')
                    ->circular(),
                // Else make a TextColumn on value
                Tables\Columns\TextColumn::make('value')
                    ->formatStateUsing(function ($state) {
                        return match ($state) {
                            null => 'Empty',
                            "0" => 'False',
                            "1" => 'True',
                            default => 'OK'
                        };
                    })
                    ->sortable()
                    ->searchable(),
            ])

return $table
            ->columns([
                Tables\Columns\TextColumn::make('label')
                    ->sortable()
                    ->searchable(),
                // If the type is "media" make a CuratorColumn on value
                CuratorColumn::make('value')
                    ->circular(),
                // Else make a TextColumn on value
                Tables\Columns\TextColumn::make('value')
                    ->formatStateUsing(function ($state) {
                        return match ($state) {
                            null => 'Empty',
                            "0" => 'False',
                            "1" => 'True',
                            default => 'OK'
                        };
                    })
                    ->sortable()
                    ->searchable(),
            ])

Create a Simple Settings Page with Filament | MoonGuard - Web Monit...

Learn how to create custom settings page with Filament, from generating migrations to dynamically building the edit form.

Solution

I've finally opted for the custom view because I don't necessarily need a curatorColumn

SettingsResource.php

return $table
            ->columns([
                ...
                Tables\Columns\ViewColumn::make('value')->view('filament.tables.columns.settingColumn'),
            ])
            ...

return $table
            ->columns([
                ...
                Tables\Columns\ViewColumn::make('value')->view('filament.tables.columns.settingColumn'),
            ])
            ...

settingColumn.blade.php

<div class="w-16 flex items-center justify-center">
    @php
        $type = $getRecord()->type;
        $render = null;
        switch ($type) {
            case 'media':
                $media = Awcodes\Curator\Models\Media::where('id', $getState())->first();
                $render = $media ? $media->url : false;
                break;
            default:
                $render = $getState();
                break;
        }
    @endphp
    @switch($type)
        @case("media")
            @if ($render)
                <img class="w-10 h-10 rounded-full" src="{{ $render }}">
            @else
                None
            @endif
        @break
        @case("boolean")
            {{ $render === "0" ? "False" : "True" }}
        @break
        @default
            {{ $render }}
    @endswitch
</div>

<div class="w-16 flex items-center justify-center">
    @php
        $type = $getRecord()->type;
        $render = null;
        switch ($type) {
            case 'media':
                $media = Awcodes\Curator\Models\Media::where('id', $getState())->first();
                $render = $media ? $media->url : false;
                break;
            default:
                $render = $getState();
                break;
        }
    @endphp
    @switch($type)
        @case("media")
            @if ($render)
                <img class="w-10 h-10 rounded-full" src="{{ $render }}">
            @else
                None
            @endif
        @break
        @case("boolean")
            {{ $render === "0" ? "False" : "True" }}
        @break
        @default
            {{ $render }}
    @endswitch
</div>

Jump to solution

conditional table column

return $table
            ->columns([
                Tables\Columns\TextColumn::make('label')
                    ->sortable()
                    ->searchable(),
                // If the type is "media" make a CuratorColumn on value
                CuratorColumn::make('value')
                    ->circular(),
                // Else make a TextColumn on value
                Tables\Columns\TextColumn::make('value')
                    ->formatStateUsing(function ($state) {
                        return match ($state) {
                            null => 'Empty',
                            "0" => 'False',
                            "1" => 'True',
                            default => 'OK'
                        };
                    })
                    ->sortable()
                    ->searchable(),
            ])

return $table
            ->columns([
                Tables\Columns\TextColumn::make('label')
                    ->sortable()
                    ->searchable(),
                // If the type is "media" make a CuratorColumn on value
                CuratorColumn::make('value')
                    ->circular(),
                // Else make a TextColumn on value
                Tables\Columns\TextColumn::make('value')
                    ->formatStateUsing(function ($state) {
                        return match ($state) {
                            null => 'Empty',
                            "0" => 'False',
                            "1" => 'True',
                            default => 'OK'
                        };
                    })
                    ->sortable()
                    ->searchable(),
            ])

Create a Simple Settings Page with Filament | MoonGuard - Web Monit...

Learn how to create custom settings page with Filament, from generating migrations to dynamically building the edit form.

Solution

I've finally opted for the custom view because I don't necessarily need a curatorColumn

SettingsResource.php

return $table
            ->columns([
                ...
                Tables\Columns\ViewColumn::make('value')->view('filament.tables.columns.settingColumn'),
            ])
            ...

return $table
            ->columns([
                ...
                Tables\Columns\ViewColumn::make('value')->view('filament.tables.columns.settingColumn'),
            ])
            ...

settingColumn.blade.php

<div class="w-16 flex items-center justify-center">
    @php
        $type = $getRecord()->type;
        $render = null;
        switch ($type) {
            case 'media':
                $media = Awcodes\Curator\Models\Media::where('id', $getState())->first();
                $render = $media ? $media->url : false;
                break;
            default:
                $render = $getState();
                break;
        }
    @endphp
    @switch($type)
        @case("media")
            @if ($render)
                <img class="w-10 h-10 rounded-full" src="{{ $render }}">
            @else
                None
            @endif
        @break
        @case("boolean")
            {{ $render === "0" ? "False" : "True" }}
        @break
        @default
            {{ $render }}
    @endswitch
</div>

<div class="w-16 flex items-center justify-center">
    @php
        $type = $getRecord()->type;
        $render = null;
        switch ($type) {
            case 'media':
                $media = Awcodes\Curator\Models\Media::where('id', $getState())->first();
                $render = $media ? $media->url : false;
                break;
            default:
                $render = $getState();
                break;
        }
    @endphp
    @switch($type)
        @case("media")
            @if ($render)
                <img class="w-10 h-10 rounded-full" src="{{ $render }}">
            @else
                None
            @endif
        @break
        @case("boolean")
            {{ $render === "0" ? "False" : "True" }}
        @break
        @default
            {{ $render }}
    @endswitch
</div>

Jump to solution

conditional table column

conditional table column

Similar Threads

Similar Threads

Similar Threads