5 Tables

At Desktop and Tablet inflections, it is recommended to show 25 rows of data along with the Toolbar. At the Mobile inflection, it is recommended to show 10 rows of data before pagination.

5.1

Col 1 Col 2 Col 3 Col 4 Col 5 Col 6
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
test data
<table class="table table-striped table-hover techne-table">
 <thead>
     <th></th>
     <th>Col 1</th>
     <th>Col 2</th>
     <th>Col 3</th>
     <th>Col 4</th>
     <th>Col 5</th>
     <th>Col 6</th>
  </tr>
 </thead>
 <tbody>
   <tr class="techne-table-xs-right techne-table-xs-left">
     <td class="techne-table-xs-left-slot">
         <div class="checkbox">
             <input type="checkbox" id="optionsCheck1" value="optionc1" >
             <label for="optionsCheck1"></label>
         </div>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot">
         <img src="http://api.adorable.io/avatars/50/burgundy.flemming@emailprovider.com.png" 
              class="img-responsive img-circle"/>
     </td>
   </tr>
   <tr class="techne-table-xs-left">
     <td class="techne-table-xs-left-slot">
         <div class="checkbox">
             <input type="checkbox" id="optionsCheck2" value="optionc1" >
             <label for="optionsCheck2"></label>
         </div>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-remove"></span>
         </button>
     </td>
   </tr>
   <tr class="active techne-table-xs-left">
     <td class="techne-table-xs-left-slot">
         <div class="checkbox">
             <input type="checkbox" id="optionsCheck3" value="optionc1" checked>
             <label for="optionsCheck3"></label>
         </div>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">Active row</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-remove"></span>
         </button>
     </td>
   </tr>
   <tr class="techne-table-xs-left">
     <td class="techne-table-xs-left-slot">
         <div class="checkbox">
             <input type="checkbox" id="optionsCheck4" value="optionc1" >
             <label for="optionsCheck4"></label>
         </div>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-remove"></span>
         </button>
     </td>
   </tr>
   <tr class="techne-table-xs-left">
     <td class="techne-table-xs-left-slot">
         <div class="checkbox">
             <input type="checkbox" id="optionsCheck5" value="optionc1" >
             <label for="optionsCheck5"></label>
         </div>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-remove"></span>
         </button>
     </td>
   </tr>
   <tr class="techne-table-xs-left techne-table-xs-right">
     <td class="techne-table-xs-left-slot">
         <img src="http://api.adorable.io/avatars/50/rodney.artichoke@hybris.com.png" 
             class="img-responsive img-circle"/>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-more"></span>
         </button>
     </td>
   </tr>
   <tr class="techne-table-xs-left techne-table-xs-right">
     <td class="techne-table-xs-left-slot">
         <img src="http://api.adorable.io/avatars/50/rodney.artichoke@hybris.com.png" 
              class="img-responsive img-circle"/>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-more"></span>
         </button>
     </td>
   </tr>
   <tr class="techne-table-xs-left techne-table-xs-right">
     <td class="techne-table-xs-left-slot">
         <img src="http://api.adorable.io/avatars/50/rodney.artichoke@hybris.com.png" 
              class="img-responsive img-circle"/>
     </td>
     <td>
         <div class="cellcontent">
             <a href="#">test data</a>
         </div>
     </td>
     <td data-th="Placed At" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Customer Email" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="# Of Items" >
         <div class="cellcontent">test data</div>
     </td>
     <td data-th="Order Total" >
         <div class="cellcontent">test data</div>
     </td>
     <td class="techne-table-xs-right-slot techne-table-action">
        <button class="btn btn-link">
             <span class="hyicon hyicon-more"></span>
         </button>
     </td>
   </tr>
 </tbody>
</table>