LaralCN-UI copy-and-own Blade components

Data Display

table

Responsive data table wrapper.

Preview

Invoice Status Amount
INV-001 Paid $250.00
INV-002 Pending $150.00

CLI

php artisan ui:add table

Dependencies

  • composer: gehrisandro/tailwind-merge-laravel

Source

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'w-full caption-bottom text-sm',
        $attributes->get('class'),
    );
@endphp

<div class="relative w-full overflow-auto">
    <table {{ $attributes->except('class')->merge(['class' => $classes]) }}>
        {{ $slot }}
    </table>
</div>

Wrap standard thead/tbody/tr/th/td; styling via Tailwind utility selectors in your markup.