Vue 2 component for jquery.floatThead

vue-floatthead

Vue 2.0 component for floatThead, a floating & sticky table header plugin.

Installation

npm

$ npm install vue-floatthead

Getting Started

<template>
  <float-thead-table>
    <thead>
      <tr>
          <th><a href="#" id="demoHeader1">xclick me</a></th>
          <th><a href="#" id="demoHeader2">mouse over me</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>
</template>

<script>
  import Vue from 'vue'
  import FloatThead from 'vue-floatthead'

  Vue.use(FloatThead)

  export default {
    components: {
      FloatThead
    }
  }
</script>

Usages

Pass options to the component

<float-thead-table position='fixed' floatTableClass='awesome-table'></float-thead-table>

Call methods of the component
destroy(), reflow(), or getRowGroups()

<float-thead-table ref='awesometable'></float-thead-table>

<script>
  ...
  methods: {
    triggerDestroy () {
      this.$refs.awesometable.destroy()
    }
  }
  ...
</script>

Trigger events

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

GitHub