粘性表头与列

版本 ^2.5.1

Flux 表格现已支持粘性表头和粘性列，可在用户滚动大型数据集时保持重要信息可见。

一起来看看。

粘性表头

在 table.columns 组件上添加 sticky 属性，可在垂直滚动时保持列表头可见：

<flux:table container:class="max-h-80">
    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">
        <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>

表头行的背景色可防止下方行滚动时发生内容重叠。通过 container:class 属性为表格设置最大高度，可创建可滚动区域，同时将表头固定在顶部。

了解更多关于粘性表头 →

粘性列

在单独的 table.column 与 table.cell 组件上添加 sticky 属性，可在水平滚动时保持重要列可见。与粘性表头结合使用，可获得类似电子表格的体验：

<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.column>Customer</flux:table.column>
        <flux:table.column>Email</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.cell>{{ $order->customer }}</flux:table.cell>
                <flux:table.cell>{{ $order->email }}</flux:table.cell>
                <!-- ... -->
            </flux:table.row>
        @endforeach
    </flux:table.rows>
</flux:table>

同时在列头和每一行中的对应单元格上应用 sticky。添加背景色以防止内容重叠；在滚动时我们会自动添加细微阴影，帮助用户识别该列覆盖在下方内容之上。

了解更多关于粘性列 →

查看 Table 文档以获取完整示例和 API 参考。