FilamentF
Filament•3y ago
Pasteko

Custom widget grid and table look

Here's the view of my custom widget, how can I display cards like in the official widgets?
protected function getColumns(): int | array
    {
        return 2;
    }

<x-filament::widget>
    <x-filament::card>

    <div class="overflow-x-auto">
        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        Format
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Thème
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Nombre
                    </th>
                </tr>
            </thead>
            <tbody>
                {{-- dd($orders_theme) --}}
                @foreach ($orders_theme as $orders_t)
                    @foreach ($orders_t as $order)
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        {{ $order['product']['format']['name'] ?? 'Stickers' }}
                    </th>
                    <td class="px-6 py-4">
                        {{ $order['product']['theme']['name'] ?? null }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $order['total_products'] ?? null }}
                    </td>
                </tr>
                    @endforeach
                @endforeach
            </tbody>
        </table>
    </div>

    </x-filament::card>
Was this page helpful?