JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container" ng-a>
    <div class="starter-template">
        <legend>Rechercher une Row</legend>

        <div class="control-group">
            <label class="control-label">Par Key</label>
            <div class="controls">
                <input type="search" placeholder="CASSANDRA_KEY_A" class="input-xlarge" ng-model="filterText">
            </div>
        </div>
    </div>
    <br/>
    <div class="view-container">
        <div class="col-lg-12">
            <table class="table" id="table">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>Extension</th>
                        <th>Taille</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in rows | filter:filterText | limitTo : 10">
                        <td class="key" ><a>{{row.name}}</a></td>
                        <td>{{row.extension}}</td>
                        <td>{{row.size}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

CSS

h1 {
  animation: blink 3.5s ease-in-out infinite;
}
@keyframes blink {
  0% {
    color: #d35400;
  }
  50% {
    color: #ffc6a0;
  }
  100% {
    color: #d35400;
  }
}
h2 {
  color: #ff0000;
}
button {
  margin-right: 20px;
}
h3 {
  margin-left: -5%;
}
fieldset.login_form {
  margin-left: 40%;
}

JavaScript

angular.module('cass.services', [])
    .constant('_', window._)
    .factory('back', function () {

        var LoginUrl = {
            "cdr258": {},
        }

        var columnFamilyData = {


            "DocInfo": {
                "4c58abf5": {
                    "name": "coucou",
                    "extension": "pdf",
                    "size": 8751,
                    "type": "facture",
                    "repository": "archive"
                },
                "8cd524d7a45de": {
                    "name": "gerard",
                    "extension": "xml",
                    "size": 48734,
                    "type": "compta",
                },
                "5486d684fe54a": {
                    "name": "splendide",
                    "extension": "tiff",
                    "type": "photos",
                    "METADATA_A": "jambon"
                }
            },
            "Base": {
                "BASE_A": {
                    "name": "BASE_A",
                    "description": "That base is truly outrageous, they are truly, truly outrageous",
                    "baseMetadata_1": "METADATA_A",
                    "baseMetadata_2": "METADATA_B",
                    "baseMetadata_3": "METADATA_C"
                },
                "BASE_OPL": {
                    "name": "BASE_OPL",
                    "description": "[CLASSIFIED]",
                    "baseMetadata_1": "MEATDATA_BEEF",
                    "baseMetadata_4": "MEATDATA_PORK"
                },
                "BASE_PL": {
                    "name": "BASE_PL",
                    "description": "[CLASSIFIED]",
                    "baseMetadata_1": "MEATDATA_BEEF",
                    "baseMetadata_4": "MEATDATA_PORK"
                },
                "BASE_OPL3": {
                    "name": "BASE_OPL3",
                    "description": "[CLASSIFIED]",
                    "baseMetadata_1": "MEATDATA_BEEF",
                    "baseMetadata_4": "MEATDATA_PORK"
  ...