vue-fixedthead
v1.2.4
Published
Vue 2 component for jquery.floatThead
Downloads
8
Maintainers
Readme
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>