Filament•2y ago

How set 3 column?

Hello, when I started with stat widget the first 6 cards were displayed well one next to the other (column of 3) but when I added more cards they began to put one under the other like this and they changed to 1 single column, attached capture, does anyone know what causes this automatic change? How can I make it 3 columns? I tried protected int | string | array $columnSpan = 3; but nothing change

14 Replies

LeandroFerreira•2y ago

https://filamentphp.com/docs/2.x/admin/dashboard/getting-started#customizing-the-widgets-grid

Filament

Getting started - Dashboard - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

JoséOP•2y ago

Hello @Leandro Ferreira I followed the steps of your link but same result, attached screenshot....why can be?

krekas•2y ago

Don't make three cards, make one

JoséOP•2y ago

what do you mean? I want to show different metrics in total are 13 metrics...and I want to show them for each row 3 columns

moaaz_m_f•2y ago

No need for all this. just use the getColumns function in your widgets for the below code am using the filament demo. so in the resources I have widgets inside it I have this file StatsOverviewWidget to display my stats widgets.

    protected function getColumns(): int
    {
        return match ($count = count(BaseWidget::getCachedCards())) {
            4, 5, 6, 9, 11 => 3,
            7, 8, 10, 12, 13, 14, 15 => 4,
            default => $count,
        };
    }

    protected function getColumns(): int
    {
        return match ($count = count(BaseWidget::getCachedCards())) {
            4, 5, 6, 9, 11 => 3,
            7, 8, 10, 12, 13, 14, 15 => 4,
            default => $count,
        };
    }

add the getColumns() function

Dan Harrin•2y ago

you can just return a simple int from getColumns like 3 the match () is just used to intelligently predict how many cards to put in a row

moaaz_m_f•2y ago

@Dan Harrin oh, I took the long way! thank you. I believe this is for the dashboard's widgets, the stats has their own getColumns() method. that's why in the filament demo the stats are 3 columns, and the rest are 2. the default getColumns() for the dashboard returns 2; but for the stat it's different.(either 3 or 4 ) that's why there is no need to make a new dashboard if the developer just wants to customize the stats columns.

JoséOP•2y ago

I'm confused now, I just want to show the cards in 3 columns, I already removed the dashboard as you suggested, I add that function but it gives an error, why is something so simple so complicated? 😅

Dan Harrin•2y ago

what is the error

JoséOP•2y ago

Declaration of App\Filament\Widgets\StatsOverview::getColumns(): array|int must be compatible with Filament\Widgets\StatsOverviewWidget::getColumns(): int

Dan Harrin•2y ago

have you read it? this is not filaments fault you need int instead of int | array

LeandroFerreira•2y ago

add in StatsOverview.php

protected int | string | array $columnSpan = 'full';

protected function getColumns(): int
{
    return 3;
}

protected int | string | array $columnSpan = 'full';

protected function getColumns(): int
{
    return 3;
}

Dan Harrin•2y ago

you can use an IDE to override methods for you, so the signature is always correct

JoséOP•2y ago

it work thanks!

Gaming

Programming

How set 3 column?