vue-fixedthead

npm

$ npm install vue-fixedthead

Getting Started

<template>
  <float-thead-table>
    <thead>
      <tr>
          <th><a href="#" id="demoHeader1">xclick me1</a></th>
          <th><a href="#" id="demoHeader2">mouse over me2</a></th>
          <th><a href="#" id="demoHeader3">Header...3</a></th>
      </tr>
      <tbody>
        <tr>
            <td>Cell Content 1</td>
            <td>Cell Content 2</td>
            <td>Cell Content 3</td>
        </tr>
      </tbody>
    </thead>
  </float-thead-table>
  <float-thead-table>
    <thead>
      <tr>
          <th><a href="#" id="demoHeader4">xclick me4</a></th>
          <th><a href="#" id="demoHeader5">mouse over me5</a></th>
          <th><a href="#" id="demoHeader6">Header...6</a></th>
      </tr>
      <tbody>
        <tr>
            <td>Cell Content 1</td>
            <td>Cell Content 2</td>
            <td>Cell Content 3</td>
        </tr>
      </tbody>
    </thead>
  </float-thead-table>
</template>
 
````main.js
<script>
  import Vue from 'vue'
  import FloatThead from 'vue-fixedthead'
 
  Vue.use(FloatThead)
 
</script>

Usages

<float-thead-table ref='awesometable'></float-thead-table>
 
<script>
  ...
  methods: {
    triggerDestroy () {
      this.$refs.awesometable.destroy()
    }
  }
  ...
</script> 

<script>
  ...
  mounted () {
    this.$refs.awesometable.$on('floatThead', (e, isFloated, floatContainer) =>
      console.log('floatThead triggered', e, isFloated, floatContainer)
    )
    this.$refs.awesometable.$on('reflowed', (e, floatContainer) =>
      console.log('reflowed triggered', e, floatContainer)
    )
  }
  ...
</script>