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

Theme

Tune

Lang

Data Table

データテーブル。<x-table> 親 + <x-table.th> / <x-table.td> / <x-table.empty> の入れ子構成で、カード面・ヘッダ行・行間リズム・行ホバー・最終行の枠線処理・数値列の右寄せ (tabular-nums)・端カラムの余白 (x-card の p-lg と一致)・空状態プレースホルダまでを 1 コンポーネントが持つ。本文の行は素の <tr> のままなので @forelse / wire:key がそのまま使える。size (sm/md/lg)・card・hover の 3 軸。

基本形 — table 自身がカード面を持つ

Workspace Members Seats Plan Alerts
Acme Marketing 18 5 / 10 Active
Northwind Sales 7 7 / 7 Seats full
Globex Support 42 31 / 50 Active
Initech Research 3 1 / 5 Trial 
<x-table>
    <x-slot:head>
        <x-table.th>Workspace</x-table.th>
        <x-table.th numeric>Members</x-table.th>
        <x-table.th numeric>Seats</x-table.th>
        <x-table.th>Plan</x-table.th>
        <x-table.th align="right">Alerts</x-table.th>
        <x-table.th action />
    </x-slot:head>

    <tr>
        <x-table.td><span class="font-medium">Acme Marketing</span></x-table.td>
        <x-table.td numeric muted>18</x-table.td>
        <x-table.td numeric>
            <span class="font-medium">5</span><span class="text-base-content/35"> / 10</span>
        </x-table.td>
        <x-table.td><x-badge color="success" appearance="soft" size="sm">Active</x-badge></x-table.td>
        <x-table.td align="right"><x-toggle size="sm" :checked="true" /></x-table.td>
        <x-table.td action><x-button size="xs" appearance="ghost">Edit</x-button></x-table.td>
    </tr>
    <tr>
        <x-table.td><span class="font-medium">Northwind Sales</span></x-table.td>
        <x-table.td numeric muted>7</x-table.td>
        <x-table.td numeric>
            <span class="font-medium">7</span><span class="text-base-content/35"> / 7</span>
        </x-table.td>
        <x-table.td><x-badge color="warning" appearance="soft" size="sm">Seats full</x-badge></x-table.td>
        <x-table.td align="right"><x-toggle size="sm" /></x-table.td>
        <x-table.td action><x-button size="xs" appearance="ghost">Edit</x-button></x-table.td>
    </tr>
    <tr>
        <x-table.td><span class="font-medium">Globex Support</span></x-table.td>
        <x-table.td numeric muted>42</x-table.td>
        <x-table.td numeric>
            <span class="font-medium">31</span><span class="text-base-content/35"> / 50</span>
        </x-table.td>
        <x-table.td><x-badge color="success" appearance="soft" size="sm">Active</x-badge></x-table.td>
        <x-table.td align="right"><x-toggle size="sm" :checked="true" /></x-table.td>
        <x-table.td action><x-button size="xs" appearance="ghost">Edit</x-button></x-table.td>
    </tr>
    <tr>
        <x-table.td><span class="font-medium">Initech Research</span></x-table.td>
        <x-table.td numeric muted>3</x-table.td>
        <x-table.td numeric>
            <span class="font-medium">1</span><span class="text-base-content/35"> / 5</span>
        </x-table.td>
        <x-table.td><x-badge color="neutral" appearance="soft" size="sm">Trial</x-badge></x-table.td>
        <x-table.td align="right"><x-toggle size="sm" /></x-table.td>
        <x-table.td action><x-button size="xs" appearance="ghost">Edit</x-button></x-table.td>
    </tr>
</x-table>

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 text-base-content overflow-x-auto">
<table class="w-full text-sm [&amp;_th:first-child]:pl-lg [&amp;_th:last-child]:pr-lg [&amp;_td:first-child]:pl-lg [&amp;_td:last-child]:pr-lg">
<thead>
<tr class="border-b-[length:var(--border)] border-base-content/10 text-left text-xs text-base-content/45">
<th class="py-sm px-sm font-medium align-middle">
                    Workspace
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                    Members
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                    Seats
                </th>
<th class="py-sm px-sm font-medium align-middle">
                    Plan
                </th>
<th class="py-sm px-sm font-medium align-middle text-right">
                    Alerts
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap"></th>
</tr>
</thead>
<tbody class="[&amp;&gt;tr]:border-b [&amp;&gt;tr]:border-base-content/10 [&amp;&gt;tr:last-child]:border-b-0 [&amp;&gt;tr]:transition-colors [&amp;&gt;tr:not(.pn-table-empty):hover]:bg-base-200/60">
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">Acme Marketing</span>
</td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums text-base-content/60">
                    18
                </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
<span class="font-medium">5</span>
<span class="text-base-content/35">/ 10</span>
</td>
<td class="py-md px-sm align-middle">
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-0.5 gap-1 bg-success/15 text-success border-transparent">Active</span>
</td>
<td class="py-md px-sm align-middle text-right">
<label for="toggle_6a98febadefcc" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a98febadefcc" class="peer sr-only" checked>
<span class="h-5 w-9 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-4 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" aria-hidden="true"><span class="xy-thumb size-4 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span></span></label>
</td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">Edit</button>
</td>
</tr>
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">Northwind Sales</span>
</td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums text-base-content/60">
                    7
                </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
<span class="font-medium">7</span>
<span class="text-base-content/35">/ 7</span>
</td>
<td class="py-md px-sm align-middle">
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-0.5 gap-1 bg-warning/15 text-warning border-transparent">Seats full</span>
</td>
<td class="py-md px-sm align-middle text-right">
<label for="toggle_6a98febadf1c1" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a98febadf1c1" class="peer sr-only">
<span class="h-5 w-9 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-4 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" aria-hidden="true"><span class="xy-thumb size-4 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span></span></label>
</td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">Edit</button>
</td>
</tr>
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">Globex Support</span>
</td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums text-base-content/60">
                    42
                </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
<span class="font-medium">31</span>
<span class="text-base-content/35">/ 50</span>
</td>
<td class="py-md px-sm align-middle">
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-0.5 gap-1 bg-success/15 text-success border-transparent">Active</span>
</td>
<td class="py-md px-sm align-middle text-right">
<label for="toggle_6a98febadf391" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a98febadf391" class="peer sr-only" checked>
<span class="h-5 w-9 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-4 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" aria-hidden="true"><span class="xy-thumb size-4 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span></span></label>
</td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">Edit</button>
</td>
</tr>
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">Initech Research</span>
</td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums text-base-content/60">
                    3
                </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
<span class="font-medium">1</span>
<span class="text-base-content/35">/ 5</span>
</td>
<td class="py-md px-sm align-middle">
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-0.5 gap-1 bg-base-content/15 text-base-content border-transparent">Trial</span>
</td>
<td class="py-md px-sm align-middle text-right">
<label for="toggle_6a98febadf563" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a98febadf563" class="peer sr-only">
<span class="h-5 w-9 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-4 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" aria-hidden="true"><span class="xy-thumb size-4 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span></span></label>
</td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
Livewire のループ内で — 行は素の <tr> のままなので wire:key も @forelse もそのまま動く 
<x-table>
    <x-slot:head>
        <x-table.th>Workspace</x-table.th>
        <x-table.th numeric>Members</x-table.th>
        <x-table.th action />
    </x-slot:head>

    @forelse ($workspaces as $workspace)
        <tr wire:key="workspace-{{ $workspace->id }}">
            <x-table.td>{{ $workspace->name }}</x-table.td>
            <x-table.td numeric>{{ $workspace->members_count }}</x-table.td>
            <x-table.td action>
                <x-button size="xs" appearance="ghost">Edit</x-button>
            </x-table.td>
        </tr>
    @empty
        <x-table.empty>No workspaces yet</x-table.empty>
    @endforelse
</x-table>

空状態 — <x-table.empty> は全カラムに自動で colspan される

Workspace Members Seats

No workspaces yet

Create one to start inviting members.

 
<x-table>
    <x-slot:head>
        <x-table.th>Workspace</x-table.th>
        <x-table.th numeric>Members</x-table.th>
        <x-table.th numeric>Seats</x-table.th>
        <x-table.th action />
    </x-slot:head>

    <x-table.empty>
        <p class="text-sm text-base-content/55">No workspaces yet</p>
        <p class="mt-2xs text-xs text-base-content/35">Create one to start inviting members.</p>
    </x-table.empty>
</x-table>

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 text-base-content overflow-x-auto">
<table class="w-full text-sm [&amp;_th:first-child]:pl-lg [&amp;_th:last-child]:pr-lg [&amp;_td:first-child]:pl-lg [&amp;_td:last-child]:pr-lg">
<thead>
<tr class="border-b-[length:var(--border)] border-base-content/10 text-left text-xs text-base-content/45">
<th class="py-sm px-sm font-medium align-middle">
                    Workspace
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                    Members
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                    Seats
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap"></th>
</tr>
</thead>
<tbody class="[&amp;&gt;tr]:border-b [&amp;&gt;tr]:border-base-content/10 [&amp;&gt;tr:last-child]:border-b-0 [&amp;&gt;tr]:transition-colors [&amp;&gt;tr:not(.pn-table-empty):hover]:bg-base-200/60">
<tr class="pn-table-empty">
<td colspan="999" class="py-xl px-lg text-center">
<p class="text-sm text-base-content/55">
                        No workspaces yet
                    </p>
<p class="mt-2xs text-xs text-base-content/35">
                        Create one to start inviting members.
                    </p>
</td>
</tr>
</tbody>
</table>
</div>

行の密度 — size="sm" / size="lg"

size="sm"

Workspace Members
Acme Marketing 18
Northwind Sales 7
Globex Support 42

size="lg"

Workspace Members
Acme Marketing 18
Northwind Sales 7
Globex Support 42 
<div class="grid gap-lg md:grid-cols-2 md:items-start">
    <div class="space-y-xs">
        <p class="text-xs font-medium text-base-content/50">size="sm"</p>
        <x-table size="sm">
            <x-slot:head>
                <x-table.th>Workspace</x-table.th>
                <x-table.th numeric>Members</x-table.th>
            </x-slot:head>
            <tr>
                <x-table.td>Acme Marketing</x-table.td>
                <x-table.td numeric>18</x-table.td>
            </tr>
            <tr>
                <x-table.td>Northwind Sales</x-table.td>
                <x-table.td numeric>7</x-table.td>
            </tr>
            <tr>
                <x-table.td>Globex Support</x-table.td>
                <x-table.td numeric>42</x-table.td>
            </tr>
        </x-table>
    </div>

    <div class="space-y-xs">
        <p class="text-xs font-medium text-base-content/50">size="lg"</p>
        <x-table size="lg">
            <x-slot:head>
                <x-table.th>Workspace</x-table.th>
                <x-table.th numeric>Members</x-table.th>
            </x-slot:head>
            <tr>
                <x-table.td>Acme Marketing</x-table.td>
                <x-table.td numeric>18</x-table.td>
            </tr>
            <tr>
                <x-table.td>Northwind Sales</x-table.td>
                <x-table.td numeric>7</x-table.td>
            </tr>
            <tr>
                <x-table.td>Globex Support</x-table.td>
                <x-table.td numeric>42</x-table.td>
            </tr>
        </x-table>
    </div>
</div>

<div class="grid gap-lg md:grid-cols-2 md:items-start">
<div class="space-y-xs">
<p class="text-xs font-medium text-base-content/50">
            size="sm"
        </p>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 text-base-content overflow-x-auto">
<table class="w-full text-xs [&amp;_th:first-child]:pl-lg [&amp;_th:last-child]:pr-lg [&amp;_td:first-child]:pl-lg [&amp;_td:last-child]:pr-lg">
<thead>
<tr class="border-b-[length:var(--border)] border-base-content/10 text-left text-xs text-base-content/45">
<th class="py-xs px-sm font-medium align-middle">
                            Workspace
                        </th>
<th class="py-xs px-sm font-medium align-middle text-right whitespace-nowrap">
                            Members
                        </th>
</tr>
</thead>
<tbody class="[&amp;&gt;tr]:border-b [&amp;&gt;tr]:border-base-content/10 [&amp;&gt;tr:last-child]:border-b-0 [&amp;&gt;tr]:transition-colors [&amp;&gt;tr:not(.pn-table-empty):hover]:bg-base-200/60">
<tr>
<td class="py-sm px-sm align-middle">
                            Acme Marketing
                        </td>
<td class="py-sm px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            18
                        </td>
</tr>
<tr>
<td class="py-sm px-sm align-middle">
                            Northwind Sales
                        </td>
<td class="py-sm px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            7
                        </td>
</tr>
<tr>
<td class="py-sm px-sm align-middle">
                            Globex Support
                        </td>
<td class="py-sm px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            42
                        </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="space-y-xs">
<p class="text-xs font-medium text-base-content/50">
            size="lg"
        </p>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 text-base-content overflow-x-auto">
<table class="w-full text-sm [&amp;_th:first-child]:pl-lg [&amp;_th:last-child]:pr-lg [&amp;_td:first-child]:pl-lg [&amp;_td:last-child]:pr-lg">
<thead>
<tr class="border-b-[length:var(--border)] border-base-content/10 text-left text-xs text-base-content/45">
<th class="py-sm px-sm font-medium align-middle">
                            Workspace
                        </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                            Members
                        </th>
</tr>
</thead>
<tbody class="[&amp;&gt;tr]:border-b [&amp;&gt;tr]:border-base-content/10 [&amp;&gt;tr:last-child]:border-b-0 [&amp;&gt;tr]:transition-colors [&amp;&gt;tr:not(.pn-table-empty):hover]:bg-base-200/60">
<tr>
<td class="py-lg px-sm align-middle">
                            Acme Marketing
                        </td>
<td class="py-lg px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            18
                        </td>
</tr>
<tr>
<td class="py-lg px-sm align-middle">
                            Northwind Sales
                        </td>
<td class="py-lg px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            7
                        </td>
</tr>
<tr>
<td class="py-lg px-sm align-middle">
                            Globex Support
                        </td>
<td class="py-lg px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            42
                        </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

既存のカードの中に入れる — <x-card :padding="false"> + <x-table :card="false">

Invoices this month

3 records
Invoice Customer Amount
INV-2041 Acme Marketing $1,280.00
INV-2042 Northwind Sales $540.00
INV-2043 Globex Support $12,900.00 
<x-card :padding="false">
    <x-slot:header>
        <div class="p-lg flex items-baseline justify-between">
            <h2 class="text-sm font-semibold">Invoices this month</h2>
            <span class="text-xs text-base-content/40">3 records</span>
        </div>
    </x-slot:header>

    <x-table :card="false">
        <x-slot:head>
            <x-table.th>Invoice</x-table.th>
            <x-table.th>Customer</x-table.th>
            <x-table.th numeric>Amount</x-table.th>
            <x-table.th action />
        </x-slot:head>

        <tr>
            <x-table.td><span class="font-medium">INV-2041</span></x-table.td>
            <x-table.td muted>Acme Marketing</x-table.td>
            <x-table.td numeric>$1,280.00</x-table.td>
            <x-table.td action><x-button size="xs" appearance="ghost">View</x-button></x-table.td>
        </tr>
        <tr>
            <x-table.td><span class="font-medium">INV-2042</span></x-table.td>
            <x-table.td muted>Northwind Sales</x-table.td>
            <x-table.td numeric>$540.00</x-table.td>
            <x-table.td action><x-button size="xs" appearance="ghost">View</x-button></x-table.td>
        </tr>
        <tr>
            <x-table.td><span class="font-medium">INV-2043</span></x-table.td>
            <x-table.td muted>Globex Support</x-table.td>
            <x-table.td numeric>$12,900.00</x-table.td>
            <x-table.td action><x-button size="xs" appearance="ghost">View</x-button></x-table.td>
        </tr>
    </x-table>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] px-[var(--border)] border-b-[length:var(--border)] border-base-content/10">
<div class="p-lg flex items-baseline justify-between">
<h2 class="text-sm font-semibold">
                Invoices this month
            </h2><span class="text-xs text-base-content/40">3 records</span>
</div>
</div>
<div class="-mx-[var(--border)] px-[var(--border)] flex-1">
<div class="overflow-x-auto">
<table class="w-full text-sm [&amp;_th:first-child]:pl-lg [&amp;_th:last-child]:pr-lg [&amp;_td:first-child]:pl-lg [&amp;_td:last-child]:pr-lg">
<thead>
<tr class="border-b-[length:var(--border)] border-base-content/10 text-left text-xs text-base-content/45">
<th class="py-sm px-sm font-medium align-middle">
                            Invoice
                        </th>
<th class="py-sm px-sm font-medium align-middle">
                            Customer
                        </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                            Amount
                        </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap"></th>
</tr>
</thead>
<tbody class="[&amp;&gt;tr]:border-b [&amp;&gt;tr]:border-base-content/10 [&amp;&gt;tr:last-child]:border-b-0 [&amp;&gt;tr]:transition-colors [&amp;&gt;tr:not(.pn-table-empty):hover]:bg-base-200/60">
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">INV-2041</span>
</td>
<td class="py-md px-sm align-middle text-base-content/60">
                            Acme Marketing
                        </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            $1,280.00
                        </td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">View</button>
</td>
</tr>
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">INV-2042</span>
</td>
<td class="py-md px-sm align-middle text-base-content/60">
                            Northwind Sales
                        </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            $540.00
                        </td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">View</button>
</td>
</tr>
<tr>
<td class="py-md px-sm align-middle">
<span class="font-medium">INV-2043</span>
</td>
<td class="py-md px-sm align-middle text-base-content/60">
                            Globex Support
                        </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
                            $12,900.00
                        </td>
<td class="py-md px-sm align-middle text-right 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-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer">View</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

行のホバーを止める — :hover="false"

Region Signups
Europe 1,204
Asia Pacific 982 
<x-table :hover="false">
    <x-slot:head>
        <x-table.th>Region</x-table.th>
        <x-table.th numeric>Signups</x-table.th>
    </x-slot:head>
    <tr>
        <x-table.td>Europe</x-table.td>
        <x-table.td numeric>1,204</x-table.td>
    </tr>
    <tr>
        <x-table.td>Asia Pacific</x-table.td>
        <x-table.td numeric>982</x-table.td>
    </tr>
</x-table>

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 text-base-content overflow-x-auto">
<table class="w-full text-sm [&amp;_th:first-child]:pl-lg [&amp;_th:last-child]:pr-lg [&amp;_td:first-child]:pl-lg [&amp;_td:last-child]:pr-lg">
<thead>
<tr class="border-b-[length:var(--border)] border-base-content/10 text-left text-xs text-base-content/45">
<th class="py-sm px-sm font-medium align-middle">
                    Region
                </th>
<th class="py-sm px-sm font-medium align-middle text-right whitespace-nowrap">
                    Signups
                </th>
</tr>
</thead>
<tbody class="[&amp;&gt;tr]:border-b [&amp;&gt;tr]:border-base-content/10 [&amp;&gt;tr:last-child]:border-b-0">
<tr>
<td class="py-md px-sm align-middle">
                    Europe
                </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
                    1,204
                </td>
</tr>
<tr>
<td class="py-md px-sm align-middle">
                    Asia Pacific
                </td>
<td class="py-md px-sm align-middle text-right whitespace-nowrap tabular-nums">
                    982
                </td>
</tr>
</tbody>
</table>
</div>

Props

Prop デフォルト 説明
sizemd<x-table> の行密度。sm（コンパクト・本文 text-xs）/ md / lg（ゆったり）。各セルへ自動で伝播するので、セル側に指定しない。
cardtruetrue = table 自身がカード面（枠線・角丸・bg-base-100）を持つ。既存の <x-card :padding="false"> の中に入れる時だけ :card="false"。
hovertrue本文行のホバー強調。空状態の行は常に対象外。
numericfalseth / td で右寄せ。td では tabular-nums も付き、桁が縦に揃う。件数・金額・日付向け。
actionfalseth / td で右寄せ。td では whitespace-nowrap も付く。末尾のボタン列に使う（ヘッダは <x-table.th action /> ）。
mutedfalsetd 専用 — 文字を薄く（text-base-content/60）する。主役の列と競合させたくない補助的な数値に。
alignnullleft / center / right の明示指定。numeric・action より優先される。
  • 本文の行は素の <tr>。区切り線・ホバー・最終行の枠線処理は親から注入されるので、ループでもラッパーコンポーネントが要らない。
  • size は @aware で親から各セルへ流れる。セルに size を書いても効かない。
  • シェル自体が横スクロールする。フェードとスクロールボタンも欲しい時だけ <x-table-scroll> で包む。