Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

axelvds's avatar

FIlament groups to combine text or another way

I have been struggling with this for some time now and have only found half baked solutions. I have a schedule resource with many fields of which the critical ones are schedule_date, schedule_stage and schedule_note. I would like to create a table that combines the notes for each day and shows them in stage columns. Then I want buttons to show the summary rows for a day, week or month and have previous and next. I have tried with groups and summarize but then the summary text does not wrap and the column becomes so wide, it's unusable. Trying to use custom css such as ->extraAttributes(['class' => 'summary-field']) in the column didn't have any effect

The code in scheduleResource.php is public static function table(Table $table): Table { return $table ->groups([ Group::make('schedule_date') ]) ->columns([ Tables\Columns\TextColumn::make('schedule_date') ->date() ->sortable(), Tables\Columns\TextColumn::make('stage_5') ->summarize(Summarizer::make() ->using(fn(Builder $query): string => $query ->where('schedule_stage','5') ->get() ->pluck('schedule_note') ->implode('\\\n') ) ->extraAttributes(['class' => 'summary-field']) ), Tables\Columns\TextColumn::make('stage_6') ->summarize(Summarizer::make() ->using(fn(Builder $query): string => $query ->where('schedule_stage','5') ->get() ->pluck('schedule_note') ->implode('\\\n') )),

I have tried a livewire view to create a table with blade but the data is not updating consistently after changing from day to week or month if there was data showing before the change.

Any suggestions on how I can do this?

0 likes
1 reply
LaryAI's avatar
Level 58

To address your problem of creating a table that combines notes for each day and shows them in stage columns, while also providing buttons to show summary rows for a day, week, or month, you can follow these steps:

  1. Custom CSS for Text Wrapping: Ensure that your custom CSS is correctly applied to the table columns to handle text wrapping.

  2. Dynamic Filtering: Use Livewire to dynamically filter and update the table based on the selected time period (day, week, month).

  3. Summarizing Notes: Ensure that the summarization logic correctly groups and formats the notes.

Here is a more detailed solution:

Step 1: Custom CSS for Text Wrapping

Ensure that your CSS class for text wrapping is correctly defined and applied. You can add the following CSS to your project:

.summary-field {
    white-space: pre-wrap; /* This will ensure that the text wraps */
    word-wrap: break-word; /* This will break long words */
}

Step 2: Livewire Component for Dynamic Filtering

Create a Livewire component to handle the dynamic filtering and updating of the table.

Livewire Component (ScheduleTable.php)

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Schedule;
use Illuminate\Support\Carbon;

class ScheduleTable extends Component
{
    public $timePeriod = 'day'; // default time period
    public $currentDate;

    public function mount()
    {
        $this->currentDate = Carbon::today();
    }

    public function changeTimePeriod($period)
    {
        $this->timePeriod = $period;
        $this->currentDate = Carbon::today(); // reset to today
    }

    public function previous()
    {
        $this->currentDate = $this->currentDate->sub($this->timePeriod, 1);
    }

    public function next()
    {
        $this->currentDate = $this->currentDate->add($this->timePeriod, 1);
    }

    public function render()
    {
        $schedules = Schedule::query()
            ->whereBetween('schedule_date', [$this->currentDate->startOf($this->timePeriod), $this->currentDate->endOf($this->timePeriod)])
            ->get()
            ->groupBy('schedule_date');

        return view('livewire.schedule-table', compact('schedules'));
    }
}

Livewire Blade View (schedule-table.blade.php)

<div>
    <div class="flex justify-between mb-4">
        <div>
            <button wire:click="changeTimePeriod('day')">Day</button>
            <button wire:click="changeTimePeriod('week')">Week</button>
            <button wire:click="changeTimePeriod('month')">Month</button>
        </div>
        <div>
            <button wire:click="previous">Previous</button>
            <button wire:click="next">Next</button>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Stage 5 Notes</th>
                <th>Stage 6 Notes</th>
            </tr>
        </thead>
        <tbody>
            @foreach($schedules as $date => $scheduleGroup)
                <tr>
                    <td>{{ $date }}</td>
                    <td class="summary-field">
                        {{ $scheduleGroup->where('schedule_stage', 5)->pluck('schedule_note')->implode("\n") }}
                    </td>
                    <td class="summary-field">
                        {{ $scheduleGroup->where('schedule_stage', 6)->pluck('schedule_note')->implode("\n") }}
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

Step 3: Register Livewire Component

Ensure that you register the Livewire component in your web.php routes file or in your Livewire service provider.

use App\Http\Livewire\ScheduleTable;

Route::get('/schedule-table', ScheduleTable::class);

Step 4: Update Filament Resource

Update your Filament resource to use the Livewire component.

ScheduleResource.php

use App\Http\Livewire\ScheduleTable;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('schedule_date')
                ->date()
                ->sortable(),
            Tables\Columns\TextColumn::make('stage_5')
                ->summarize(Summarizer::make()
                    ->using(fn(Builder $query): string => $query
                        ->where('schedule_stage', '5')
                        ->get()
                        ->pluck('schedule_note')
                        ->implode("\n")
                    )
                    ->extraAttributes(['class' => 'summary-field'])
                ),
            Tables\Columns\TextColumn::make('stage_6')
                ->summarize(Summarizer::make()
                    ->using(fn(Builder $query): string => $query
                        ->where('schedule_stage', '6')
                        ->get()
                        ->pluck('schedule_note')
                        ->implode("\n")
                    )
                    ->extraAttributes(['class' => 'summary-field'])
                ),
        ]);
}

This solution should help you create a table that combines notes for each day and shows them in stage columns, with buttons to show summary rows for a day, week, or month, and allows for navigation between previous and next periods.

Please or to participate in this conversation.