Re-size the Widgets Card to 3 Column/Grid

Basically i dont want the Widgets to take full space above the Table . I did try using getHeaderWidgets() but no luck

11 Replies

alcmz•13mo ago

This is what's inside my ListCustomer.php

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Pages\Actions;
use Filament\Resources\Pages\ListRecords;
use App\Filament\Widgets\StatsOverview as CustomerStats;


class ListCustomers extends ListRecords
{
    protected static string $resource = CustomerResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function getHeaderWidgets(): array
    {
        return [
            CustomerStats::class
        ];
    }

}

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Pages\Actions;
use Filament\Resources\Pages\ListRecords;
use App\Filament\Widgets\StatsOverview as CustomerStats;


class ListCustomers extends ListRecords
{
    protected static string $resource = CustomerResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function getHeaderWidgets(): array
    {
        return [
            CustomerStats::class
        ];
    }

}

and this is what inside my StatsOverview.php

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Card;
use App\Models\Customer;

class StatsOverview extends BaseWidget
{

    protected function getCards(): array
    {
        return [
            Card::make('Total Customer Count', Customer::count()),
        ];
    }

}

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Card;
use App\Models\Customer;

class StatsOverview extends BaseWidget
{

    protected function getCards(): array
    {
        return [
            Card::make('Total Customer Count', Customer::count()),
        ];
    }

}

alcmz•13mo ago

what i want is something like this but only have 1 cards instead of the other 2 more

ByteXR•13mo ago

Did you try defining:

protected function getHeaderWidgetsColumns(): int|array
    {
        return 3;
    }

inside ListCustomers?

alcmz•13mo ago

yes i did try that , but nothing changed. this is what i did

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Pages\Actions;
use Filament\Resources\Pages\ListRecords;
use App\Filament\Widgets\StatsOverview as CustomerStats;

class ListCustomers extends ListRecords
{
    protected static string $resource = CustomerResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function getHeaderWidgets(): array
    {
        return [
            CustomerStats::class
        ];
    }

    protected function getHeaderWidgetsColumns(): int|array
    {
        return 3;
    }

}

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Pages\Actions;
use Filament\Resources\Pages\ListRecords;
use App\Filament\Widgets\StatsOverview as CustomerStats;

class ListCustomers extends ListRecords
{
    protected static string $resource = CustomerResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function getHeaderWidgets(): array
    {
        return [
            CustomerStats::class
        ];
    }

    protected function getHeaderWidgetsColumns(): int|array
    {
        return 3;
    }

}

ByteXR•13mo ago

Try to define this in CustomerStats widget: protected int|string|array $columnSpan = 1; i think StatsWidgets by default is 'full'

alcmz•13mo ago

awesome! , it does the work . I guess by default it's set to "full" .

alcmz•13mo ago

ByteXR•13mo ago

yeah, if it extends StatsOverviewWidget, because then it says that every card create extra column i think

alcmz•13mo ago

oh there's something different happened when i remove the getHeaderWidgetsColumns(): code you can notice that the column somehow does something like span into 2 out of 3 columns

ByteXR•13mo ago

its cause by default it is 2:

protected function getHeaderWidgetsColumns(): int | string | array
    {
        return 2;
    }

see Filament\Pages\Page.php

alcmz•13mo ago

ohh.. go it! thanks!

Gaming

Programming

Re-size the Widgets Card to 3 Column/Grid