Andreas Reinhold / reiniandClaude Opus 5
25e1bb4788
<x-table> renders data-md-table with data-md-size and data-md-dense, and table.css moves into material.components on px and spacing tokens, its cell selectors still inside :where() so a caller's cell rule wins (plan step 36). The showcase's layout table follows the hook. A browser test pins 52px rows and 36px dense ones. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
21 lines
1.0 KiB
PHP
21 lines
1.0 KiB
PHP
{{-- 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-md-table` attribute set here (the
|
|
top of that file says why), with `data-md-size` and `data-md-dense`.
|
|
|
|
Rows are 52px, a target a finger can hit. `dense` tightens them to 36px — M3 asks that density
|
|
always be an opt-in and never a default, so it is the caller's decision and the caller's to
|
|
justify. `size="xs"` for a table inside a panel inside a panel (32px rows, 24px with `dense`).
|
|
|
|
A selected row is `<tr aria-selected="true">`. Horizontal scrolling stays the caller's — wrap the
|
|
table in an element that scrolls sideways (`overflow-x: auto`) where the page needs it. A column
|
|
that sorts is `<x-sort-header>`. --}}
|
|
|
|
@props([
|
|
'size' => 'sm',
|
|
'dense' => false,
|
|
])
|
|
|
|
<table data-md-table data-md-size="{{ $size === 'xs' ? 'xs' : 'sm' }}"{{ $dense ? ' data-md-dense' : '' }} {{ $attributes }}>
|
|
{{ $slot }}
|
|
</table>
|