JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<div ng-app>
    <div ng-controller="TableCtrl">
        <ul class="unstyled">
            <li ng-repeat="stock in stocks">
                <input type="checkbox" ng-model="stock.checked" ng-click="click(stock)">{{stock.id}}</li>
        </ul>
        <hr>
        <table>
            <tr>
                <th>Stock</th>
                <th ng-repeat="key in keys">{{labels[key]}}</th>
            </tr>
            <tr ng-repeat="(stock, data) in tickers">
                <td>{{stock}}</td>
                <td ng-repeat="key in keys">{{data[key]}}</td>
            </tr>
        </table>
        <hr>
        <table>
            <tr>
                <th>Stock</th>
                <th ng-repeat="(stock, data) in tickers">{{stock}}</th>
            </tr>
            <tr ng-repeat="key in keys">
                <td>{{labels[key]}}</td>
                <td ng-repeat="(stock,data) in tickers">{{data[key]}}</td>
            </tr>
        </table>
    </div>
</div>

CSS

table {
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
    text-align: right;
}
ul {
    list-style-type: none;
}

JavaScript

function TableCtrl($scope) {
    $scope.click = function (stock) {
        if (stock.checked) {
            $scope.tickers[stock.id] = $scope.data[stock.id];
        } else {
            delete $scope.tickers[stock.id];
        }
    };

    $scope.tickers = {};

    $scope.keys = ["open", "high", "low", "last_trade", "volume", "52_week_high", "market_cap"];
    $scope.labels = {
        open: "Open",
        high: "High",
        low: "Low",
        last_trade: "Last",
        market_cap: "Market Cap",
        pe_ratio: "PE",
        eps: "EPS",
        volume: "Volume",
            "52_week_high": "52 Week High",
        dividend: "Dividend",
        eps_est_annual: "EPS Annual Estimate"
    };

    $scope.stocks = [{
        id: "GOOG",
        checked: false
    }, {
        id: "AA",
        checked: false
    }, {
        id: "INTC",
        checked: false
    }, {
        id: "MSFT",
        checked: false
    }];

    $scope.data = {
        AA: {
            "open": "8.91",
                "high": "8.97",
                "low": "8.80",
                "last_trade": "8.83",
                "market_cap": "9,421,000,000",
                "pe_ratio": "130.14",
                "eps": "0.07",
                "volume": "10,775,167",
                "52_week_high": "12.93",
                "dividend": "0.12",
                "eps_est_annual": "0.29",
                "eps_est_nextquarter": "0.08",
                "last_trade_date": "2012-08-13 00:00:00"
        },
        GOOG: {
            "open": "646.98",
                "high": "660.15",
                "low": "646.68",
                "last_trade": "660.01",
                "market_cap": "215,800,000,000",
                "pe_ratio": "19.03",
                "eps": "33.73",
                "volume": "3,268,073",
                "52_week_high": "670.25",
                "dividend": "0.00",
                "eps_est_annual": "42.53",
                "eps_est_nextquarter": "11.77",
               ...