# Table

A responsive table component.

- Install: `php artisan blatui:add table`
- Source: https://blatui.remix-it.com/r/table.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/table.blade.php

```blade
@props(['variant' => 'default'])   {{-- default | card (bordered, rounded, on bg-card) --}}

@php
    $container = $variant === 'card'
        ? 'relative w-full overflow-x-auto rounded-lg border bg-card shadow-xs'
        : 'relative w-full overflow-x-auto';
@endphp

<div data-slot="table-container" data-variant="{{ $variant }}" class="{{ $container }}">
    <table data-slot="table" {{ $attributes->twMerge('w-full caption-bottom text-sm') }}>
        {{ $slot }}
    </table>
</div>
```

## resources/views/components/ui/table-body.blade.php

```blade
<tbody data-slot="table-body" {{ $attributes->twMerge('[&_tr:last-child]:border-0') }}>
    {{ $slot }}
</tbody>
```

## resources/views/components/ui/table-caption.blade.php

```blade
<caption data-slot="table-caption" {{ $attributes->twMerge('text-muted-foreground mt-4 text-sm') }}>
    {{ $slot }}
</caption>
```

## resources/views/components/ui/table-cell.blade.php

```blade
<td data-slot="table-cell" {{ $attributes->twMerge('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]') }}>
    {{ $slot }}
</td>
```

## resources/views/components/ui/table-footer.blade.php

```blade
<tfoot data-slot="table-footer" {{ $attributes->twMerge('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0') }}>
    {{ $slot }}
</tfoot>
```

## resources/views/components/ui/table-head.blade.php

```blade
<th data-slot="table-head" @unless ($attributes->has('scope')) scope="col" @endunless {{ $attributes->twMerge('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]') }}>
    {{ $slot }}
</th>
```

## resources/views/components/ui/table-header.blade.php

```blade
<thead data-slot="table-header" {{ $attributes->twMerge('[&_tr]:border-b') }}>
    {{ $slot }}
</thead>
```

## resources/views/components/ui/table-row.blade.php

```blade
<tr data-slot="table-row" {{ $attributes->twMerge('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors') }}>
    {{ $slot }}
</tr>
```