Sticky Header Row and First Column for Tables

[MikeElghali]

Hi,

I have a feature request that I believe would significantly enhance the usability of the table component.

Feature request: Add the ability to make both the header row and the first column sticky.

Specifically:

1. Make the header row sticky (fixed at the top while scrolling vertically)
2. Make the first column sticky (fixed on the left while scrolling horizontally)

Use cases:

1. For tables with many rows, keeping the header visible while scrolling vertically helps users maintain context.
2. For tables with many columns, keeping the first column (often containing row identifiers) visible while scrolling horizontally is crucial for data association.
3. These features are particularly useful for responsive designs and large datasets viewed on various screen sizes.

Proposed functionality:

• An option to make the header row sticky (vertical scrolling)
• An option to make the first column sticky (horizontal scrolling)
• Potentially, the ability to make multiple columns sticky on the left side
• Ensure these features work together seamlessly for tables requiring both vertical and horizontal scrolling

This enhancement would align with modern web design practices and significantly improve the user experience for complex data tables, especially on mobile devices or when dealing with large datasets.

I understand if this isn't a top priority, but I wanted to suggest it for consideration in your future development roadmap.

Thank you for your time and for considering this request.

Best regards,
Mike

[raftia]

Hi @MikeElghali ,

I have not tried but i believe you are abele to use tailwind sticky properties to do this...

https://tailwindcss.com/docs/position#sticky-positioning-elements

I always use this in my tables, just give relative to the table and use sticky and top-0 or left-0 that will do the behaviour you're looking for.

Hope that helps!

Kind Regards,
Rafael

[jeffchown]

To @raftia's suggestion, here's a link that has an example: https://www.creative-tim.com/twcomponents/component/sticky-table-header

[mauritskorse]

To make sticky header work I published and added the code below for table and columns blade files.

For the table.blade.php

@props([
    'paginate' => null,
+    'sticky' => null,
])

// ...

+ $wrapperClasses = Flux::classes()
+    ->add('overflow-x-auto')
+    ->add($sticky ? 'overflow-y-auto' : '')
+    ->add($sticky && $paginate ? 'h-[calc(100%-4rem)]' : 'h-full')
+    ;
@endphp


- <div>
+ <div class="{{ $sticky ? 'h-full' : '' }}">

//...

- <div class="overflow-x-auto">
+ <div class="{{ $wrapperClasses}}">

and for the columns.blade.php

+ @aware(['sticky'])
+ @props([
+    'sticky' => null
+ ])
+
+ @php
+ if ($sticky) {
+    $attributes = $attributes->merge([
+        'x-data' => '',
+        'x-bind:style' => '{ \'z-index\': 10, position: \'sticky\', top: 0, \'max-height\': \'calc(100vh - \' + $el.offsetTop + \'px)\' }',
+    ]);
+ }
+ @endphp
+
+ <thead {{ $attributes }} data-flux-columns>
- <thead data-flux-columns>

Now you can add sticky to flux:table to make it work.

[MiguelLaforest]

Cool, pretty similar to what I had in my custom table component before Flux, I'll test that out! I was using js a little in mine, so I like yours if it works well. Hope it makes it into Flux so we don't have to publish.

[kyranb]

Would also be helpful to be able to make the last/final column sticky for use with action buttons etc 👍️

[raftia]

Today, I explored working with tables while maintaining a sticky behavior. The challenge I encountered was that the table is nested within two parent

elements. To address this without modifying the component itself, I found the following approach to be the most effective:

By targeting the second child of the component and applying a max-height, I was able to achieve the desired effect. In this case, I used max-h-dvh, but any height value can be applied based on your needs.

It would be great if @calebporzio and the team could consider enhancing the table component, as it is currently quite basic. Improvements such as built-in support for sticky behavior would eliminate the need for workarounds like this.

With this approach you can also use sticky to the last cell and right-0 @kyranb

Simply wrap the table in a div with the following class:

class="[&_*:where(.overflow-x-auto)]:max-h-dvh"

Here is a full example:

<div class="[&_*:where(.overflow-x-auto)]:max-h-dvh">
    <flux:table>
        <flux:table.columns>

            <flux:table.column class="sticky top-0 left-0 z-4 !pl-3">Name</flux:table.column>
            <flux:table.column class="sticky top-0">Date</flux:table.column>

            ...

        </flux:table.columns>

        <flux:table.rows>

            <flux:table.row>
                <flux:table.cell class="sticky left-0">Lindsey Aminoff</flux:table.cell>
                <flux:table.cell>Jul 29, 10:45 AM</flux:table.cell>
            </flux:table.row>

           ....

        </flux:table.rows>
    </flux:table>
</div>