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 Answers 2

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 : (

1
  • 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, 2017 at 20:41
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .