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
tuto190211mo 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
MilenKo
MilenKo11mo 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.
MilenKo
MilenKo11mo 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
tuto190211mo 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(),
MilenKo
MilenKo11mo 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.
MilenKo
MilenKo11mo 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.
MilenKo
MilenKo11mo 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:
No description
MilenKo
MilenKo11mo 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
tuto190211mo ago
FYI. To mark a post a solved, right click on the message and select Apps > Mark Solution
No description
Want results from more Discord servers?
Add your server
More Posts