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,105 @@
+<?php
+
+use Illuminate\Contracts\View\View;
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\Route;
+use Livewire\Component;
+use Livewire\Livewire;
+use Livewire\WithPagination;
+
+class DataProbe extends Component
+{
+    use WithPagination;
+
+    /** @var array{column: string, direction: string} */
+    public array $sortBy = ['column' => 'name', 'direction' => 'asc'];
+
+    public function render(): View
+    {
+        $files = collect(range(1, 25))->map(fn (int $n): array => ['name' => sprintf('file-%02d.zip', $n), 'size' => $n * 3 % 17]);
+        $files = $files->sortBy($this->sortBy['column'], SORT_REGULAR, $this->sortBy['direction'] === 'desc')->values();
+        $page = $this->getPage();
+
+        return view('probe::data', [
+            'files' => new LengthAwarePaginator($files->forPage($page, 10)->values(), $files->count(), 10, $page),
+        ]);
+    }
+}
+
+function dataProbe()
+{
+    $views = sys_get_temp_dir().'/livewire-material-data-probe';
+    @mkdir($views);
+    file_put_contents($views.'/data.blade.php', <<<'BLADE'
+        <div class="p-4">
+            <x-table>
+                <thead>
+                    <tr>
+                        <x-sort-header column="name" :sort-by="$sortBy" id="by-name">Name</x-sort-header>
+                        <x-sort-header column="size" :sort-by="$sortBy" id="by-size">Size</x-sort-header>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach ($files as $file)
+                        <tr wire:key="file-{{ $file['name'] }}"><td>{{ $file['name'] }}</td><td>{{ $file['size'] }}</td></tr>
+                    @endforeach
+                </tbody>
+            </x-table>
+
+            {{ $files->links() }}
+        </div>
+        BLADE);
+    app('view')->addNamespace('probe', $views);
+
+    Livewire::component('data-probe', DataProbe::class);
+
+    Route::middleware('web')->get('/data-probe', fn () => Blade::render(<<<'BLADE'
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <x-theme-script />
+                @vite(config('livewire-material.showcase.vite'))
+                @livewireStyles
+            </head>
+            <body class="bg-surface">
+                <livewire:data-probe />
+                @livewireScripts
+            </body>
+        </html>
+        BLADE));
+
+    return visit('/data-probe')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+}
+
+it('sorts by a column and flips the direction on a second press', function () {
+    $first = "document.querySelector('tbody tr td').textContent.trim()";
+
+    $page = dataProbe()
+        ->assertAttribute('#by-name', 'aria-sort', 'ascending')
+        ->assertScript("{$first} === 'file-01.zip'");
+
+    $page->click('#by-name button')
+        ->assertAttribute('#by-name', 'aria-sort', 'descending')
+        ->assertScript("{$first} === 'file-25.zip'");
+
+    $page->click('#by-size button')
+        ->assertAttribute('#by-size', 'aria-sort', 'ascending')
+        ->assertScript("! document.querySelector('#by-name').hasAttribute('aria-sort')");
+});
+
+it('pages through Livewire results and marks the current page', function () {
+    $page = dataProbe()
+        ->assertSee('1–10 of 25')
+        ->assertAttribute('[data-pagination] [aria-current="page"]', 'aria-current', 'page')
+        ->click('[data-pagination] button[aria-label="Go to page 3"]')
+        ->assertSee('21–25 of 25')
+        ->assertSeeIn('[data-pagination] [aria-current="page"]', '3');
+
+    $page->click('[data-pagination] button[aria-label="Previous"]')
+        ->assertSee('11–20 of 25');
+
+    $page->resize(400, 800)
+        ->assertSee('Page 2 of 3');
+});