Why my header in table don't stick, I'm using bootstrap-vue

user_13748597 0
Viewed 342

Why my header in table don't stick, I'm using bootstrap-vue. I already put a sticky-header, and when I remove the 320px in stick-header it over-lapse on the card.

<div class="card">
  <div class="card-body">
    <h2 class="card-title text-center">PRODUCTS</h2>
    <div class="row">
      <div class="col-12" style="height: 350px;">
        <b-table
          sticky-header="320px"
          :items="products"
          :fields="table.fields"
          :per-page="table.perPage"
          :current-page="table.currentPage"
          :busy="table.isBusy"
          head-variant="light"
          responsive
        >
          <template #cell(actions)="row">
            <b-button
              size="sm"
              @click="addToOrder(row.item, row.index, $event.target)"
              class="mr-1"
            >
              Add
            </b-button>
          </template>
        </b-table>
      </div>
    </div>
  </div>
</div>

This is my table, if I scroll my header don't stick

bootstrap-vue vue.js
1 Answers

I think that the version of your bootstrap is the problem. I prepare a code snippet for your question, and you can see that everything works fine. Please check the version that I imported with yours.

new Vue({
  el: "#app",
  data() {
    return {
      table: {
        fields: ['heading1', 'heading2', 'heading3'],
        perPage: 30,
        currentPage: 1,
        isBusy: false
      },
      products: [{
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        }
      ]
    }
  }
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">

  <div class="card">
    <div class="card-body">
      <h2 class="card-title text-center">PRODUCTS</h2>
      <div class="row">
        <div class="col-12" style="height: 350px;">
          <b-table sticky-header="200px" :items="products" :fields="table.fields" :per-page="table.perPage" :current-page="table.currentPage" :busy="table.isBusy" head-variant="light" responsive>
            <template #cell(actions)="row">
                <b-button
                  size="sm"
                  @click="addToOrder(row.item, row.index, $event.target)"
                  class="mr-1"
                >
                  Add
                </b-button>
              </template>
          </b-table>
        </div>
      </div>
    </div>
  </div>
</div>

user_65955510
Related