noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add data tables, sort headers and M3 paginators
tests / lint (push) Successful in 1m0s
Details
tests / feature (8.4) (push) Successful in 1m10s
Details
tests / feature (8.5) (push) Successful in 1m6s
Details
tests / browser (chrome, chromium) (push) Successful in 3m28s
Details
tests / browser (firefox, firefox) (push) Successful in 4m20s
Details
tests / browser (safari, webkit) (push) Failing after 6m16s
Details

Browse Source 
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
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 08:32:59 +02:00
co-authored by Claude Opus 5
parent f90695cedd
commit 83ed671c4e
16 changed files with 613 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/index.blade.php
+1
View File
@@ -22,5 +22,6 @@
@include('livewire-material::showcase.sections.chips')
@include('livewire-material::showcase.sections.sliders')
@include('livewire-material::showcase.sections.bars')
@include('livewire-material::showcase.sections.data')
</main>
@endsection
resources/views/showcase/layout.blade.php
+1 -1
View File
@@ -18,7 +18,7 @@
<a href="{{ route('livewire-material.showcase') }}" class="shrink-0 type-title-lg max-sm:hidden">Livewire Material</a>
<nav class="-my-2 flex min-w-0 flex-1 gap-x-4 overflow-x-auto py-2 whitespace-nowrap type-label-lg text-on-surface-variant [scrollbar-width:none]" aria-label="Sections">
@foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders', 'bars' => 'Bars'] as $anchor => $section)
@foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders', 'bars' => 'Bars', 'data' => 'Data'] as $anchor => $section)
<a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
@endforeach
</nav>
resources/views/showcase/sections/data.blade.php
+56
View File
@@ -0,0 +1,56 @@
@php
$examples = [
'Data table' => <<<'BLADE'
<div class="w-full overflow-x-auto">
<x-table>
<thead>
<tr>
<x-sort-header column="name" :sort-by="['column' => 'name', 'direction' => 'asc']">Name</x-sort-header>
<x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="text-end">Size</x-sort-header>
<th>Expires</th>
<th><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody>
<tr data-list-row>
<td><a href="#data" data-list-open>contract.pdf</a></td>
<td class="text-end tabular-nums">1.2 MB</td>
<td>in 1 hour</td>
<td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
</tr>
<tr data-list-row aria-selected="true">
<td><a href="#data" data-list-open>design-review.mp4</a></td>
<td class="text-end tabular-nums">3.4 GB</td>
<td>in 7 days</td>
<td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
</tr>
<tr data-list-row>
<td><a href="#data" data-list-open>holiday-photos.zip</a></td>
<td class="text-end tabular-nums">248 MB</td>
<td>in 3 days</td>
<td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
</tr>
</tbody>
</x-table>
</div>
BLADE,
'Pagination' => <<<'BLADE'
<div class="grid w-full gap-6">
{{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '#data']))->links() }}
{{ (new \Illuminate\Pagination\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }}
</div>
BLADE,
];
@endphp
<section id="data" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Data</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
<code>&lt;x-table&gt;</code>, <code>&lt;x-sort-header&gt;</code>, and Laravel's and Livewire's paginators.
</p>
@foreach ($examples as $title => $code)
<x-showcase::example :$title :$code />
@endforeach
</section>