Table

Tables are used to display data in a tabular format.

/* table-example.blade.php */

<x-table>
    
    <x-slot name="head">
        
        <x-tr>
            
            <x-th content="Customer">
                
            <x-th content="Items">
                
            <x-th content="Status">
        </x-tr>
    </x-slot>
        
    <x-slot name="body">
        
        <x-tr>
            
            <x-td content="John Doe">
                
            <x-td content="Apple iPhone 14 Pro">
                
            <x-td>
                
                <div class="flex justify-between items-center">
                    
                    <x-badge color="green" size="xs">
                        Active
                    </x-badge>
                        
                    <x-dropdown>
                        
                        <x-slot name="trigger">
                            
                            <x-button size="xs" color="transparent" class="py-4">
                                
                                <x-radix-dots-vertical class="w-4 h-4 text-zinc-500">
                            </x-button>
                        </x-slot>
                            
                        <x-dropdown-item content="View">
                            
                        <x-dropdown-item content="Edit">
                            
                        <x-dropdown-item content="Delete">
                    </x-dropdown>
                </div>
            </x-td>
        </x-tr>
        ...
    </x-slot>
</x-table>

Component API

Table

tr

th

td