pixiedust dataframeTable.html in dir display/table/templates

dataframeTable.html

<style type="text/css" class="pd_save">
  .df-table-wrapper .panel-heading {
    border-radius: 0;
    padding: 0px;
  }
  .df-table-wrapper .panel-heading:hover {
    border-color: #008571;
  }
  .df-table-wrapper .panel-title a {
    background-color: #f9f9fb;
    color: #333333;
    display: block;
    outline: none;
    padding: 10px 15px;
    text-decoration: none;
  }
  .df-table-wrapper .panel-title a:hover {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
  }
  .df-table-wrapper {
    font-size: small;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: normal;
  }
  .df-table-search-count {
    display: inline-block;
    margin: 20px 0;
  }
  .df-table-container {
    max-height: 50vh;
    max-width: 100%;
    overflow-x: auto;
    position: relative;
  }
  .df-table-wrapper table {
    border: 0 none #ffffff;
    border-collapse: collapse;
    margin: 0;
    min-width: 100%;
    padding: 0;
    table-layout: fixed;
  }
  .df-table-wrapper tr.hidden {
    display: none;
  }
  .df-table-wrapper tr:nth-child(even) {
    background-color: #f9f9fb;
  }
  .df-table-wrapper tr.even {
    background-color: #f9f9fb;
  }
  .df-table-wrapper tr.odd {
    background-color: #ffffff;
  }
  .df-table-wrapper td + td {
    border-left: 1px solid #e0e0e0;
  }

  .df-table-wrapper thead,
  .fixed-header {
    color: #337ab7;
    font-family: monospace;
  }
  .df-table-wrapper tr,
  .fixed-row {
    border: 0 none #ffffff;
    margin: 0;
    padding: 0;
  }
  .df-table-wrapper th,
  .df-table-wrapper td,
  .fixed-cell {
    border: 0 none #ffffff;
    margin: 0;
    min-width: 50px;
    padding: 5px 20px 5px 10px;
    text-align: left;
    word-wrap: break-word;
  }
  .df-table-wrapper th {
    padding-bottom: 0;
    padding-top: 0;
  }
  .df-table-wrapper th div {
    max-height: 1px;
    visibility: hidden;
  }

  .df-schema-field {
    margin-left: 10px;
  }

  .fixed-header-container {
    overflow: hidden;
    position: relative;
  }
  .fixed-header {
    border-bottom: 2px solid #2e6da4;
    display: table;
    position: relative;
  }
  .fixed-row {
    display: table-row;
  }
  .fixed-cell {
    display: table-cell;
  }
</style>

<div class="df-table-wrapper df-table-wrapper-{{prefix}} panel-group pd_save">
  <!-- dataframe schema -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" style="margin: 0px;">
        <a data-toggle="collapse" href="#df-schema-{{prefix}}" data-parent="#df-table-wrapper-{{prefix}}">Schema</a>
      </h4>
    </div>
    <div id="df-schema-{{prefix}}" class="panel-collapse collapse">
      <div class="panel-body" style="font-family: monospace;">
        <div class="df-schema-type">
          <span>type: </span><span>{{entity.getTypeName()}}</span>
        </div>
        <div class="df-schema-fields">
          <div>field:</div>
          {% for field in entity.getFields() %}
            <div class="df-schema-field">{{field.jsonValue()}}</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  <!-- dataframe table -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" style="margin: 0px;">
        <a data-toggle="collapse" href="#df-table-{{prefix}}" data-parent="#df-table-wrapper-{{prefix}}">Table</a>
      </h4>
    </div>
    <div id="df-table-{{prefix}}" class="panel-collapse collapse in">
      <div class="panel-body">
        {% set rows = entity.take(100) %}
        <input type="text" class="df-table-search form-control input-sm" placeholder="Search table">
        <div>
          <span class="df-table-search-count">Showing {{rows|length}} of {{entity.count()}}</span>
        </div>
        <!-- fixed header for when dataframe table scrolls -->
        <div class="fixed-header-container">
          <div class="fixed-header">
            <div class="fixed-row">
              {% for field in entity.getFields() %}
              <div class="fixed-cell">{{field.name | decodeUTF8 }}</div>
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="df-table-container">
          <table class="df-table">
            <thead>
              <tr>
                {% for field in entity.getFields() %}
                <th><div>{{field.name | decodeUTF8 }}</div></th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in rows %}
              <tr>
                {% for field in entity.getFields() %}
                <td>{{row[field.name]}}</td>
                {% endfor %}
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script class="pd_save">
  $(function() {
    var tableWrapper = $('.df-table-wrapper-{{prefix}}');
    var fixedHeader = $('.fixed-header', tableWrapper);
    var tableContainer = $('.df-table-container', tableWrapper);
    var table = $('.df-table', tableContainer);
    var rows = $('tbody > tr', table);
    var total = {{entity.count()}};

    fixedHeader
      .css('width', table.width())
      .find('.fixed-cell')
      .each(function(i, e) {
        $(this).css('width', $('.df-table-wrapper-{{prefix}} th:nth-child(' + (i+1) + ')').css('width'));
      });

    tableContainer.scroll(function() {
      fixedHeader.css({ left: table.position().left });
    });

    $('.df-table-search', tableWrapper).keyup(function() {
      var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$';
      var reg = RegExp(val, 'i');
      var index = 0;
      
      rows.each(function(i, e) {
        if (!reg.test($(this).text().replace(/\s+/g, ' '))) {
          $(this).attr('class', 'hidden');
        }
        else {
          $(this).attr('class', (++index % 2 == 0 ? 'even' : 'odd'));
        }
      });

      $('.df-table-search-count', tableWrapper).html('Showing ' + index + ' of ' + total);
    });
  });
</script>