Add data tables, sort headers and M3 paginators

A data table styled from descendant selectors, a Livewire sort header with aria-sort, and Laravel's and Livewire's full and simple paginators drawn in M3, put in front of their own views. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 08:32:59 +02:00
parent f90695cedd
commit 83ed671c4e
16 changed files with 613 additions and 1 deletions
@@ -0,0 +1,37 @@
+{{-- A column header that sorts the table, bound to a Livewire property shaped
+     `['column' => …, 'direction' => 'asc'|'desc']` — `sortBy` by default, or the one `model` names.
+
+     Pressing it sorts by this column, ascending first and then flipping; the arrow says which way,
+     and `aria-sort` says it to a screen reader. A column that cannot be sorted is a plain `<th>`.
+     `class` lands on the `<th>` (`text-end` for a number column moves the button with it). --}}
+
+@props([
+    'sortBy' => [],
+    'column',
+    'model' => 'sortBy',
+])
+
+@php
+    $active = ($sortBy['column'] ?? null) === $column;
+    $direction = $active ? (($sortBy['direction'] ?? 'asc') === 'desc' ? 'desc' : 'asc') : null;
+    $next = $active && $direction === 'asc' ? 'desc' : 'asc';
+@endphp
+
+<th @if ($active) aria-sort="{{ $direction === 'asc' ? 'ascending' : 'descending' }}" @endif {{ $attributes }}>
+    <button
+        type="button"
+        wire:click="$set('{{ $model }}', {{ json_encode(['column' => $column, 'direction' => $next]) }})"
+        data-sort-header
+        @class([
+            'group/sort focus-ring inline-flex cursor-pointer items-center gap-1 rounded-corner-xs',
+            'text-on-surface' => $active,
+            'hover:text-on-surface' => ! $active,
+        ])
+    >
+        {{ $slot }}
+        <x-icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" :class="\Illuminate\Support\Arr::toCssClasses([
+            'size-4 transition-opacity duration-(--md-sys-motion-effects-fast-duration)',
+            'opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60' => ! $active,
+        ])" />
+    </button>
+</th>
@@ -0,0 +1,16 @@
+{{-- 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>