diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index f2c44559..7bbaae38 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -440,6 +440,12 @@
     [data-md-showcase-search-bar-title] {
         flex: 1 1 auto;
     }
+
+    /* Data: the table's own horizontal scroll stays the caller's, as table.css's header says. */
+    [data-md-showcase-table-scroll] {
+        width: 100%;
+        overflow-x: auto;
+    }
 }
 
 /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and
diff --git a/resources/views/showcase/sections/data.blade.php b/resources/views/showcase/sections/data.blade.php
index 387fe327..eedf2a88 100644
--- a/resources/views/showcase/sections/data.blade.php
+++ b/resources/views/showcase/sections/data.blade.php
@@ -1,56 +1,56 @@
 @php
     $examples = [
         'Data table' => <<<'BLADE'
-            <div class="w-full overflow-x-auto">
+            <div data-md-showcase-table-scroll>
                 <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>
+                            <x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="md-text-end">Size</x-sort-header>
                             <th>Expires</th>
-                            <th><span class="sr-only">Actions</span></th>
+                            <th><span class="md-visually-hidden">Actions</span></th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr data-md-list-row>
                             <td><a href="#data" data-md-list-open>contract.pdf</a></td>
-                            <td class="text-end tabular-nums">1.2 MB</td>
+                            <td class="md-text-end md-tabular">1.2 MB</td>
                             <td>in 1 hour</td>
-                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
+                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                         </tr>
                         <tr data-md-list-row aria-selected="true">
                             <td><a href="#data" data-md-list-open>design-review.mp4</a></td>
-                            <td class="text-end tabular-nums">3.4 GB</td>
+                            <td class="md-text-end md-tabular">3.4 GB</td>
                             <td>in 7 days</td>
-                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
+                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                         </tr>
                         <tr data-md-list-row>
                             <td><a href="#data" data-md-list-open>holiday-photos.zip</a></td>
-                            <td class="text-end tabular-nums">248 MB</td>
+                            <td class="md-text-end md-tabular">248 MB</td>
                             <td>in 3 days</td>
-                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
+                            <td class="md-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">
+            <x-livewire-material::stack gap="space300">
                 {{ (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>
+            </x-livewire-material::stack>
             BLADE,
     ];
 @endphp
 
-<section id="data" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Data</h2>
+<x-livewire-material::stack as="section" id="data" gap="space300">
+    <h2 class="md-type-headline-md">Data</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-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>
+</x-livewire-material::stack>