Filament•6mo ago

display null values as 'null'

I have a table widget, where I want to display unconfirmed users. How can I display the string 'null' in the 'email_verified_at' column, when it's null? Here's what I have so far:

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Filters\Filter;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class LatestUsers extends BaseWidget
{
    protected int|string|array $columnSpan = 'full';
    protected static ?int $sort = 1;

    public function table(Table $table): Table
    {
        return $table
            ->query(
                UserResource::getEloquentQuery()
            )
            ->defaultPaginationPageOption(5)
            ->defaultSort('created_at', 'desc')
            ->columns([
                TextColumn::make('created_at'),
                TextColumn::make('name')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('email')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('email_verified_at')
                    ->label('Confirmed?')
                    ->formatStateUsing(fn(string $value): string => $value ? $value : 'null'), // <--- How do display null as a 'null'
            ])
            ->filters([
                Filter::make('email_verified_at')
                    ->label('Unconfirmed Users')
                    ->default(true)
                    ->query(fn(Builder $query): Builder => $query->whereNull('email_verified_at'))
            ])
            ->actions([
                EditAction::make(),
            ]);
    }
}

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Filters\Filter;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class LatestUsers extends BaseWidget
{
    protected int|string|array $columnSpan = 'full';
    protected static ?int $sort = 1;

    public function table(Table $table): Table
    {
        return $table
            ->query(
                UserResource::getEloquentQuery()
            )
            ->defaultPaginationPageOption(5)
            ->defaultSort('created_at', 'desc')
            ->columns([
                TextColumn::make('created_at'),
                TextColumn::make('name')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('email')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('email_verified_at')
                    ->label('Confirmed?')
                    ->formatStateUsing(fn(string $value): string => $value ? $value : 'null'), // <--- How do display null as a 'null'
            ])
            ->filters([
                Filter::make('email_verified_at')
                    ->label('Unconfirmed Users')
                    ->default(true)
                    ->query(fn(Builder $query): Builder => $query->whereNull('email_verified_at'))
            ])
            ->actions([
                EditAction::make(),
            ]);
    }
}

6 Replies

dissto•6mo ago

You could probably just use the ->placeholder('null') as it will be used when the value is null so you don't really need the formatStateUsing 🤔

jak888OP•6mo ago

@dissto This is of course correct! I guess I'll have to wait a bit longer to figure out, what formatStateUsing does... Thank you!

dissto•6mo ago

@jak888 there is nothing wrong with using formatStateUsing you probably just had a slight hickup with the passed parameter. I dont think $value will work though, so you would need $state or $record. As stated in the docs So something like that would also work. Its up to you if you prefer the extra step 😋

->formatStateUsing(function (string $state) {
    return filled($state) ? $state : 'null';
})

->formatStateUsing(function (string $state) {
    return filled($state) ? $state : 'null';
})

jak888OP•6mo ago

That's where I got confused (and why even my more simpler tries didn't work). Correct me if I'm wrong, but javascript would not care what you call your parameter?

dissto•6mo ago

i think you are right. Im not too knowledgeable about js though 😊

jak888OP•6mo ago

OK, then Thanks a bunch!

Gaming

Programming

display null values as 'null'