vue-floatthead

    0.0.5 • Public • Published

    vue-floatthead

    Vue 2 component for jquery.floatThead

    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> 
     

    Install

    npm i vue-floatthead

    DownloadsWeekly Downloads

    111

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • tmlee