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.