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;
}
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>
<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>
3 Replies
<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">
Nombre
</th>
</tr>
</thead>
<tbody>
@foreach ($orders_format as $key_f => $order_f)
<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">
{{ $key_f ?: 'Stickers' }}
</th>
<td class="px-6 py-4">
{{ array_sum(array_column($order_f, 'total_products')) }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</x-filament::card>
</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">
Nombre
</th>
</tr>
</thead>
<tbody>
@foreach ($orders_format as $key_f => $order_f)
<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">
{{ $key_f ?: 'Stickers' }}
</th>
<td class="px-6 py-4">
{{ array_sum(array_column($order_f, 'total_products')) }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</x-filament::card>
</x-filament::widget>
Hi @pasteko , I've done a few custom tables using some of the Blade components directly: https://github.com/filamentphp/filament/tree/2.x/packages/tables/resources/views/components
It's not documented but it's pretty easy to follow.
Another option is to copy the markup of a full table (e.g. copy outerHTML in the browser's dev tools), paste it in your custom page/component and customize from there.
Thank you, tried to apply some classes to the div and table but it's not looking like the flament table.