bootgrid

listing google products (using bootgrid library)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
  <table id="grid-basic" class="table table-hover table-striped">
    <thead>
      <tr>
        <th class="grid-buttons" data-column-id="commands" data-formatter="commands" data-sortable="false"></th>
        <th data-column-id="id" data-btn-header="1">Identifier</th>
        <th data-column-id="title" data-btn-header="0">Title</th>
        <th data-column-id="type" data-btn-header="0">Request Type</th>
        <th data-column-id="stage" data-btn-header="0">Stage</th>
        <th data-column-id="date" data-order="asc" data-btn-header="0">Requested Date</th>
      </tr>
    </thead>
    <tbody>
      <!-- data via javascript -->
    </tbody>
  </table>

</div>

CSS

.table {
  font-size: .8em;
}

.table td {
  line-height: 3em !important;
}

.padm-exclamation {
  display: none;
}

.padm-prj-attention .padm-exclamation {
  margin: 0 1em;
  font-size: 2em;
  display: inline-block;
}

JavaScript

var needsAttention = [];
populateTable();
styleTable();

function populateTable() {

  // exercise: externalize this
  var products = [{
    identifier: "HOU-CCM3-CR-123456",
    title: "Move CCA6 Employees to CCM03",
    requestType: "CREWS Initiated",
    stage: "New",
    equestDate: "2/2/2017 10:45 AM CST",
    attention: 0
  }, {
    identifier: "PAL-B01-IT-123457",
    title: "Another project title",
    requestType: "CREWS Initiated",
    stage: "Estimation",
    requestDate: "1/25/2017 3:45 PM CST",
    attention: 1,
    attentiondays: 2
  }, {
    identifier: "HOU-CCM3-CR-123456",
    title: "Move CCA6 Employees to CCM03",
    requestType: "CREWS Initiated",
    stage: "In Planning",
    requestDate: "1/2/2017 10:00 AM CST",
    attention: 0
  }, {
    identifier: "HOU-CCM3-CR-123457",
    title: "Move CCA4 Employees to CCM03",
    requestType: "CREWS Initiated",
    stage: "Funding",
    requestDate: "12/12/2016 10:00 AM CST",
    attention: 0
  }, {
    identifier: "HOU-CCM3-CR-123458",
    title: "Move CCA5 Employees to CCM03",
    requestType: "CREWS Initiated",
    stage: "Funding",
    requestDate: "12/15/2016 1:25 AM CST",
    attention: 1,
    attentiondays: 10
  }];

  var html = '';
  $.each(products, function(index, value) {
    if (value.attention == 1) {
      needsAttention.push({
        rowIdx: index,
        days: value.attentiondays
      });
    }
    html += "<tr>";
    html += "<td></td>";
    html += "<td>" + value.identifier + "</td>";
    html += "<td>" + value.title + "</td>";
    html += "<td>" + value.requestType + "</td>";
    html += "<td>" + value.stage + "</td>";
    html += "<td>" + value.requestDate + "</td>";
    html += "</tr>";

  });
  $('tbody').append(html);

}

function styleTable() {

  var bg = $("#grid-basic").bootgrid({

    /* booleans */

    caseSensitive: false,
    sorting: true,
    multiSort: false,
    columnSelection: true,
    selection: false,
    multiSelect: false,
    rowSelect: true,
   ...