Filament•6mo ago

Setting number of columns for StatsOverview widget.

Hi, I'm trying to add a Stats overview widget containing multiple stats into a blade view by following these links: https://filamentphp.com/docs/3.x/widgets/stats-overview https://filamentphp.com/docs/3.x/widgets/adding-a-widget-to-a-blade-view This is the widget code:

class MyStatsOverview extends StatsOverviewWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Stat 1', 1),
            Stat::make('Stat 2', 2),
            Stat::make('Stat 3', 3),
            Stat::make('Stat 4', 4),
            Stat::make('Stat 5', 5),
        ];
    }
}

class MyStatsOverview extends StatsOverviewWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Stat 1', 1),
            Stat::make('Stat 2', 2),
            Stat::make('Stat 3', 3),
            Stat::make('Stat 4', 4),
            Stat::make('Stat 5', 5),
        ];
    }
}

It works fine with 3 stats in one row. Check 'Image 1' Now I would like to customize it so that all the 5 stats show in one row. I'm not able to get this working. I tried to implement the getColumns function:

    function getColumns(): int
    {
        return 5;
    }

    function getColumns(): int
    {
        return 5;
    }

But this results in each stat taking one row. Check 'Image 2' Ideally I would like to have different number of stats in a row at different breakpoints. How can I do this?

Stats overview widgets - Widgets - Filament

Adding a widget to a Blade view - Widgets - Filament

img-1

img-2

Solution:

Source: https://github.com/filamentphp/filament/blob/3.x/packages/widgets/resources/views/stats-overview-widget.blade.php

GitHub

filament/packages/widgets/resources/views/stats-overview-widget.bla...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Jump to solution

8 Replies

elbenOP•6mo ago

Can anyone help with this?

Andrew Wallo•6mo ago

Perhaps 4 stats in a row is the limit for Filament widgets. Not sure if the example you put is correct but it’s a method not a function for getColumns. So public function getColumns()

elbenOP•6mo ago

Interesting. Any source for this? Added protected to it as in the parent class. Doesn't seem to change anything with 5 columns.

Andrew Wallo•6mo ago

Well maybe it’s handled in the view for widgets in the source code. I’m on my phone right now sorry. But you would guess that depending on the breakpoint Filament would ensure that the text inside each widget would be able to fit properly regardless of the amount of columns you put. If you put 5 in a row everything might look too squished

Solution

Andrew Wallo•6mo ago

Source: https://github.com/filamentphp/filament/blob/3.x/packages/widgets/resources/views/stats-overview-widget.blade.php

GitHub

filament/packages/widgets/resources/views/stats-overview-widget.bla...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

elbenOP•6mo ago

elbenOP•6mo ago

Ok. Thanks.

Gaming

Programming

Setting number of columns for StatsOverview widget.