vue-sorted-table

!MIT

A basic sorted table for Vue.js

Installation

Install with NPM:

``bash
npm install --save vue-sorted-table
`

Import globally in app:

`javascript
import SortedTablePlugin from "vue-sorted-table";

Vue.use(SortedTablePlugin);
`

Or, using Vue:

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

Examples

$3

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


`

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


`

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:
`html
ID
`

The sorted data is made accessible as a scoped slot.
`html

`

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

{{ value.id }}
{{ value.name }}
{{ value.hits }}

`

![Edit vue-sorted-table - basic example](https://codesandbox.io/s/xp37xr4pwo?module=%2Fsrc%2FApp.vue)

$3

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

`javascript
Vue.use(SortedTablePlugin, {
ascIcon: 'arrow_drop_up',
descIcon: 'arrow_drop_down'
});
`

![Edit vue-sorted-table - advanced example](https://codesandbox.io/s/71v099zz56)

$3


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:
`bash
npm install --save lodash
`

Import lodash and register Vue prototype:
`javascript
import _ from "lodash";

Vue.prototype.$_ = _;
`

Add sort link using the nested key:
`html
Username
`

Extend v-for loop to render nested value:
`html

{{ value.id }}
{{ value.name }}
{{ value.hits }}
{{ value.user.name }}

`

![Edit vue-sorted-table - nested example](https://codesandbox.io/s/6nljqn2q8r)

$3


The SortedTable and SortLink components can be used without registering the plugin.
Import the components, e.g. as part of a singe file component:
`javascript
import { SortedTable, SortLink } from "vue-sorted-table";
`

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

Add sort icons as property of the SortedTable tag:
`html
:values="values"
ascIcon=" ▲"
descIcon=" ▼"
>


`

![Edit vue-sorted-table - component example](https://codesandbox.io/s/6139y2xo53?module=%2Fsrc%2FApp.vue)

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

$3

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

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

$3

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