Skip to content

Documentation - Sort directive

Create a sort directive to conveniently interact with the order and sort capabilities of your smart table instance

import {smartTable, sortDirective as sort} from 'smart-table-core';

const data = [
    {surname: 'Deubaze', name: 'Raymond'},
    {surname: 'Foo', name: 'Bar'},
    {surname: 'Doe', name: 'John'}
];

const smartCollection = smartTable({data});

smartCollection.onDisplayChange((items) => {
    console.log(items.map(item => item.value));
});

//create a directive bound to surname
const directive = sort({table: smartCollection, pointer: 'surname'});

//sort by surname column (ascending direction first)
directive.toggle();
See in CodePen.

Factory

Arguments

The factory takes as argument an options object with the following properties

table
A reference to a smart table instance
pointer
A pointer string which refers to a property of your items which you will want to order by
cycle
a boolean which will tell the directive whether is has to go back to the initial state in the toggle cycle. It defaults to false

Instance API

.toggle

Will switch from one sort state to another in the toggle cycle.

First time it is called, it will order with the ascending direction, second time with the descending direction. The third time it depends whether you have configured the directive to cycle or not. If yes, it will go back to the initial state (not sorted), if not it will order again with the ascending direction.

.onSortToggle

It will register an event listener to the TOGGLE_SORT event (triggered whenever the sort part of the table state changes)

Arguments

It takes as argument a function whose unique argument will be the current sort part of the table state.