ptim's avatar
Level 1

Table header fixed inside <flux:card> and scrollbar always visible

I am unfortunately struggling with my table inside a flux-card. I would like to achieve the following two behaviors, but I can't manage it. Attached is a screenshot with an example and my current code.

The table header should be sticky when I scroll within the flux-card. The horizontal scrollbar should always be visible at the bottom of the flux-card, not just when I scroll all the way down within the card. Can you help me with this?

Screenshot.

<div class="flex max-md:flex-col">
    <div class="w-full">
        <flux:card class="min-h-[760px] max-h-[760px] overflow-y-auto !p-0">
            <flux:table>
                <flux:table.columns class="bg-zinc-700">
                    <flux:table.column class="border-r min-w-8 dark:border-zinc-600"></flux:table.column>
                    <flux:table.column class="border-r min-w-10 max-w-10 dark:border-zinc-600 "></flux:table.column>

                    @foreach($columns as $key => $column)
                        <flux:table.column class="border-r dark:border-zinc-600">{{ $key }}</flux:table.column>
                    @endforeach

                </flux:table.columns>

                <flux:table.rows>

                    @foreach ($outputCollection as $output)

                        <flux:table.row>
                            <flux:table.cell class="bg-zinc-800/30 border-r dark:border-zinc-600 !py-1.5 !px-1.5">{{ $loop->index + 1 }}</flux:table.cell>
                            <flux:table.cell class="bg-zinc-800/30 border-r dark:border-zinc-600 !py-1.5 !px-1.5"><flux:checkbox/></flux:table.cell>
                        
                                @foreach ($output as $singleEntry)
                                    <flux:table.cell class="border-r dark:border-zinc-600 !py-1.5 !px-1.5"> {{ $singleEntry['value'] }}</flux:table.cell>
                                @endforeach

                        </flux:table.row>

                    @endforeach

                </flux:table.rows>
            </flux:table>
        </flux:card>
    </div>
</div>
0 likes
1 reply
RemiM's avatar

It looks like you have an attribute data-flux-table for the flux:table that is applied to the root element for styling and identification. See the documentation.

Please or to participate in this conversation.