table-sort-js

Example of how to use table-sort.js in a Vue application. You need to have Vue CLI or Webpack (with Vue Loader). For more information on Vue CLI and/or Webpack, please see their respective documentation! The code below should get things working..
Download with NPM: npm install table-sort-js
  • Insert this code block into your entry point JavaScript file like main.js 
    • 
          import Vue from 'vue'
          import App from './App'
          import tableSort from 'table-sort-js/table-sort.js';

          Vue.config.productionTip = false
          Vue.use(tableSort)


          new Vue({
            render: h => h(App),
          }).$mount('#app')
  • If you are using Vue 3.0 or greater, then insert this code block into your entry point JavaScript file like main.js 
    • 
          import { createApp } from 'vue'
          import App from './App'
          import tableSort from 'table-sort-js/table-sort.js';

          const app = createApp(App)
          app.provide('tableSort', tableSort)
          app.mount('#app')
    The next step!
  • Now insert this code block in your .Vue file, usually App.vue 
    • 
          <template>
            <table class="table-sort">
              <thead>
                <tr>
                  <th>Last Name</th>
                  <th>First Name</th>
                  <th class="order-by-desc">Birth Date</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Jobs</td>
                  <td>Steve</td>
                  <td>1955/2/24</td>
                </tr>
                <tr>
                  <td>Bezos</td>
                  <td>Jeff</td>
                  <td>1964/1/12</td>
                </tr>
                <tr>
                  <td>Dorsey</td>
                  <td>Jack</td>
                  <td>1976/11/19</td>
                </tr>
              </tbody>
            </table>
          </template>

          <script>
          export default {
            name: 'App'
          }
          </script>