JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<!DOCTYPE html>
<html ng-app="sgc">
    <head>
    <link href="http://bootswatch.com/amelia/bootstrap.min.css" rel="stylesheet">
    <link href="http://bootswatch.com/default/bootstrap-responsive.min.css"
    rel="stylesheet">
    <link href="http://bootswatch.com/css/bootswatch.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    </head>
    <body>

    <section id="tables" ng-controller="tableController">
  
        <div class="page-header">
             <h1 class="pull-left span2">Tables</h1>
            <div class="span2 btn-group open pull-left">
            <button class="btn dropdown-toggle" ng-click="down=!down">
                Campos VisĂ­veis <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" ng-show="down">
                <li ng-repeat="head in headList" ng-click="head.show=!head.show">
                    <a><input type="checkbox" ng-checked="head.show">{{head.label}}</a>
                </li>
             </ul>
             </div>
        </div>
        <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th ng-repeat="head in headList" ng-click="changeSorting(head.col)" ng-class="selectedCls(head.col)" ng-show="head.show">{{head.label}}</th>
          </tr>
        </thead>
        <tbody>
         <tr ng-repeat="tr in bodyList | orderBy:sort.column:sort.descending">
            <td ng-show="headList[$index].show" ng-repeat="td in tr">{{td}}</td>
          </tr>
     </tbody>
     </table>
    </section>
  </body>
</html>

CSS

td { padding: 0.2em 1em; }
th { text-align: center; }
thead {
    border-bottom: 2px solid black; 
    cursor: pointer;  
}

/* http://www.greywyvern.com/code/php/binary2base64 */

.sort-true {
     background:no-repeat 95% center...

JavaScript

var $sgc = angular.module('sgc', []);

function tableController($scope) {
    
    $scope.down = false;

    $scope.headList = [
        {label:"#", col:'id', show:true}, 
        {label:"First Name", col:'first', show:true}, 
        {label:"Last Name", col:'last', show:true},
        {label:"Username", col:'user', show:true}, 
        {label:"Senha", col:'senha', show:true}
        ];
    
    $scope.bodyList = [
                 {id:"1", first:"A", last:"D", user:"@mdo", senha:"1A3"},
                 {id:"2", first:"B", last:"C", user:"@mdo", senha:"2B3"},
                 {id:"3", first:"C", last:"B", user:"@mdo", senha:"3C3"},
                 {id:"4", first:"D", last:"A", user:"@mdo", senha:"4D3"}
              ];
      $scope.sort = {
        column: 'first',
        descending: false
    };

    $scope.selectedCls = function(column) {
        return column == $scope.sort.column && 'sort-' + $scope.sort.descending;
    };
    
    $scope.changeSorting = function(column) {
        if ($scope.sort.column == column) {
            $scope.sort.descending = !$scope.sort.descending;
        } else {
            $scope.sort.column = column;
            $scope.sort.descending = false;
        }
    };
    
};