Tuto's Laravel Corner•15mo ago

Show multiple table columns in a single table column of ressource

Hey guys, me again. I am trying to find some documentation/info about how can I show in a table column the joined data from two fields (e.g. start_date and start_time which are two separate inputs of date/time would like to become: 21/12/2023 - 16:15 instead of showing each column separately. I believe we've done that with the pet clinic, but since I've started the project from video 1, I might have lost or not yet reached some of the merged data practice. Any hint or a link where to look as I seem to have some weird difficulty finding data in the documentation but I am not sure it is the fault of the DEVs who wrote the data

9 Replies

tuto1902•15mo ago

I have a couple of ideas for this. In the pet clinic I ended up using model attributes. I’ll provide code examples shortly

MilenKoOP•15mo ago

I believe I've had the code already where I was combining timestame for dateinput and timeinput together in format dd/mm/yyyy - HH:mm but I just can't find it yet.. If I find it, I will share it as it was nice and simple but Filament did no provide such information or at least I did not find one.

MilenKoOP•15mo ago

@tuto1902 From what I've searched, seems like a decent approach might be to use a custom column that can iterate through the required data and concatenate what and where it is necessary. I just need to bear in mind that a part of my project is to calculate the difference between the start_date/start_time and end_date/end_time. I am not 100% sure if it was a good idea to split the two stil as if I will be able to calculate the difference but if I can contactenate correcly the data, I am sure I can use the same approach for the time difference. Here is the link I've found suggesting a use of custom column: https://github.com/filamentphp/filament/discussions/437

GitHub

Feature: Add attribute option to columns. · filamentphp filament · ...

It would be useful if columns (or rows even) could have a poll() method that applies a wire:poll attribute to the <td> element. Possibly a more useful function would be adding an attribute() ...

tuto1902•15mo ago

The example I gave on the stream looks like this. In the Slot model

    use Illuminate\Database\Eloquent\Casts\Attribute;

    /**
     * @return Attribute<string, never>
     */
    protected function formattedTime(): Attribute
    {
        return Attribute::make(
            get: fn ($value, array $attributes) => 
                Carbon::parse($attributes['start'])->format('h:i A') . ' - ' .
                Carbon::parse($attributes['end'])->format('h:i A')
        );
    }

    use Illuminate\Database\Eloquent\Casts\Attribute;

    /**
     * @return Attribute<string, never>
     */
    protected function formattedTime(): Attribute
    {
        return Attribute::make(
            get: fn ($value, array $attributes) => 
                Carbon::parse($attributes['start'])->format('h:i A') . ' - ' .
                Carbon::parse($attributes['end'])->format('h:i A')
        );
    }

And then, in the table column (in this case, it's an AppointmentResource class, and the Appointment model has a relationship called slot)

Tables\Columns\TextColumn::make('slot.formatted_time')
  ->label('Time')
  ->badge()
  ->sortable(),

Tables\Columns\TextColumn::make('slot.formatted_time')
  ->label('Time')
  ->badge()
  ->sortable(),

MilenKoOP•15mo ago

Ah, yes, I remembered now that you joined the start/end time of the slot. I knew it was all in front of my eyes, but I got distracted a bit by other stuff and... The only thing I am not getting is how does the model function formattedTime() gets related to slot.formatted_time as I understand you have the relations defined for the models, but you are not calling the function using slot.formatted_time but getting the return of it. I will watch again the slot video and I guess the answer is all there once I pass through it and implement it while catching up on the video's I've missed. Thanks again for the input and I will keep you posted on the progress/success.

MilenKoOP•15mo ago

Also, I've found a component that might simplify the process, but not sure how reliable it will be and how stable/adaptible will be in the future: https://github.com/shibomb/filament-multi-components-column Basically this allows you to use the code for placing multiple components horizontally/vertically in a single column just by doing:

use Shibomb\FilamentMultiComponentColumn\Components\MultiComponentsColumn;

class FooBarResource extends Resource
{
    :
    public static function table(Table $table): Table
    {
        :
        return $table
            ->columns([
                MultiComponentsColumn::make('foo')
                    ->components([
                        Tables\Columns\TextColumn::make('foo'),
                        Tables\Columns\TextColumn::make('bar')
                    ]),

use Shibomb\FilamentMultiComponentColumn\Components\MultiComponentsColumn;

class FooBarResource extends Resource
{
    :
    public static function table(Table $table): Table
    {
        :
        return $table
            ->columns([
                MultiComponentsColumn::make('foo')
                    ->components([
                        Tables\Columns\TextColumn::make('foo'),
                        Tables\Columns\TextColumn::make('bar')
                    ]),

It is not clear though how can you define the styling between the two but it is a suitable option on the table if works well for someone's needs.. 😉

GitHub

GitHub - shibomb/filament-multi-components-column: A Simple Mutli C...

A Simple Mutli Components Column for Filament Table. - GitHub - shibomb/filament-multi-components-column: A Simple Mutli Components Column for Filament Table.

MilenKoOP•15mo ago

Anyway, on giving a second thought, I decided it will be much simpler to use dateTime field instead of separately as I will have to do some time differences later between the event_start and event_end so it is simpler to get the result. I believe it is good to have the option so thank you @tuto1902 for the solution and I consider this topic closed, just not yet found how to close one when I am done and happy with the result/answer:

MilenKoOP•15mo ago

My only wish would be to find a way to close the native dateTime picker as I liked more the GUI of it but it is not a thing I canot live without 😉

tuto1902•15mo ago

FYI. To mark a post a solved, right click on the message and select Apps > Mark Solution

Gaming

Programming

Show multiple table columns in a single table column of ressource