Minimal Sortable HTML Table In Vue – sorted-table

Description:

sorted-table is a Vue.js component that applies a basic Sortable functionality to the HTML table.

Basic Usage:

1. Install and import the sorted-table component.

import SortedTablePlugin from "vue-sorted-table";

2. Register the component.

Vue.use(SortedTablePlugin);

3. Create a sortable table in your template.

<template>
  <div id="app">
    <sorted-table :values="values">
      <thead>
        <tr>
          <th scope="col" style="text-align: left; width: 10rem;">
            <sort-link name="id">ID</sort-link>
          </th>
          <th scope="col" style="text-align: left; width: 10rem;">
            <sort-link name="name">Name</sort-link>
          </th>
          <th scope="col" style="text-align: left; width: 10rem;">
            <sort-link name="hits">Hits</sort-link>
          </th>
        </tr>
      </thead>
      <template #body="sort">
        <tbody>
          <tr v-for="value in sort.values" :key="value.id">
            <td>{{ value.id }}</td>
            <td>{{ value.name }}</td>
            <td>{{ value.hits }}</td>
          </tr>
        </tbody>
      </template>
    </sorted-table>
  </div>
</template>

4. Populate the HTML table.

export default {
  name: "App",
  data: function() {
    return {
      values: [
        { name: "Plugin Foo", id: 2, hits: 33 },
        { name: "Plugin Bar", id: 1, hits: 42 },
        { name: "Plugin Foo Bar", id: 3, hits: 79 }
      ]
    };
  }
};

5. Customize the sorting icons.

Vue.use(SortedTablePlugin,{
  ascIcon: 'asc icon here',
  descIcon: 'desc icon here'
});

Download Details:

Author: BernhardtD

Live Demo: https://codesandbox.io/s/xp37xr4pwo?module=%2Fsrc%2FApp.vue

Download Link: https://github.com/BernhardtD/vue-sorted-table/archive/master.zip

Official Website: https://github.com/BernhardtD/vue-sorted-table

Last Update: December 2, 2019

Install:

# NPM 
$ npm install vue-sorted-table --save

You Might Be Interested In:

Add Comment