{{-- A data table. Its callers write `<thead>`, `<tr>`, `<th>` and `<td>` as they always do; how they
     look is resources/css/components/table.css, keyed on the `data-table` attribute set here (the
     top of that file says why).

     `size="xs"` for a table inside a panel inside a panel. A selected row is
     `<tr aria-selected="true">`. Horizontal scrolling stays the caller's — wrap the table in
     `<div class="overflow-x-auto">` where the page needs it. A column that sorts is
     `<x-sort-header>`. --}}

@props([
    'size' => 'sm',
])

<table data-table data-size="{{ $size === 'xs' ? 'xs' : 'sm' }}" {{ $attributes }}>
    {{ $slot }}
</table>