Table

Table is the most common way to present tabular data and which users are most familiar with. The tables are responsive and displayed as cards. See a basic example below:

Purchases
Order
BuyerPaymentAmount
2194
Carla Leachpaypal$59.85
2442
Kameron Burkscredit card$32.50
4640
Jake Reesepaypal$105.60
9390
Bryce Sellerscash$12.25

For the table to work properly follow this hierarchy .card > .table-responsive > table.

Source code
<div class="card">
  <div class="card-header">
    Purchases
  </div>
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>
            <div class="d-flex">
              <label class="checkbox mr-2">
                <input type="checkbox"/>
                <span class="check-mark"></span>
              </label>
              Order
            </div>
          </th>
          <th>Buyer</th>
          <th>Payment</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex">
              <label class="checkbox mr-2">
                <input type="checkbox"/>
                <span class="check-mark"></span>
              </label>
              2194
            </div>
          </td>
          <td>Carla Leach</td>
          <td>
            <span class="badge badge-primary">paypal</span>
          </td>
          <td>$59.85</td>
        </tr>
        <tr>
          <td>
            <div class="d-flex">
              <label class="checkbox mr-2">
                <input type="checkbox"/>
                <span class="check-mark"></span>
              </label>
              2442
            </div>
          </td>
          <td>Kameron Burks</td>
          <td>
            <span class="badge badge-info">credit card</span>
          </td>
          <td>$32.50</td>
        </tr>
        <tr>
        <td>
          <div class="d-flex">
              <label class="checkbox mr-2">
                <input type="checkbox"/>
                <span class="check-mark"></span>
              </label>
              4640
            </div>
          </td>
          <td>Jake Reese</td>
          <td>
            <span class="badge badge-primary">paypal</span>
          </td>
          <td>$105.60</td>
        </tr>
        <tr>
        <td>
          <div class="d-flex">
              <label class="checkbox mr-2">
                <input type="checkbox"/>
                <span class="check-mark"></span>
              </label>
              9390
            </div>
          </td>
          <td>Bryce Sellers</td>
          <td>
            <span class="badge badge-success">cash</span>
          </td>
          <td>$12.25</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="card-footer">
    <ul class="pagination justify-content-center"></ul>
  </div>
</div>

Paging

The theme has a simple pagination plugin with links to first, last, previous and next pages.

To update the page links you need to call the function pagination() passing the options as parameter. The following table shows the option parameters.

Options
OptionTypeDefaultDescription
currentnumber1Selected page.
countnumber1Number of records in the database.
lengthnumber10Number of records per page.

The pagination plugin assumes that the element is an ul.

Source code
$('.pagination').pagination({
  current: 1,
  count: 200,
  length: 10
});

Events

To watch the page change after the user interact with the pagination listen to the event page:change.

Source code
$('.pagination').on('page:change', function(e, pagination) {
  console.log(pagination); // { count: 200, current: 5, length: 10, pages: 20 }
});