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( => item.value));

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

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



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

A reference to a smart table instance
A pointer string which refers to a property of your items which you will want to order by
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


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.


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


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