Sticky Header Row and First Column for Tables #351
-
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:
Use cases:
Proposed functionality:
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, |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 1 reply
-
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, |
Beta Was this translation helpful? Give feedback.
-
To @raftia's suggestion, here's a link that has an example: https://www.creative-tim.com/twcomponents/component/sticky-table-header |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Would also be helpful to be able to make the last/final column sticky for use with action buttons etc 👍️ |
Beta Was this translation helpful? Give feedback.
-
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:
Here is a full example:
|
Beta Was this translation helpful? Give feedback.
-
Hi, thanks to the release v2.5.1 this request is now implemented. Thank you @ganyicz @joshhanley @calebporzio |
Beta Was this translation helpful? Give feedback.
Hi, thanks to the release v2.5.1 this request is now implemented. Thank you @ganyicz @joshhanley @calebporzio