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:
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:
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?Solution:Jump to solution
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
8 Replies
Can anyone help with this?
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()
Interesting. Any source for this?
Added protected to it as in the parent class. Doesn't seem to change anything with 5 columns.
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
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
![No description](https://cdn.answeroverflow.com/1263726700232048731/img-1.png)
![No description](https://cdn.answeroverflow.com/1263726843085717624/img-2.png)
Ok. Thanks.