vue-sorted-table

A basic sorted table for Vue.js

Installation

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'
]

Examples

Basic

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>

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:

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

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:

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

Configuration

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

Option	Description
ascIcon	Ascending sort icon.
descIcon	Descending sort icon.

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:

Property	Required	Default	Description
values	yes	null	Array of objects containing the values which should be sorted.
dir	no	asc	Sort direction. Valid values: ("asc"|"desc")
sort	no	id	Default sorting. Could be any valid object key.
ascIcon	no		Ascending icon. Overwrites default or globally set icon.
descIcon	no		Descending icon. Overwrites default or globally set icon.
onSort	no	null	Alternative function for value sorting.

Events

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

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:

Property	Required	Default	Description
name	yes		The object key name on which the values will be sorted.

Slots

Slot	Description
Default	Slot to pass link text.
Icon	Slot to use custom sort icons.