组件
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> 包裹。