Sortable Tables with Knockout

Recently I had to build a few web pages with sortable tables. Where you can click on a column title and it will order records. Knockout was already used on the project to render pages.

I went to google to see if there is already a solution to order tables generated by knockout. All I could find is bridges to massive JS libraries, which control rendering of entire table, dictating me how to structure my data. Such solution didn’t work for me, because I wanted to have a full control over table rows rendering, as my tables had custom controls and widgets bound to my view model.

This is how I decided to write a small knockout plugin which will do just one thing: sort collections in a view model, leaving the rest to knockout.

Get code on a github

Usage example here

Finally my first small contribution to the open source world, yey!

  • Thomas Ellingsen

    Hey! After several days of testing multiple of what you so aptly call massive JS libs, none of which actually worked 100%, I stumbled over this. Thank you very much for this binding, it saved my day!

  • Mark Morrison

    How do I configure this with Require JS? I know it is dependent on Knockout but my shim is not working and I get error: ko is undefine.

  • http://www.apuchkov.com Alexander Puchkov

    You will need to wrap this binding code into “define” function call. See example here http://stackoverflow.com/a/17575924/1689049

  • Mark Morrison

    Hi there! I am so excited to use this: Now I get this error:
    Uncaught TypeError: viewModel[collection].sort is not a function.

    What I did was wrapped the js file (code) for knockout.bindings.orderable into the define:

    define([‘knockout’], function (ko) {
    ko.bindingHandlers.orderable = {

    knockout.bindings.orderable code here.

  • http://www.apuchkov.com Alexander Puchkov

    Hi, it seems working fine for me. See working sample here: http://jsfiddle.net/apuchkov/qgqp5sxt/2/

  • The Dan

    Seriously awesome. Thanks for contributing this plugin to the community!

  • Ajit Abraham

    +1 to the comment made by Thomas.
    For the past several days, I was searching for an knockout routine that would sort my bootstrap table whose observable table data was being populated by dotnetify.net project.
    I made a few changes. Instead of the binder deciding the type, I pass the type to the binder. (string or number)

    Thanks Alexander for this wonderful contribution