CodePen Embed - Bootstrap Server Monitor Admin Panel

<body class="skin-blue">
  <div class="wrapper">

      <header class="main-header">
          <a href="http://crudkit.com/demo/" class="logo">Server Monitor</a>
          <!-- Header Navbar: style can be found in header.less -->
          <nav class="navbar navbar-static-top" role="navigation">
              <!-- Sidebar toggle button-->
              <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </a>
              <div class="navbar-custom-menu">
              </div>
          </nav>
      </header>
      <aside class="main-sidebar">
          <section class="sidebar">
              <ul class="sidebar-menu">
                <li role="presentation"><a href="http://crudkit.com/demo/?page=sqlite1&amp;action=view_page"><i class="fa fa-tachometer"></i> Dashboard</a></li>
                  <li class="header">FOLDERS</li>
                                      <li role="presentation" class="active"><a href="http://crudkit.com/demo/?page=sqlite2&amp;action=view_page"><i class="fa fa-server"></i>&nbsp;023APP01</a></li>
                                      <li role="presentation"><a href="http://crudkit.com/demo/?page=sqlite1&amp;action=view_page">
                                        <i class="fa fa-server"></i>
                                        <span class="server-id">023APP22</span><br>
                                        <span class="server-tag">Oracle Staging Server</span></a></li>
                                                  <li class="header">ACCOUNT</li>
                      <li role="presentation"><a href="http://crudkit.com/demo/?__ckLogout=1"><i class="fa fa-sign-out"></i>Log out</a></li>
                              </ul>
          </section>
      </aside>

      <div class="content-wrapper" style="min-height: 279px;">
              <section class="content-header">
    <div class="row">
      <div class="col-md-8">
        <h3 style="margin-top: 5px"><i class="fa fa-folder"></i>&nbsp;&nbsp;023APP01 Visitor Activity
        </h3>
      </div>
      <div class="col-md-4">
        <div class="pull-right">
        <a href="http://crudkit.com/demo/?page=sqlite2&amp;action=page_function&amp;func=new_item" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Upload New</a>
        </div>
      </div>
    </div>
  </section>
    <div class="col-md-12">
      <div id="alertTarget">
      </div>
    </div>
  <section class="content">
  <div class="row">
      <div class="col-md-12">
        <div class="box box-primary" style="padding-top:15px">
          <div class="box-body">

      <div ng-controller="SummaryTableController" class="ng-scope">
      <div class="row">
          <div class="col-md-9">
              <div class="input-group col-md-5">
              <input type="text" class="form-control ng-pristine ng-untouched ng-valid" placeholder="" ng-model="searchTerm" ng-keyup="$event.keyCode == 13 ? filterColumns () : null">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" ng-click="filterColumns()" ng-disabled="searchTerm == ''" disabled="disabled">Search</button>
              </span>
              </div>
          </div><!-- /input-group -->
          <div class="col-md-3">
              <div class="pull-right">
                  <p></p>
              </div>
          </div>
      </div>
      <div class="row ng-hide" ng-show="selectedCount > 0 &amp;&amp; isWritable ()">
          <div class="col-md-12 ng-binding">
              With 0 Rows: <confirm-button label="Delete" activate="deleteRows ()" ck-class="btn-danger">
          </confirm-button></div>
      </div>
      <div cg-busy="loadingPromise" style="position: relative;">
        <table class="table">
          <thead>
          <tr>
                  <th style="width: 30px">
                      <input type="checkbox" ng-change="selectAll ()" ng-model="allSelectedFlag" class="table-checkbox ng-pristine ng-untouched ng-valid">
                  </th>
            <!-- ngRepeat: col in columns --><th class="lib-name">
              IP Address
            </th>
            <th class="lib-tag">
              Country
            </th>
            <th class="lib-add">
              View Details
            </th>
          </tr>
          </thead>
          <tbody>
            <!-- ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=1&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=1&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Brazil
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
              <td>
                <a href="#" class="btn btn-success"><i class="fa fa-plus-circle"></i> View</a>               
              </td>
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=8&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=8&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Belgium
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=9&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=9&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Denmark
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=10&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=10&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Brazil
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=11&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=11&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Brazil
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=12&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=12&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Brazil
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=13&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=13&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Brazil
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=14&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=14&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Canada
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=15&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=15&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  Canada
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=16&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=16&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=17&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=17&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=18&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=18&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=19&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=19&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=20&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=20&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=21&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=21&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=22&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=22&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=23&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=23&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=24&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=24&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=25&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=25&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows --><tr ng-repeat="row in rows" ng-class="{'info': row.selectedFlag}" class="ng-scope">
                      <td>
                          <input ng-model="row.selectedFlag" type="checkbox" class="table-checkbox ng-pristine ng-untouched ng-valid" ng-change="updateSelectedCount ()">
                      </td>
              <!-- ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink --><div ng-switch-when="primaryLink" class="ng-scope">
                                  <a ng-href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=26&amp;page=sqlite2" class="ng-binding" href="http://crudkit.com/demo/?action=page_function&amp;func=view_item&amp;item_id=26&amp;page=sqlite2">192.168.0.1</a>
                              </div><!-- end ngSwitchWhen: -->
                          </div>
              </td><!-- end ngRepeat: col in columns --><td ng-repeat="col in columns" class="ng-scope">
                          <div ng-switch="" on="col.renderType">
                              <!-- ngSwitchWhen: string --><div ng-switch-when="string" class="ng-binding ng-scope">
                                  USA
                              </div><!-- end ngSwitchWhen: -->
                              <!-- ngSwitchWhen: number -->
                              <!-- ngSwitchWhen: datetime -->
                              <!-- ngSwitchWhen: primaryLink -->
                          </div>
              </td><!-- end ngRepeat: col in columns -->
            </tr><!-- end ngRepeat: row in rows -->
          </tbody>
        </table>
          <ul class="pagination ng-isolate-scope ng-valid" total-items="rowCount" ng-model="currentPage" items-per-page="10" max-size="10" rotate="false" boundary-links="false" ng-change="pageChanged()">
    <!-- ngIf: boundaryLinks -->
    <!-- ngIf: directionLinks --><li ng-if="directionLinks" ng-class="{disabled: noPrevious()}" class="ng-scope disabled"><a href="" ng-click="selectPage(page - 1, $event)" class="ng-binding">Previous</a></li><!-- end ngIf: directionLinks -->
    <!-- ngRepeat: page in pages track by $index --><li ng-repeat="page in pages track by $index" ng-class="{active: page.active}" class="ng-scope active"><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">1</a></li><!-- end ngRepeat: page in pages track by $index --><li ng-repeat="page in pages track by $index" ng-class="{active: page.active}" class="ng-scope"><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">2</a></li><!-- end ngRepeat: page in pages track by $index --><li ng-repeat="page in pages track by $index" ng-class="{active: page.active}" class="ng-scope"><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">3</a></li><!-- end ngRepeat: page in pages track by $index --><li ng-repeat="page in pages track by $index" ng-class="{active: page.active}" class="ng-scope"><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">4</a></li><!-- end ngRepeat: page in pages track by $index --><li ng-repeat="page in pages track by $index" ng-class="{active: page.active}" class="ng-scope"><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">5</a></li><!-- end ngRepeat: page in pages track by $index --><li ng-repeat="page in pages track by $index" ng-class="{active: page.active}" class="ng-scope"><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">6</a></li><!-- end ngRepeat: page in pages track by $index -->
    <!-- ngIf: directionLinks --><li ng-if="directionLinks" ng-class="{disabled: noNext()}" class="ng-scope"><a href="" ng-click="selectPage(page + 1, $event)" class="ng-binding">Next</a></li><!-- end ngIf: directionLinks -->
    <!-- ngIf: boundaryLinks -->
  </ul>


      <div class="cg-busy cg-busy-backdrop cg-busy-backdrop-animation ng-scope ng-hide" ng-show="$cgBusyIsActive()"></div><div class="cg-busy cg-busy-animation ng-scope ng-hide" ng-show="$cgBusyIsActive()"><div class="cg-busy-default-wrapper" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;">

     <div class="cg-busy-default-sign">

        <div class="cg-busy-default-spinner">
           <div class="bar1"></div>
           <div class="bar2"></div>
           <div class="bar3"></div>
           <div class="bar4"></div>
           <div class="bar5"></div>
           <div class="bar6"></div>
           <div class="bar7"></div>
           <div class="bar8"></div>
           <div class="bar9"></div>
           <div class="bar10"></div>
           <div class="bar11"></div>
           <div class="bar12"></div>
        </div>

     </div>

  </div></div></div>
      </div>
      <script type="text/javascript">
          window.pageId = "sqlite2";
      </script>
          </div>
        </div> 
      </div>
  </div>
  </section>
      <script type="text/javascript">
        window.ckValues = {"pageId":"sqlite2","writable":true,"rowsPerPage":20,"flashbag":[]};
      </script>
      </div>
      <footer class="main-footer">
          <div class="pull-right hidden-xs">
          <b>Version</b> 0.3
        </div>
        <strong>Powered by <a href="http://crudkit.com">CrudKit</a>.</strong>
    </footer>
  </div>
</body>

body{
  font-family: "Lato", 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  font-weight: 400;
}
a {
    color: #337ab7;
    text-decoration: none;
}
.wrapper {
  min-height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
}
.main-header {
  position: relative;
  max-height: 100px;
  z-index: 1030;
  display: block;
  box-sizing:border-box;
}
.main-header a{
  text-decoration: none;
}
.skin-blue .main-header .logo {
    background-color: #367fa9;
    color: #ffffff;
    border-bottom: 0 solid transparent;
}
.main-header .logo {
    transition: width .3s ease-in-out;
    display: block;
    float: left;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    width: 230px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0 15px;
    font-weight: 300;
    overflow: hidden;
}
.skin-blue .main-header .navbar {
    background-color: #3c8dbc;
}
.main-header>.navbar {
    transition: margin-left .3s ease-in-out;
    margin-bottom: 0;
    margin-left: 230px;
    border: none;
    min-height: 50px;
    border-radius: 0;
}
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: #222d32;
}
.main-sidebar, .left-side {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    min-height: 100%;
    width: 230px;
    z-index: 810;
}
.sidebar {
    padding-bottom: 10px;
}
.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu>li.header {
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.skin-blue .sidebar-menu > li.header {
    color: #4b646f;
    background: #1a2226;
}
.sidebar-form, .sidebar-menu>li.header {
    overflow: hidden;
    text-overflow: clip;
}
.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu>li.header {
    white-space: nowrap;
}
.sidebar-menu>li {
    position: relative;
    margin: 0;
    padding:0;
}
.sidebar-menu li.header {
    padding: 10px 25px 10px 15px;
    font-size: 12px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
  box-sizing: border-box;
}
.content-wrapper, .right-side {
    min-height: 100%;
    background-color: #ecf0f5;
    z-index: 800;
    transition: transform .3s ease-in-out,margin .3s ease-in-out;
    margin-left: 230px;
}
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
    color: #ffffff;
    background: #1e282c;
    border-left-color: #3c8dbc;
    text-decoration: none;
}
.skin-blue .sidebar-menu > li > a {
    border-left: 3px solid transparent;
}
.sidebar-menu li>a {
    position: relative;
}
.sidebar-menu>li>a {
    padding: 12px 5px 12px 15px;
    display: block;
}
.skin-blue .sidebar a {
    color: #b8c7ce;
}
.sidebar-menu>li>a>.fa, .sidebar-menu>li>a>.glyphicon, .sidebar-menu>li>a>.ion {
    width: 20px;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.server-tag{
  margin-left:22px;
  font-size:13px;
  font-weight:200;
  opacity:.55;
}
.skin-blue .content-header {
    background: transparent;
}
.content-header {
    position: relative;
    padding: 15px 15px 0 15px;
}
.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.box.box-primary {
    border-top-color: #3c8dbc;
    padding-top: 15px;
}
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}
.lib-name{
  width:20%;
}
.lib-tag{
  
}
.lib-add{
  width:15%;
}

This Pen is owned by Adam Joiner on CodePen.

See more by @adamcjoiner on CodePen

External CSS

External JavaScript