A basic sorted table for Vue.js

vue-sorted-table

A plugin to turn tables into sorted tables. Supports nested object keys, custom icons and reusable components.

Installation

Install with NPM:

npm install --save vue-sorted-table

Import globally in app:

import SortedTablePlugin from "vue-sorted-table";

Vue.use(SortedTablePlugin);

Examples

Basic

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

<template>
  <div id="app">
    <SortedTable :values="values">
      <thead>
        <tr>
          <th scope="col" style="text-align: left; width: 10rem;">
            <SortLink name="id">ID</SortLink>
          </th>
          <th scope="col" style="text-align: left; width: 10rem;">
            <SortLink name="name">Name</SortLink>
          </th>
          <th scope="col" style="text-align: left; width: 10rem;">
            <SortLink name="hits">Hits</SortLink>
          </th>
        </tr>
      </thead>
      <tbody slot="body" slot-scope="sort">
        <tr v-for="value in sort.values" :key="value.id">
          <td>{{ value.id }}</td>
          <td>{{ value.name }}</td>
          <td>{{ value.hits }}</td>
        </tr>
      </tbody>
    </SortedTable>
  </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 SortedTable tag requires a values property, which is an array of objects which contain the data:

<SortedTable :values="values">
</SortedTable>

The SortLink 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:

<SortLink name="id">ID</SortLink>

The sorted data is made accessible as a scoped slot.
Therefore the tbody tag is served as part of the body slot and has the slot scope sort:

<tbody slot="body" slot-scope="sort">
</tbody>

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>

Advanced

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>'
});

Nested values

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:

<SortLink name="user.name">Username</SortLink>

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>

Single File Components

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:

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

Configuration

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

Components

SortedTable

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>.

Properties

This component has the following properties:

SortLink

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

Properties

This component has the following properties:

Constraint

Currently, the SortLink component expects to be a child of the SortedTable component.
Adding any other component in between will break the sorting capabilities.

GitHub