ko.bindingHandlers["sort"] = {
    init: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => {
        var ascending = false;
        element.onclick = () => {
            var value = valueAccessor();
            var array = value.arrayName;
            var key = value.key;
            ascending = !ascending;

            array.sort(function (first, last) {
                var left = first;
                var right = last;
                if (!ascending) {
                    left = last;
                    right = first;
                }
                var keys = key.split('.');
                for (var i in keys) {
                    var keyName = keys[i];
                    var parentIndex = keyName.indexOf('()');
                    if (parentIndex > 0) {
                        keyName = keyName.substring(0, parentIndex);
                        left = left[keyName]();
                        right = right[keyName]();
                    }
                    else {
                        left = left[keyName];
                        right = right[keyName];
                    }
                 }
                 return left == right ? 0 : left < right ? -1 : 1;
                });
            };
        }
    };
}

<table class="table" id="largeTable">
<thead>
    <tr>
        <th data-bind="sort: { arrayName: product, key: 'name' }">Name</th>
        <th data-bind="sort: { arrayName: product, key: 'type' }">Type</th>
        <th data-bind="sort: { arrayName: product, key: 'reviewsNumber()' }">Reviews</th>
        <th data-bind="sort: { arrayName: product, key: 'ratingNumber()' }">Ratings</th>
        <th data-bind="sort: { arrayName: product, key: 'priceNumber()' }">Price</th>
        <th data-bind="sort: { arrayName: product, key: 'date' }">Date</th>
        <th data-bind="sort: { arrayName: product, key: 'status' }">Status</th>
    </tr>
</thead>
<tbody>
    <!-- ko foreach: productOnPage -->
    <tr>
        <td><div data-bind="text: name"></div></td>
        <td><div data-bind="text: type"></div></td>
        <td><div data-bind="text: reviews"></div></td>
        <td><div data-bind="text: rating"></div></td>
        <td><div data-bind="text: price"></div></td>
        <td><div data-bind="text: date"></div></td>
        <td><div data-bind="text: status"></div></td>
    </tr>
    <!-- /ko -->
</tbody>