A basic sorted table for Vue.js

Install with NPM:

npm install --save vue-sorted-table

Import globally in app:

import SortedTablePlugin from "vue-sorted-table"; Vue.use(SortedTablePlugin);

Or, using Vue:

buildModules: [ // ... 'vue-sorted-table/nuxt' ]

The basic example shows how to use the SortedTable and SortLink components:

<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> <tbody #body="{ values }"> <tr v-for="value in values" :key="value.id"> <td>{{ value.id }}</td> <td>{{ value.name }}</td> <td>{{ value.hits }}</td> </tr> </tbody> </sorted-table> </div> </template> <script> 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 } ] }; } }; </script>

The sorted-table tag requires a values property, which is an array of objects which contain the data:

<sorted-table :values="values"> </sorted-table>

The sort-link tag adds a link to sort the provided data. In the case the name property value is the current sorting, the component adds a sort icon, depending on the actual order:

<sort-link name="id">ID</sort-link>

The sorted data is made accessible as a scoped slot.

<template #body="sort"> <tbody> </tbody> </template>

Now we can access the slot scope via sort and iterate over the sorted values to render the data:

<tr v-for="value in sort.values" :key="value.id"> <td>{{ value.id }}</td> <td>{{ value.name }}</td> <td>{{ value.hits }}</td> </tr>

The advanced example is based on the basic example. It shows how to use the plugin configuration to set global sort icons:

Vue.use(SortedTablePlugin, { ascIcon: '<i class="material-icons">arrow_drop_up</i>', descIcon: '<i class="material-icons">arrow_drop_down</i>' });

By default, the objects containing the values has to be a flat object. To support nested objects ({ name: "Plugin Foo", user: { id: 1, name: "David Campbell" } }) the plugin uses lodash.

At first, install lodash:

npm install --save lodash

Import lodash and register Vue prototype:

import _ from "lodash"; Vue.prototype.$_ = _;

Add sort link using the nested key:

<sort-link name="user.name">Username</sort-link>

Extend v-for loop to render nested value:

<tr v-for="value in sort.values" :key="value.id"> <td>{{ value.id }}</td> <td>{{ value.name }}</td> <td>{{ value.hits }}</td> <td>{{ value.user.name }}</td> </tr>

The SortedTable and SortLink components can be used without registering the plugin. Import the components, e.g. as part of a singe file component:

import { SortedTable, SortLink } from "vue-sorted-table";

Register components locally:

export default { name: "App", components: { SortedTable, SortLink }, data: function() { return { // .. }; } };

Add sort icons as property of the SortedTable tag:

<sorted-table :values="values" ascIcon="<span> ▲</span>" descIcon="<span> ▼</span>" > <!-- .. --> </sorted-table>

The plugin configuration allows to set global sort icons, e.g. Advanced Example

The SortedTable is the main component of the plugin. It is intended to be a replacement of the <table></table> tag. So instead using the old table tags, use <SortedTable></SortedTable>.

This component has the following properties:

This component emits the following event:

• sort-table
  • This event will be emited on each new sort action, e.g. click on sort link.
  • arg0: sort property name, e.g. id
  • arg1: sort direction, e.g. asc

This component adds a link to sort the given values. A sort icon is attached automatically to link.

This component has the following properties: