JSFiddle - React, Tailwind, and code Playground

by Darksbane

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div style="overflow:hidden; display:block;">
    <table id="activeQuotes" width="100%" data-bind="with: quotes">
        <thead>
            <tr>
                <th id="name" data-bind='click: sortQuotes.bind("name")'>Name</th>
                <th id="espm" data-bind='click: sortQuotes.bind("espm")'>Estimated Premium</th>
                <th id="date" data-bind='click: sortQuotes.bind("date")'>Date Quoted</th>
                <th id="agency">Agency</th>
                <th id="policytype">Policy Type</th>
                <th />
            </tr>
        </thead>
        <tbody data-bind="foreach: quotes">
            <tr>
                <td data-bind="text: name,click: goToQuote">a</td>
                <td class="cnt" data-bind="text: espm"></td>
                <td class="cnt" data-bind="text: date"></td>
                <td class="cnt" data-bind="text: agency"></td>
                <td class="cnt" data-bind="text: policytype"></td>
                <td><a href='#' class="delete" data-bind='click: removeQuote' style="width:26px;height:26px;">Delete</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- Chosen item -->
<div class="viewMail" style="overflow:hidden; display:block;" data-bind="with: chosenQuoteData">
    <p class="message" data-bind="text: id" />
</div>

JavaScript

$(function () {
    // Document is ready
    ko.applyBindings(QuoteViewModel());
    $("a.delete").button({
        icons: {
            primary: "ui-icon-trash"
        },
        text: false
    });
});

//Overall viemodel for the screen along with initial state
function QuoteViewModel() {
    var self = this;

    self.sortColumn = ko.observable("id");
    self.isSortAsc = ko.observable(true);
    self.chosenQuoteData = ko.observable();


    self.quotes = ko.observableArray([{
        id: 1,
        name: "Steve",
        espm: 400,
        date: "3/03/2013",
        agency: "HICI",
        policytype: "PP"
    }, {
        id: 2,
        name: "Drew",
        espm: 555.00,
        date: "3/31/2013",
        agency: "DALL",
        policytype: "P2"
    }, {
        id: 4,
        name: "Shane",
        espm: 655.00,
        date: "3/23/2013",
        agency: "ASDF",
        policytype: "P2"
    }]);

    self.goToQuote = function (selectedQuote) {
        self.chosenQuoteData(selectedQuote);
        self.quotes(null);
    }

    self.removeQuote = function (quote) {
        self.quotes.remove(quote);
    };

    self.sortQuotes = function () {
        property = this;
        currentSort = self.sortColumn();
        if (currentSort.toString() == property.toString()) {
            //alert ("already")
            self.isSortAsc(!self.isSortAsc());
        } else {
            self.isSortAsc(true);
        }
        self.sortColumn(property);
        self.quotes.sort(function (a, b) {
            //return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1;
            if (self.isSortAsc()) {
                return (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
            } else {
                return (a[property] < b[property]) ? 1 : (a[property] > b[property]) ? -1 : 0;
            }
        });
    };

}

function formatCurrency(value) {

    return "$" + value.toFixed(2);
}