Search code examples
bootstrap-table

How use sticky header extension with html data table?


How would I go about setting up an html table to use sticky headers and set the stickyHeaderOffsetY option.

The examples for https://bootstrap-table.com/docs/extensions/sticky-header/ all assume you're using javascript to populate the tables and I cannot find any documentation on how to set the options any other way.

This is as far as I have gotten:

<table
    data-toggle="table"
    data-search="true"
    data-sticky-header="true"
    data-sortable="true"
    data-show-columns="true"
    class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

Solution

  • Sorry I cant comment, but do you try this?

    <table
      data-sticky-header="true"
      data-sticky-header-offset-y="60"
    ></table>