Joseph.Rawlings
7a089f53e2
- Changed badge, button, card, dropdown, input, modal, select, table, tabs, toggle, and tooltip components to align with the TailAdmin design system. - Updated class names and styles for consistency across components. - Enhanced accessibility and responsiveness in various components. - Improved hover and focus states for better user experience.
50 lines
1.6 KiB
PHP
50 lines
1.6 KiB
PHP
{{--
|
|
Table Component - TailAdmin 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-x-auto rounded-xl border border-gray-200 dark:border-gray-800' => $responsive])>
|
|
<table
|
|
{{ $attributes->class([
|
|
'w-full text-theme-sm',
|
|
'[&_tbody_tr:nth-child(even)]:bg-gray-50 dark:[&_tbody_tr:nth-child(even)]:bg-gray-800/50' => $striped,
|
|
]) }}
|
|
data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
|
|
data-compact="{{ $compact ? 'true' : 'false' }}"
|
|
>
|
|
@if(isset($head))
|
|
<thead class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/50">
|
|
<tr>
|
|
{{ $head }}
|
|
</tr>
|
|
</thead>
|
|
@endif
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
|
|
{{ $slot }}
|
|
</tbody>
|
|
@if(isset($foot))
|
|
<tfoot class="border-t border-gray-200 bg-gray-50 font-medium dark:border-gray-800 dark:bg-gray-800/50">
|
|
{{ $foot }}
|
|
</tfoot>
|
|
@endif
|
|
</table>
|
|
</div>
|