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 | Buyer | Payment | Amount |
---|---|---|---|
2194 | Carla Leach | paypal | $59.85 |
2442 | Kameron Burks | credit card | $32.50 |
4640 | Jake Reese | paypal | $105.60 |
9390 | Bryce Sellers | cash | $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
Option | Type | Default | Description |
---|---|---|---|
current | number | 1 | Selected page. |
count | number | 1 | Number of records in the database. |
length | number | 10 | Number 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 }
});