1

I am creating a lightning component table that I wish to have with a fixed header but y-scrollable content. I was having a lot of trouble getting the scroll to work but then realized that can solve this issue as so

<div class="table-container">
   <ui:scrollerWrapper class="sWrapTest">
     <table .... >

Now the content scrolls when I changed the height to a set amount. The issue is getting the table header to be fixed. When I put:

<ui:scrollerWrapper class="sWrapTest">
<tbody...>

only in the body section, the header becomes misaligned. If I put the header in a class with position fixed, it doesn't changed anything. Any suggestions?

Thanks

2

Why not trying a pure CSS solution with position:sticky?

https://developer.mozilla.org/en-US/docs/Web/CSS/position

<style>
    table.HeaderSticky thead th { 
        position: sticky;  top:150px; z-index:20000;
        background: #eee;
        border-bottom: silver solid 1px;
        box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.2);
        text-transform: initial;
    }
</style>
<table class="HeaderSticky">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some</td>
            <td>Content</td>
        </tr>           
        <!-- more trs here -->          
    </tbody>
</table>

If you are in LEX play around with different values for top. For communities top:0px worked for me. It has to be > 0 if the page contains other fixed or sticky elements which you don't want to overlap.

You can put all of it also inside a wrapping div having a max-height if you don't want it to apply to the entire page.

| improve this answer | |
0

EDIT:

I was able to achieve what was desired by putting the header in a separate table element above the content:

<table>
  <thead>
  .
  .
  </thead>
</table>

<ui:scrollerWrapper class="sWrapTest">
<table>
.
.
.
</table>

EDIT 2:

This method does not work with a non fixed column table : (

| improve this answer | |
  • You should put this inside your questions as topic "What I have tried so far" and not as an answer. The will help you to get more and better answers. – Uwe Heim Sep 30 '17 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.