Joseph.Rawlings
7190d7a818
- Refactored select component to align with shadcn design principles. - Updated server status indicator component for consistency with shadcn style. - Modified spinner component to follow shadcn design guidelines. - Enhanced stat card component with shadcn-inspired styles. - Adjusted tab panel component to reflect shadcn design updates. - Revamped table row and table data cell components to match shadcn aesthetics. - Updated table header cell component for improved styling consistency. - Refined table component to align with shadcn design principles. - Enhanced tabs component with shadcn-inspired styles. - Updated toggle component to follow shadcn design guidelines. - Refactored tooltip component to align with shadcn design principles. - Updated server card component to reflect shadcn-inspired design.
50 lines
1.4 KiB
PHP
50 lines
1.4 KiB
PHP
{{--
|
|
Table Component - shadcn-style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.table>
|
|
<x-slot:head>
|
|
<x-proxmox::ui.table-th>Name</x-proxmox::ui.table-th>
|
|
<x-proxmox::ui.table-th>Status</x-proxmox::ui.table-th>
|
|
</x-slot:head>
|
|
<x-proxmox::ui.table-row>
|
|
<x-proxmox::ui.table-td>Server 1</x-proxmox::ui.table-td>
|
|
<x-proxmox::ui.table-td>Running</x-proxmox::ui.table-td>
|
|
</x-proxmox::ui.table-row>
|
|
</x-proxmox::ui.table>
|
|
--}}
|
|
|
|
@props([
|
|
'striped' => false,
|
|
'hoverable' => true,
|
|
'responsive' => true,
|
|
'compact' => false,
|
|
])
|
|
|
|
<div @class(['relative w-full overflow-auto' => $responsive])>
|
|
<table
|
|
{{ $attributes->class([
|
|
'w-full caption-bottom text-sm',
|
|
'[&_tbody_tr:nth-child(even)]:bg-muted/50' => $striped,
|
|
]) }}
|
|
data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
|
|
data-compact="{{ $compact ? 'true' : 'false' }}"
|
|
>
|
|
@if(isset($head))
|
|
<thead class="[&_tr]:border-b">
|
|
<tr class="border-b transition-colors">
|
|
{{ $head }}
|
|
</tr>
|
|
</thead>
|
|
@endif
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
{{ $slot }}
|
|
</tbody>
|
|
@if(isset($foot))
|
|
<tfoot class="border-t bg-muted/50 font-medium [&>tr]:last:border-b-0">
|
|
{{ $foot }}
|
|
</tfoot>
|
|
@endif
|
|
</table>
|
|
</div>
|