コンポーネント一覧
pinion-ui

Theme

Tune

Lang

Table

通常の table 表示 + x-table-scroll ラッパーで横スクロール時のみ左右ボタンと gradient fade を出す。コンテンツが overflow しない時はラッパーは透明 (何も足さない)。table 専用ではなく、card list / image strip 等にも使える。

plain table — <x-table-scroll> ラッパーなし (narrow content)

ID Name Status
1Tanakaactive
2Yamadainactive
3Satoactive
 
<table class="w-full text-sm">
    <thead class="bg-base-200 text-base-content/70">
        <tr>
            <th class="px-4 py-2 text-left font-medium">ID</th>
            <th class="px-4 py-2 text-left font-medium">Name</th>
            <th class="px-4 py-2 text-left font-medium">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="border-t border-base-300 hover:bg-base-200/50"><td class="px-4 py-2">1</td><td class="px-4 py-2">Tanaka</td><td class="px-4 py-2">active</td></tr>
        <tr class="border-t border-base-300 hover:bg-base-200/50"><td class="px-4 py-2">2</td><td class="px-4 py-2">Yamada</td><td class="px-4 py-2">inactive</td></tr>
        <tr class="border-t border-base-300 hover:bg-base-200/50"><td class="px-4 py-2">3</td><td class="px-4 py-2">Sato</td><td class="px-4 py-2">active</td></tr>
    </tbody>
</table>

<table class="w-full text-sm">
<thead class="bg-base-200 text-base-content/70">
<tr>
<th class="px-4 py-2 text-left font-medium">
                ID
            </th>
<th class="px-4 py-2 text-left font-medium">
                Name
            </th>
<th class="px-4 py-2 text-left font-medium">
                Status
            </th>
</tr>
</thead>
<tbody>
<tr class="border-t border-base-300 hover:bg-base-200/50">
<td class="px-4 py-2">
                1
            </td>
<td class="px-4 py-2">
                Tanaka
            </td>
<td class="px-4 py-2">
                active
            </td>
</tr>
<tr class="border-t border-base-300 hover:bg-base-200/50">
<td class="px-4 py-2">
                2
            </td>
<td class="px-4 py-2">
                Yamada
            </td>
<td class="px-4 py-2">
                inactive
            </td>
</tr>
<tr class="border-t border-base-300 hover:bg-base-200/50">
<td class="px-4 py-2">
                3
            </td>
<td class="px-4 py-2">
                Sato
            </td>
<td class="px-4 py-2">
                active
            </td>
</tr>
</tbody>
</table>

基本形

ID Username Email Company Department Title Joined Last login Role Plan Status Action
1001tatun55tatun@example.comYakaze Tech StudioDevelopmentCEO2024-04-012026-05-13 09:32adminenterpriseactive
1002akari_yakari@example.comSparrowhawk LabsDesignLead2024-09-152026-05-13 08:11editorproactive
1003kenji_okenji@example.comPinion Inc.SalesManager2025-02-012026-05-12 22:54editorproinvited 
<x-table-scroll>
    <table class="min-w-[1000px] w-full text-sm">
        <thead class="bg-base-200 text-base-content/70">
            <tr>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">ID</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Username</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Email</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Company</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Department</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Title</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Joined</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Last login</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Role</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Plan</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Status</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-t border-base-300 hover:bg-base-200/50">
                <td class="px-4 py-2 whitespace-nowrap">1001</td><td class="px-4 py-2 whitespace-nowrap">tatun55</td><td class="px-4 py-2 whitespace-nowrap">tatun@example.com</td><td class="px-4 py-2 whitespace-nowrap">Yakaze Tech Studio</td><td class="px-4 py-2 whitespace-nowrap">Development</td><td class="px-4 py-2 whitespace-nowrap">CEO</td><td class="px-4 py-2 whitespace-nowrap">2024-04-01</td><td class="px-4 py-2 whitespace-nowrap">2026-05-13 09:32</td><td class="px-4 py-2 whitespace-nowrap">admin</td><td class="px-4 py-2 whitespace-nowrap">enterprise</td><td class="px-4 py-2 whitespace-nowrap">active</td>
                <td class="px-4 py-2 whitespace-nowrap"><x-button color="primary" appearance="soft" size="xs">Edit</x-button></td>
            </tr>
            <tr class="border-t border-base-300 hover:bg-base-200/50">
                <td class="px-4 py-2 whitespace-nowrap">1002</td><td class="px-4 py-2 whitespace-nowrap">akari_y</td><td class="px-4 py-2 whitespace-nowrap">akari@example.com</td><td class="px-4 py-2 whitespace-nowrap">Sparrowhawk Labs</td><td class="px-4 py-2 whitespace-nowrap">Design</td><td class="px-4 py-2 whitespace-nowrap">Lead</td><td class="px-4 py-2 whitespace-nowrap">2024-09-15</td><td class="px-4 py-2 whitespace-nowrap">2026-05-13 08:11</td><td class="px-4 py-2 whitespace-nowrap">editor</td><td class="px-4 py-2 whitespace-nowrap">pro</td><td class="px-4 py-2 whitespace-nowrap">active</td>
                <td class="px-4 py-2 whitespace-nowrap"><x-button color="primary" appearance="soft" size="xs">Edit</x-button></td>
            </tr>
            <tr class="border-t border-base-300 hover:bg-base-200/50">
                <td class="px-4 py-2 whitespace-nowrap">1003</td><td class="px-4 py-2 whitespace-nowrap">kenji_o</td><td class="px-4 py-2 whitespace-nowrap">kenji@example.com</td><td class="px-4 py-2 whitespace-nowrap">Pinion Inc.</td><td class="px-4 py-2 whitespace-nowrap">Sales</td><td class="px-4 py-2 whitespace-nowrap">Manager</td><td class="px-4 py-2 whitespace-nowrap">2025-02-01</td><td class="px-4 py-2 whitespace-nowrap">2026-05-12 22:54</td><td class="px-4 py-2 whitespace-nowrap">editor</td><td class="px-4 py-2 whitespace-nowrap">pro</td><td class="px-4 py-2 whitespace-nowrap">invited</td>
                <td class="px-4 py-2 whitespace-nowrap"><x-button color="primary" appearance="soft" size="xs">Edit</x-button></td>
            </tr>
        </tbody>
    </table>
</x-table-scroll>

<div x-data="{ canScrollLeft: false, canScrollRight: false, container: null, observer: null, init() { this.container = this.$refs.scrollContainer; this.checkScroll(); this.container.addEventListener('scroll', () =&gt; this.checkScroll(), { passive: true }); this.observer = new ResizeObserver(() =&gt; this.checkScroll()); this.observer.observe(this.container); for (const child of this.container.children) this.observer.observe(child); }, destroy() { this.observer?.disconnect(); }, checkScroll() { if (!this.container) return; const { scrollLeft, scrollWidth, clientWidth } = this.container; this.canScrollLeft = scrollLeft &gt; 1; this.canScrollRight = scrollLeft &lt; scrollWidth - clientWidth - 1; }, scrollTo(direction) { const amount = this.container.clientWidth * 0.6; this.container.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth', }); }, }" class="relative">
<div x-show="canScrollLeft" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-r from-base-100 via-base-100/90 to-transparent left-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollLeft" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('left')" class="absolute top-0 bottom-0 left-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="前へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></span></button>
<div x-show="canScrollRight" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-l from-base-100 via-base-100/90 to-transparent right-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollRight" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('right')" class="absolute top-0 bottom-0 right-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="次へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></span></button>
<div x-ref="scrollContainer" class="overflow-x-auto">
<table class="min-w-[1000px] w-full text-sm">
<thead class="bg-base-200 text-base-content/70">
<tr>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        ID
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Username
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Email
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Company
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Department
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Title
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Joined
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Last login
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Role
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Plan
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Status
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Action
                    </th>
</tr>
</thead>
<tbody>
<tr class="border-t border-base-300 hover:bg-base-200/50">
<td class="px-4 py-2 whitespace-nowrap">
                        1001
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        tatun55
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        tatun@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Yakaze Tech Studio
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Development
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        CEO
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2024-04-01
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2026-05-13 09:32
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        admin
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        enterprise
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        active
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-xs)] px-[var(--px-field-xs)] text-[length:var(--text-field-xs)] gap-1 bg-primary/10 text-primary border-transparent hover:bg-primary/20 focus-visible:ring-primary cursor-pointer">Edit</button>
</td>
</tr>
<tr class="border-t border-base-300 hover:bg-base-200/50">
<td class="px-4 py-2 whitespace-nowrap">
                        1002
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        akari_y
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        akari@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Sparrowhawk Labs
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Design
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Lead
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2024-09-15
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2026-05-13 08:11
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        editor
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        pro
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        active
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-xs)] px-[var(--px-field-xs)] text-[length:var(--text-field-xs)] gap-1 bg-primary/10 text-primary border-transparent hover:bg-primary/20 focus-visible:ring-primary cursor-pointer">Edit</button>
</td>
</tr>
<tr class="border-t border-base-300 hover:bg-base-200/50">
<td class="px-4 py-2 whitespace-nowrap">
                        1003
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        kenji_o
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        kenji@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Pinion Inc.
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Sales
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Manager
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2025-02-01
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2026-05-12 22:54
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        editor
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        pro
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        invited
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-xs)] px-[var(--px-field-xs)] text-[length:var(--text-field-xs)] gap-1 bg-primary/10 text-primary border-transparent hover:bg-primary/20 focus-visible:ring-primary cursor-pointer">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>

narrow table — overflow しないのでボタンも fade も出ない

ID Name Status
1Tanakaactive
2Yamadainactive
 
<x-table-scroll>
    <table class="w-full text-sm">
        <thead class="bg-base-200 text-base-content/70">
            <tr>
                <th class="px-4 py-2 text-left font-medium">ID</th>
                <th class="px-4 py-2 text-left font-medium">Name</th>
                <th class="px-4 py-2 text-left font-medium">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-t border-base-300"><td class="px-4 py-2">1</td><td class="px-4 py-2">Tanaka</td><td class="px-4 py-2">active</td></tr>
            <tr class="border-t border-base-300"><td class="px-4 py-2">2</td><td class="px-4 py-2">Yamada</td><td class="px-4 py-2">inactive</td></tr>
        </tbody>
    </table>
</x-table-scroll>

<div x-data="{ canScrollLeft: false, canScrollRight: false, container: null, observer: null, init() { this.container = this.$refs.scrollContainer; this.checkScroll(); this.container.addEventListener('scroll', () =&gt; this.checkScroll(), { passive: true }); this.observer = new ResizeObserver(() =&gt; this.checkScroll()); this.observer.observe(this.container); for (const child of this.container.children) this.observer.observe(child); }, destroy() { this.observer?.disconnect(); }, checkScroll() { if (!this.container) return; const { scrollLeft, scrollWidth, clientWidth } = this.container; this.canScrollLeft = scrollLeft &gt; 1; this.canScrollRight = scrollLeft &lt; scrollWidth - clientWidth - 1; }, scrollTo(direction) { const amount = this.container.clientWidth * 0.6; this.container.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth', }); }, }" class="relative">
<div x-show="canScrollLeft" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-r from-base-100 via-base-100/90 to-transparent left-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollLeft" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('left')" class="absolute top-0 bottom-0 left-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="前へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></span></button>
<div x-show="canScrollRight" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-l from-base-100 via-base-100/90 to-transparent right-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollRight" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('right')" class="absolute top-0 bottom-0 right-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="次へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></span></button>
<div x-ref="scrollContainer" class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-base-200 text-base-content/70">
<tr>
<th class="px-4 py-2 text-left font-medium">
                        ID
                    </th>
<th class="px-4 py-2 text-left font-medium">
                        Name
                    </th>
<th class="px-4 py-2 text-left font-medium">
                        Status
                    </th>
</tr>
</thead>
<tbody>
<tr class="border-t border-base-300">
<td class="px-4 py-2">
                        1
                    </td>
<td class="px-4 py-2">
                        Tanaka
                    </td>
<td class="px-4 py-2">
                        active
                    </td>
</tr>
<tr class="border-t border-base-300">
<td class="px-4 py-2">
                        2
                    </td>
<td class="px-4 py-2">
                        Yamada
                    </td>
<td class="px-4 py-2">
                        inactive
                    </td>
</tr>
</tbody>
</table>
</div>
</div>

card list — table 以外の wide content (画像ストリップ・カード列)

Item #1

A horizontally scrolled card list.

Item #2

A horizontally scrolled card list.

Item #3

A horizontally scrolled card list.

Item #4

A horizontally scrolled card list.

Item #5

A horizontally scrolled card list.

Item #6

A horizontally scrolled card list.

Item #7

A horizontally scrolled card list.

Item #8

A horizontally scrolled card list.

Item #9

A horizontally scrolled card list.

Item #10

A horizontally scrolled card list.

Item #11

A horizontally scrolled card list.

Item #12

A horizontally scrolled card list.

<x-table-scroll>
    <div class="flex gap-3 pb-2">
        @foreach(range(1, 12) as $i)
            <div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
                <div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
                <p class="font-medium text-sm">Item #{{ $i }}</p>
                <p class="text-xs text-base-content/60 mt-1">A horizontally scrolled card list.</p>
            </div>
        @endforeach
    </div>
</x-table-scroll>

<div x-data="{ canScrollLeft: false, canScrollRight: false, container: null, observer: null, init() { this.container = this.$refs.scrollContainer; this.checkScroll(); this.container.addEventListener('scroll', () =&gt; this.checkScroll(), { passive: true }); this.observer = new ResizeObserver(() =&gt; this.checkScroll()); this.observer.observe(this.container); for (const child of this.container.children) this.observer.observe(child); }, destroy() { this.observer?.disconnect(); }, checkScroll() { if (!this.container) return; const { scrollLeft, scrollWidth, clientWidth } = this.container; this.canScrollLeft = scrollLeft &gt; 1; this.canScrollRight = scrollLeft &lt; scrollWidth - clientWidth - 1; }, scrollTo(direction) { const amount = this.container.clientWidth * 0.6; this.container.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth', }); }, }" class="relative">
<div x-show="canScrollLeft" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-r from-base-100 via-base-100/90 to-transparent left-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollLeft" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('left')" class="absolute top-0 bottom-0 left-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="前へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></span></button>
<div x-show="canScrollRight" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-l from-base-100 via-base-100/90 to-transparent right-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollRight" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('right')" class="absolute top-0 bottom-0 right-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="次へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></span></button>
<div x-ref="scrollContainer" class="overflow-x-auto">
<div class="flex gap-3 pb-2">
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #1
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #2
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #3
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #4
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #5
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #6
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #7
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #8
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #9
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #10
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #11
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
<div class="shrink-0 w-48 rounded-[var(--radius-box)] border border-base-300 bg-base-100 p-lg">
<div class="h-24 rounded-[var(--radius-field)] bg-gradient-to-br from-primary/30 via-secondary/30 to-accent/30 mb-3"></div>
<p class="font-medium text-sm">
                    Item #12
                </p>
<p class="text-xs text-base-content/60 mt-1">
                    A horizontally scrolled card list.
                </p>
</div>
</div>
</div>
</div>

ボタンを四角くしたい

ID Username Email Company Department Title Joined Role Plan Status
1001tatun55tatun@example.comYakaze Tech StudioDevelopmentCEO2024-04-01adminenterpriseactive
1002akari_yakari@example.comSparrowhawk LabsDesignLead2024-09-15editorproactive
 
<x-table-scroll button-style="flat">
    <table class="min-w-[1000px] w-full text-sm">
        <thead class="bg-base-200 text-base-content/70">
            <tr>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">ID</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Username</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Email</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Company</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Department</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Title</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Joined</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Role</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Plan</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-t border-base-300"><td class="px-4 py-2 whitespace-nowrap">1001</td><td class="px-4 py-2 whitespace-nowrap">tatun55</td><td class="px-4 py-2 whitespace-nowrap">tatun@example.com</td><td class="px-4 py-2 whitespace-nowrap">Yakaze Tech Studio</td><td class="px-4 py-2 whitespace-nowrap">Development</td><td class="px-4 py-2 whitespace-nowrap">CEO</td><td class="px-4 py-2 whitespace-nowrap">2024-04-01</td><td class="px-4 py-2 whitespace-nowrap">admin</td><td class="px-4 py-2 whitespace-nowrap">enterprise</td><td class="px-4 py-2 whitespace-nowrap">active</td></tr>
            <tr class="border-t border-base-300"><td class="px-4 py-2 whitespace-nowrap">1002</td><td class="px-4 py-2 whitespace-nowrap">akari_y</td><td class="px-4 py-2 whitespace-nowrap">akari@example.com</td><td class="px-4 py-2 whitespace-nowrap">Sparrowhawk Labs</td><td class="px-4 py-2 whitespace-nowrap">Design</td><td class="px-4 py-2 whitespace-nowrap">Lead</td><td class="px-4 py-2 whitespace-nowrap">2024-09-15</td><td class="px-4 py-2 whitespace-nowrap">editor</td><td class="px-4 py-2 whitespace-nowrap">pro</td><td class="px-4 py-2 whitespace-nowrap">active</td></tr>
        </tbody>
    </table>
</x-table-scroll>

<div x-data="{ canScrollLeft: false, canScrollRight: false, container: null, observer: null, init() { this.container = this.$refs.scrollContainer; this.checkScroll(); this.container.addEventListener('scroll', () =&gt; this.checkScroll(), { passive: true }); this.observer = new ResizeObserver(() =&gt; this.checkScroll()); this.observer.observe(this.container); for (const child of this.container.children) this.observer.observe(child); }, destroy() { this.observer?.disconnect(); }, checkScroll() { if (!this.container) return; const { scrollLeft, scrollWidth, clientWidth } = this.container; this.canScrollLeft = scrollLeft &gt; 1; this.canScrollRight = scrollLeft &lt; scrollWidth - clientWidth - 1; }, scrollTo(direction) { const amount = this.container.clientWidth * 0.6; this.container.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth', }); }, }" class="relative">
<div x-show="canScrollLeft" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-r from-base-100 via-base-100/90 to-transparent left-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollLeft" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('left')" class="absolute top-0 bottom-0 left-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="前へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-[var(--radius-field)] bg-base-200 hover:bg-base-300 transition-colors shadow-[var(--shadow-field)]"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></span></button>
<div x-show="canScrollRight" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-l from-base-100 via-base-100/90 to-transparent right-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollRight" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('right')" class="absolute top-0 bottom-0 right-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="次へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-[var(--radius-field)] bg-base-200 hover:bg-base-300 transition-colors shadow-[var(--shadow-field)]"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></span></button>
<div x-ref="scrollContainer" class="overflow-x-auto">
<table class="min-w-[1000px] w-full text-sm">
<thead class="bg-base-200 text-base-content/70">
<tr>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        ID
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Username
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Email
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Company
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Department
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Title
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Joined
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Role
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Plan
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Status
                    </th>
</tr>
</thead>
<tbody>
<tr class="border-t border-base-300">
<td class="px-4 py-2 whitespace-nowrap">
                        1001
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        tatun55
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        tatun@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Yakaze Tech Studio
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Development
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        CEO
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2024-04-01
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        admin
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        enterprise
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        active
                    </td>
</tr>
<tr class="border-t border-base-300">
<td class="px-4 py-2 whitespace-nowrap">
                        1002
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        akari_y
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        akari@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Sparrowhawk Labs
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Design
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Lead
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2024-09-15
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        editor
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        pro
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        active
                    </td>
</tr>
</tbody>
</table>
</div>
</div>

ボタンを出さない (ネイティブスクロールのみ)

ID Username Email Company Department Title Joined Role Plan Status
1004misaki_tmisaki@example.comAnonymous Co.Customer SuccessStaff2025-07-10viewerfreeactive
1005ryouta_nryouta@example.comEarthsea LLCEngineeringSenior2023-11-20adminenterprisesuspended
 
<x-table-scroll :show-buttons="false">
    <table class="min-w-[1000px] w-full text-sm">
        <thead class="bg-base-200 text-base-content/70">
            <tr>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">ID</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Username</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Email</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Company</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Department</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Title</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Joined</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Role</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Plan</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-t border-base-300"><td class="px-4 py-2 whitespace-nowrap">1004</td><td class="px-4 py-2 whitespace-nowrap">misaki_t</td><td class="px-4 py-2 whitespace-nowrap">misaki@example.com</td><td class="px-4 py-2 whitespace-nowrap">Anonymous Co.</td><td class="px-4 py-2 whitespace-nowrap">Customer Success</td><td class="px-4 py-2 whitespace-nowrap">Staff</td><td class="px-4 py-2 whitespace-nowrap">2025-07-10</td><td class="px-4 py-2 whitespace-nowrap">viewer</td><td class="px-4 py-2 whitespace-nowrap">free</td><td class="px-4 py-2 whitespace-nowrap">active</td></tr>
            <tr class="border-t border-base-300"><td class="px-4 py-2 whitespace-nowrap">1005</td><td class="px-4 py-2 whitespace-nowrap">ryouta_n</td><td class="px-4 py-2 whitespace-nowrap">ryouta@example.com</td><td class="px-4 py-2 whitespace-nowrap">Earthsea LLC</td><td class="px-4 py-2 whitespace-nowrap">Engineering</td><td class="px-4 py-2 whitespace-nowrap">Senior</td><td class="px-4 py-2 whitespace-nowrap">2023-11-20</td><td class="px-4 py-2 whitespace-nowrap">admin</td><td class="px-4 py-2 whitespace-nowrap">enterprise</td><td class="px-4 py-2 whitespace-nowrap">suspended</td></tr>
        </tbody>
    </table>
</x-table-scroll>

<div x-data="{ canScrollLeft: false, canScrollRight: false, container: null, observer: null, init() { this.container = this.$refs.scrollContainer; this.checkScroll(); this.container.addEventListener('scroll', () =&gt; this.checkScroll(), { passive: true }); this.observer = new ResizeObserver(() =&gt; this.checkScroll()); this.observer.observe(this.container); for (const child of this.container.children) this.observer.observe(child); }, destroy() { this.observer?.disconnect(); }, checkScroll() { if (!this.container) return; const { scrollLeft, scrollWidth, clientWidth } = this.container; this.canScrollLeft = scrollLeft &gt; 1; this.canScrollRight = scrollLeft &lt; scrollWidth - clientWidth - 1; }, scrollTo(direction) { const amount = this.container.clientWidth * 0.6; this.container.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth', }); }, }" class="relative">
<div x-ref="scrollContainer" class="overflow-x-auto">
<table class="min-w-[1000px] w-full text-sm">
<thead class="bg-base-200 text-base-content/70">
<tr>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        ID
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Username
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Email
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Company
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Department
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Title
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Joined
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Role
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Plan
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Status
                    </th>
</tr>
</thead>
<tbody>
<tr class="border-t border-base-300">
<td class="px-4 py-2 whitespace-nowrap">
                        1004
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        misaki_t
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        misaki@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Anonymous Co.
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Customer Success
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Staff
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2025-07-10
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        viewer
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        free
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        active
                    </td>
</tr>
<tr class="border-t border-base-300">
<td class="px-4 py-2 whitespace-nowrap">
                        1005
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        ryouta_n
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        ryouta@example.com
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Earthsea LLC
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Engineering
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        Senior
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        2023-11-20
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        admin
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        enterprise
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        suspended
                    </td>
</tr>
</tbody>
</table>
</div>
</div>

スクロール量を変えたい (viewport 比、default 0.6)

Column A Column B Column C Column D Column E Column F
One click scrolls 80% of the viewport widthbcdef
 
<x-table-scroll :scroll-amount="0.8">
    <table class="min-w-[1000px] w-full text-sm">
        <thead class="bg-base-200 text-base-content/70">
            <tr>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Column A</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Column B</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Column C</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Column D</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Column E</th>
                <th class="px-4 py-2 text-left font-medium whitespace-nowrap">Column F</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-t border-base-300"><td class="px-4 py-2 whitespace-nowrap">One click scrolls 80% of the viewport width</td><td class="px-4 py-2 whitespace-nowrap">b</td><td class="px-4 py-2 whitespace-nowrap">c</td><td class="px-4 py-2 whitespace-nowrap">d</td><td class="px-4 py-2 whitespace-nowrap">e</td><td class="px-4 py-2 whitespace-nowrap">f</td></tr>
        </tbody>
    </table>
</x-table-scroll>

<div x-data="{ canScrollLeft: false, canScrollRight: false, container: null, observer: null, init() { this.container = this.$refs.scrollContainer; this.checkScroll(); this.container.addEventListener('scroll', () =&gt; this.checkScroll(), { passive: true }); this.observer = new ResizeObserver(() =&gt; this.checkScroll()); this.observer.observe(this.container); for (const child of this.container.children) this.observer.observe(child); }, destroy() { this.observer?.disconnect(); }, checkScroll() { if (!this.container) return; const { scrollLeft, scrollWidth, clientWidth } = this.container; this.canScrollLeft = scrollLeft &gt; 1; this.canScrollRight = scrollLeft &lt; scrollWidth - clientWidth - 1; }, scrollTo(direction) { const amount = this.container.clientWidth * 0.8; this.container.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth', }); }, }" class="relative">
<div x-show="canScrollLeft" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-r from-base-100 via-base-100/90 to-transparent left-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollLeft" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('left')" class="absolute top-0 bottom-0 left-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="前へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></span></button>
<div x-show="canScrollRight" x-cloak="" class="absolute top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-l from-base-100 via-base-100/90 to-transparent right-0" x-transition.opacity.duration.150ms=""></div><button type="button" x-show="canScrollRight" x-cloak="" x-transition.opacity.duration.150ms="" @click="scrollTo('right')" class="absolute top-0 bottom-0 right-0 z-10 flex items-center justify-center w-10 cursor-pointer focus:outline-none" aria-label="次へスクロール"><span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-base-100 hover:bg-base-200 transition-colors shadow-[var(--shadow-box)] border border-base-content/10"><svg class="w-4 h-4 text-base-content/70" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></span></button>
<div x-ref="scrollContainer" class="overflow-x-auto">
<table class="min-w-[1000px] w-full text-sm">
<thead class="bg-base-200 text-base-content/70">
<tr>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Column A
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Column B
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Column C
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Column D
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Column E
                    </th>
<th class="px-4 py-2 text-left font-medium whitespace-nowrap">
                        Column F
                    </th>
</tr>
</thead>
<tbody>
<tr class="border-t border-base-300">
<td class="px-4 py-2 whitespace-nowrap">
                        One click scrolls 80% of the viewport width
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        b
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        c
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        d
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        e
                    </td>
<td class="px-4 py-2 whitespace-nowrap">
                        f
                    </td>
</tr>
</tbody>
</table>
</div>
</div>