显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

表格

以压缩的、可搜索的格式显示结构化数据。

客户
Ivy Miller	Nov 1, 12:35 AM	failed	88.52	查看发票退款归档
Sage Jackson	Nov 1, 12:30 AM	paid	43.66	查看发票退款归档
Nova Brown	Oct 31, 10:44 PM	paid	184.12	查看发票退款归档
Luna Martinez	Oct 31, 9:55 PM	incomplete	137.79	查看发票退款归档
Kaiya Bator	Oct 31, 9:24 PM	paid	67.63	查看发票退款归档

显示中 1 至 5 于 1000 结果

...

<flux:table :paginate="$this->orders">    <flux:table.columns>        <flux:table.column>Customer</flux:table.column>        <flux:table.column sortable :sorted="$sortBy === 'date'" :direction="$sortDirection" wire:click="sort('date')">Date</flux:table.column>        <flux:table.column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection" wire:click="sort('status')">Status</flux:table.column>        <flux:table.column sortable :sorted="$sortBy === 'amount'" :direction="$sortDirection" wire:click="sort('amount')">Amount</flux:table.column>    </flux:table.columns>    <flux:table.rows>        @foreach ($this->orders as $order)            <flux:table.row :key="$order->id">                <flux:table.cell class="flex items-center gap-3">                    <flux:avatar size="xs" src="{{ $order->customer_avatar }}" />                    {{ $order->customer }}                </flux:table.cell>                <flux:table.cell class="whitespace-nowrap">{{ $order->date }}</flux:table.cell>                <flux:table.cell>                    <flux:badge size="sm" :color="$order->status_color" inset="top bottom">{{ $order->status }}</flux:badge>                </flux:table.cell>                <flux:table.cell variant="strong">{{ $order->amount }}</flux:table.cell>                <flux:table.cell>                    <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>                </flux:table.cell>            </flux:table.row>        @endforeach    </flux:table.rows></flux:table><!-- Livewire component example code...    use \Livewire\WithPagination;    public $sortBy = 'date';    public $sortDirection = 'desc';    public function sort($column) {        if ($this->sortBy === $column) {            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';        } else {            $this->sortBy = $column;            $this->sortDirection = 'asc';        }    }    #[\Livewire\Attributes\Computed]    public function orders()    {        return \App\Models\Order::query()            ->tap(fn ($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)            ->paginate(5);    }-->

简单表格

上面的主要表格示例是一个功能齐全的表格，包含排序、分页等功能。这里是一个简洁的简单数据表格示例，您可以用作更简单的起点。

客户	日期	状态	金额
Lindsey Aminoff	Jul 29, 10:45 AM	已付款	$49.00
Hanna Lubin	Jul 28, 2:15 PM	已付款	$312.00
Kianna Bushevi	Jul 30, 4:05 PM	已退款	$132.00
Gustavo Geidt	Jul 27, 9:30 AM	已付款	$31.00

<flux:table>    <flux:table.columns>        <flux:table.column>Customer</flux:table.column>        <flux:table.column>Date</flux:table.column>        <flux:table.column>Status</flux:table.column>        <flux:table.column>Amount</flux:table.column>    </flux:table.columns>    <flux:table.rows>        <flux:table.row>            <flux:table.cell>Lindsey Aminoff</flux:table.cell>            <flux:table.cell>Jul 29, 10:45 AM</flux:table.cell>            <flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>            <flux:table.cell variant="strong">$49.00</flux:table.cell>        </flux:table.row>        <flux:table.row>            <flux:table.cell>Hanna Lubin</flux:table.cell>            <flux:table.cell>Jul 28, 2:15 PM</flux:table.cell>            <flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>            <flux:table.cell variant="strong">$312.00</flux:table.cell>        </flux:table.row>        <flux:table.row>            <flux:table.cell>Kianna Bushevi</flux:table.cell>            <flux:table.cell>Jul 30, 4:05 PM</flux:table.cell>            <flux:table.cell><flux:badge color="zinc" size="sm" inset="top bottom">退款ed</flux:badge></flux:table.cell>            <flux:table.cell variant="strong">$132.00</flux:table.cell>        </flux:table.row>        <flux:table.row>            <flux:table.cell>Gustavo Geidt</flux:table.cell>            <flux:table.cell>Jul 27, 9:30 AM</flux:table.cell>            <flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>            <flux:table.cell variant="strong">$31.00</flux:table.cell>        </flux:table.row>    </flux:table.rows></flux:table>

分页

通过将任何模型分页器传递给 paginate 属性，允许用户浏览不同页面的数据。

显示中 1 至 5 于 1000 结果

...

<!-- $orders = \App\Models\Order::paginate(5) --><flux:table :paginate="$orders">    <!-- ... --></flux:table>

可排序

通过结合使用 sortable、sorted 和 direction 属性，允许用户按特定列对行进行排序。

客户
Ivy Miller	Nov 1, 12:35 AM	88.52
Sage Jackson	Nov 1, 12:30 AM	43.66
Nova Brown	Oct 31, 10:44 PM	184.12
Luna Martinez	Oct 31, 9:55 PM	137.79
Kaiya Bator	Oct 31, 9:24 PM	67.63

<flux:table>    <flux:table.columns>        <flux:table.column>Customer</flux:table.column>        <flux:table.column sortable sorted direction="desc">Date</flux:table.column>        <flux:table.column sortable>Amount</flux:table.column>    </flux:table.columns>    <!-- ... --></flux:table>

固定表头

通过向 table.columns 组件添加 sticky 属性，在垂直滚动时保持表头可见。

确保在表头行上设置背景颜色以防止内容重叠。

客户
Ivy Miller	Nov 1, 12:35 AM	failed	88.52	查看发票退款归档
Sage Jackson	Nov 1, 12:30 AM	paid	43.66	查看发票退款归档
Nova Brown	Oct 31, 10:44 PM	paid	184.12	查看发票退款归档
Luna Martinez	Oct 31, 9:55 PM	incomplete	137.79	查看发票退款归档
Kaiya Bator	Oct 31, 9:24 PM	paid	67.63	查看发票退款归档
Leo Garcia	Oct 31, 8:58 PM	failed	108.64	查看发票退款归档
Ivy Miller	Oct 31, 8:25 PM	incomplete	144.96	查看发票退款归档
Zara Williams	Oct 31, 8:14 PM	incomplete	75.50	查看发票退款归档
Kai Anderson	Oct 31, 8:10 PM	failed	119.27	查看发票退款归档
Kai Anderson	Oct 31, 7:45 PM	failed	81.03	查看发票退款归档

<!-- Set the height of the table container... --><flux:table container:class="max-h-80">    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">         <!-- ... -->    </flux:table.columns>    <!-- ... --></flux:table>

固定列

通过为 table.column 和 table.cell 组件添加 sticky 属性，在水平滚动时保持重要信息可见。

确保为列和单元格设置背景颜色以防止内容重叠。

ID	客户
#617	Ivy Miller	Nov 1, 12:35 AM	failed	88.52	查看发票退款归档
#888	Sage Jackson	Nov 1, 12:30 AM	paid	43.66	查看发票退款归档
#993	Nova Brown	Oct 31, 10:44 PM	paid	184.12	查看发票退款归档
#83	Luna Martinez	Oct 31, 9:55 PM	incomplete	137.79	查看发票退款归档
#266	Kaiya Bator	Oct 31, 9:24 PM	paid	67.63	查看发票退款归档
#161	Leo Garcia	Oct 31, 8:58 PM	failed	108.64	查看发票退款归档
#190	Ivy Miller	Oct 31, 8:25 PM	incomplete	144.96	查看发票退款归档
#536	Zara Williams	Oct 31, 8:14 PM	incomplete	75.50	查看发票退款归档
#290	Kai Anderson	Oct 31, 8:10 PM	failed	119.27	查看发票退款归档
#117	Kai Anderson	Oct 31, 7:45 PM	failed	81.03	查看发票退款归档

<flux:table container:class="max-h-80">    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">        <flux:table.column sticky class="bg-white dark:bg-zinc-900">ID</flux:table.column>        <!-- ... -->    </flux:table.columns>    <flux:table.rows>        @foreach ($this->orders as $order)            <flux:table.row :key="$order->id">                <flux:table.cell sticky class="bg-white dark:bg-zinc-900">{{ $order->id }}</flux:table.cell>                <!-- ... -->            </flux:table.row>        @endforeach    </flux:table.rows></flux:table>

头像

显示用户头像或首字母后备

徽章

显示小数字、状态指示器或标签

下拉菜单

为行操作显示可展开的菜单

参考

flux:table

属性	描述
paginate	一个 Laravel 分页器实例，用于启用分页功能。
container:class	应用于容器的额外 CSS 类。适用于设置高度限制，如 max-h-80。

特性	描述
data-flux-table	应用于根元素，用于样式和标识。

flux:table.columns

属性	描述
sticky	当存在时，使表头行在滚动时保持固定。

插槽	描述
default	表格列。

flux:table.column

属性	描述
align	列内容的对齐方式。选项：start、center、end。
sortable	为该列启用排序功能。
sorted	表示该列当前正在被排序。
direction	列被排序时的排序方向。选项：asc、desc。
sticky	当存在时，使该列在滚动时保持固定。

flux:table.rows

插槽	描述
default	表格行。

flux:table.row

插槽	描述
default	该行的表格单元格。

属性	描述
key	wire:key 的别名：行的唯一标识符。
sticky	当存在时，使该行在滚动时保持固定。

flux:table.cell

属性	描述
align	单元格内容的对齐方式。选项：start、center、end。
variant	单元格的视觉样式。选项：default、strong。
sticky	当存在时，使该单元格在滚动时保持固定。

表格

相关组件

参考