YUI datatable-sort not working

Question

Hello I'm parsing some data from my database into a table using aui-datatable plugin however I would like to add some basic sorting in my columns. Bellow you may see the function "renderProducts" which renders the data-table. Furthermore bellow is a sample column object that is being passed into the table renderer.

var API= (function(Y){

    var settings = {
        serviceURL : null
    };

    var getServiceAttribute = function( attribute ) {
        return '_openpimadmin_WAR_OpenTest_' + attribute;
    }

    var getServiceURL = function( service ) {

        return settings.serviceURL + '&p_p_resource_id=' + service;
    };

    var service = function( service, dataSet, handlers ){

        var serviceData = {};
        var serviceHandlers = {
                start   : function(){},
                success : function(){},
                failure : function(){},
                end     : function(){}
        };

        for (prop in dataSet) {
            serviceData[getServiceAttribute(prop)] = dataSet[prop];
        }

        for (prop in handlers) {
            if ( serviceHandlers.hasOwnProperty(prop) && typeof handlers[prop] === 'function') {
                serviceHandlers[prop] = handlers[prop];
            }
        }

        Y.io(
            getServiceURL( service ), 
            {
                method : 'POST',
                data : serviceData,
                on : {
                    start : function( transactionID ) {
                        serviceHandlers.start(transactionID);
                    },
                    success : function( transactionID, response ) {

                        var parsed = Y.JSON.parse(response.responseText);

                        if (parsed.success === true){
                            serviceHandlers.success( transactionID, parsed );
                        } else {
                            console.log('Service [' + service + '] error: ' + parsed.error);
                        }

                    },
                    failure : function( transactionID, response ) {
                        serviceHandlers.failure( transactionID, response );
                    },
                    end : function( transactionID ) {
                        serviceHandlers.end( transactionID );
                    }
                }
            }
        );

    }

    return {

        services : {

            getProducts : function( dataSet, handlers ){
                dataSet = dataSet || {};
                handlers = handlers || {};
                service( 'getProducts', dataSet, handlers );
            },

            getProductsTableAttributeHeaders : function( dataSet, handlers) {
                dataSet = dataSet || {};
                handlers = handlers || {};
                service( 'getProductsTableAttributeHeaders', dataSet, handlers );
            },

        },

        views : {

            renderProducts : function( el, columns, dataSet ) {

                Y.one(el).get('childNodes').remove();

                new Y.DataTable.Base({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);
            }

        },


        get : function( prop ) {
            return settings[prop];
        },

        set : function( options ) {
            settings = Y.merge( settings, options );
        }
    };

})( YUI().use('node', 'io', 'aui-datatable', 'datatable-sort', function(Y){return Y;}) );

Column object:

Object {key: "name", label: "Όνομα", allowHTML: true, emptyCellValue: "<em>(not set)</em>", sortable: true}

The issue I'm facing is that sorting is nowhere to be seen, columns dont seem interactive and the user is not able to sort them, although the table is being rendered fine.

Thank you in advance.

PS: I'm new to YUI().

Answer 1

It seems this was the problem:

new Y.DataTable.Base({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);

Should have been like this:

new Y.DataTable({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);

Answer 2

You need to make sure that sortable: true set for column that need sorting.

Here is a real world example with sorting feature