Stickyng the table header

Hello All!

Can I use Wappler internally to create a table with a fixed header so that the header is not squandered by scrolling?

Example: http://jsfiddle.net/4jfQ6/

That is not something that is in Wappler yet. You would have to code that manually.

1 Like

@brad, ok. Thanks for the quick response! I assumed this, but decided to clarify, because Wappler is often surprised by the ability to do a very fine-tuning of the elements, which you can not even think that it is capable of it.

1 Like

Does this not help?

Sticky Navigation on Scroll

You can use position sticky and do this with CSS only:

1 Like

@Teodor, are you sure this solution works in bootstrap 4? I tried to implement it, but did not get the same result as in the example. Although if this option worked, it would be very attractive, due to its simplicity.

It doesn’t matter if it’s bootstrap or not :slight_smile: an HTML table is an HTML table.
Maybe you can provide a link where we can check what’s wrong?

I would be grateful if you tell me what’s wrong: http://cy65837.tmweb.ru/mainpage.html

@Teodor, hello. Did you manage to set up a simple html tag? :slight_smile:

Looking at your page using CSS position: sticky won’t work.
Position sticky works best when your “sticky” elements is a direct child of the page body, not when nested in some other containers.
In your specific case it’s better to use a js solution.

1 Like

Well, never mind, thanks anyway.:slightly_smiling_face:

What I do in these cases is separate the table header and the table body is to manually build it. This might be simplistic, but it works for scrolling the data rows while keeping the header stationary or ‘sticky’.

Maybe something like this will help you craft your own design:

    <div class="container">
      
      <div class="col-md-12 stick-top">
        <h3>Data Table Name</h3>
      </div>
      <!-- col-md-12 -->

      <div class="col-md-12">
        <table width="100%">
          <thead>
            <th width="25%">Header</th><th width="25%">Header</th><th width="25%">Header</th><th width="25%">Header</th>
          </thead>
        </table>
      </div>
      <!-- col-md-12 -->
            
      <div class="col-md-12" style="max-height: 250px; overflow: scroll; border-top: 1px solid black; border-bottom: 1px solid black;">

        <table width="100%">
          <th width="25%"></th>
          <th width="25%"></th>
          <th width="25%"></th>
          <th width="25%"></th>
          <tr>
            <td>1</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>2</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>3</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>4</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>5</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>6</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>7</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>8</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>9</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>10</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>11</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>12</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>13</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>14</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>15</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>16</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>17</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>18</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>19</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
          <tr>
            <td>20</td><td>Data</td><td>Data</td><td>Data</td>
          </tr>
        </table>

      </div>
      <!-- /.col-md-12 -->

   </div>
  <!-- /.container -->
1 Like

@revjrblack, thanks for helping! What You propose, I planned to do initially. However, the way to configure css position: sticky attracted me too much because of its simplicity and I was able to figure out what the problem is.

Tuning becomes literally two steps:

  1. When generating a table in Wappler, you do not need to include the responsive class.
  2. Set the tags th position: sticky and background color, and set the z-index. Also adjust the frame styles of the table, so that it is displayed correctly in the header when scrolling. As a result, the following code will be added to our css:
table {
    border-collapse: separate;
    border-spacing: 0;
}

th {
    background: #F0F0F1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1200;
}

Nothing else to do and it will work great! Decided to share, perhaps someone it will be useful and he can use it to solve in your project.

Good luck all! :wink:

2 Likes

PS such a simple solution would not work, if not for the help @Teodor and its link to the decision: https://css-tricks.com/position-sticky-and-table-headers/ so thanks to him! Initially, the solution did not work only because of the responsive class. So again, if you want to have a fixed header in the table, do not use the responsive class.

1 Like

Great lesson! Thanks.

1 Like