元件
pinion-ui

Theme

Tune

Lang

Data Table

資料表格。<x-table> 父元件 + 巢狀的 <x-table.th> / <x-table.td> / <x-table.empty> 儲存格，一次包辦「卡片中的表格」：卡片外觀·表頭列·儲存格節奏·列的滑鼠停留·最末列邊框處理·數字欄靠右對齊 (tabular-nums)·與 x-card 的 p-lg 對齊的邊緣留白·空狀態佔位。內文列仍是普通 <tr>，@forelse 與 wire:key 照常可用。三個維度：size (sm/md/lg)·card·hover。

基本用法 — 表格自帶卡片外觀

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>
載入中…
無法載入 HTML
在 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> 自動橫跨全部欄位

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>
載入中…
無法載入 HTML

列密度 — 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>
載入中…
無法載入 HTML

放入既有卡片 — <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>
載入中…
無法載入 HTML

關閉列的滑鼠停留效果 — :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>
載入中…
無法載入 HTML

Props

Prop 預設值 說明
sizemd<x-table> 的列密度：sm（緊湊·內文 text-xs）/ md / lg（寬鬆）。會自動傳遞到各儲存格，不要寫在儲存格上。
cardtruetrue = 表格自帶卡片外觀（邊框·圓角·bg-base-100）。只有嵌入既有的 <x-card :padding="false"> 時才傳 :card="false"。
hovertrue內文列的滑鼠停留高亮。空狀態列一律排除在外。
numericfalseth / td 上靠右對齊；td 上還會加 tabular-nums，使數字縱向對齊。適用於數量·金額·日期。
actionfalseth / td 上靠右對齊；td 上還會加 whitespace-nowrap。用於最末的按鈕欄（表頭寫 <x-table.th action /> ）。
mutedfalse僅 td — 讓文字變淡（text-base-content/60），用於不應與主要欄位爭奪注意力的次要數字。
alignnull明確指定 left / center / right，優先於 numeric 與 action。
  • 內文列是普通 <tr>：分隔線·滑鼠停留·最末列邊框都由父元件注入，因此迴圈中不需要額外的包裝元件。
  • size 透過 @aware 從父元件流向各儲存格；寫在儲存格上無效。
  • 外殼本身即可橫向捲動。只有當你還需要漸隱與捲動按鈕時，才用 <x-table-scroll> 包覆。