JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<table class="table table-hover admin-table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Is Activated</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: accounts">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: IsActivated ? 'Yes' : 'No'"></td>            
        </tr>
    </tbody>
</table>
<button data-bind="click: sortByActivatedAndLastName">Sort</button>

JavaScript

$(function() {
    var model = {
        accounts: [{
            FirstName: 'Max',
            LastName: 'Stone',
            IsActivated: false
        },
        {
            FirstName: 'Max',
            LastName: 'Jones',
            IsActivated: true
        },
        {
            FirstName: 'David',
            LastName: 'Jones',
            IsActivated: false
        }]
    };
    
    ko.applyBindings(new ViewModel(model));
});

var ViewModel = function (model) {
    var self = this;
    
    self.accounts = ko.observableArray(model.accounts);
    
    self.sortByActivatedAndLastName = function() {
        self.accounts.sort(function (l, r) { return l.IsActivated === r.IsActivated 
        ? l.LastName > r.LastName ? 1 : -1
        : l.IsActivated > r.IsActivated ? 1 : -1 });
    };
};