JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.kind({
    name: "ex.App",
    components: [
        {name: "list", kind: "DataRepeater", components: [
            {bindings: [
                {from: ".model.text", to: ".content"}
            ]}
        ]},
        {kind: "onyx.Button", content: "A-Z", ontap: "ascTapped"},
        {kind: "onyx.Button", content: "Z-A", ontap: "descTapped"}
    ],
    create: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            this.$.list.set("collection", new enyo.Collection({
                instanceAllRecords: true
            }));
            
            this.$.list.collection.add([
                {text: "First"},
                {text: "Second"},
                {text: "Third"},
                {text: "Fourth"}
            ]);
        };
    }),
    ascTapped: function() {
        var c = this.$.list.collection;
        c.records.sort(this.bindSafely(function(a, b) {
            var x = a.get("text");
            alert(x);
            var y = b.get("text");
            alert(y);
            return (x.localeCompare(y));
        }));
        
        c.reset(c.records);
    },
    descTapped: function() {
        var c = this.$.list.collection;
        c.records.sort(this.bindSafely(function(a, b) {
            var x = a.get("text");
            alert(x);
            var y = b.get("text");
            alert(y);
            return (y.localeCompare(x));
        }));
        
        c.reset(c.records);
    }
});

new ex.App().renderInto(document.body);