mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
6c566cf7b1
Co-authored-by: codecalm <codecalm@gmail.com> Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
---
|
|
title: Datatables
|
|
page-header: Datatables
|
|
page-libs: [lists]
|
|
page-menu: plugins.datatables
|
|
layout: default
|
|
permalink: datatables.html
|
|
---
|
|
|
|
{% assign id = include.map-id | default: 'default' %}
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
{% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %}
|
|
{% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %}
|
|
<div id="table-{{ id }}" class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
|
|
<th><button class="table-sort" data-sort="sort-city">City</button></th>
|
|
<th><button class="table-sort" data-sort="sort-type">Type</button></th>
|
|
<th><button class="table-sort" data-sort="sort-score">Score</button></th>
|
|
<th><button class="table-sort" data-sort="sort-date">Date</button></th>
|
|
<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
|
|
<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-tbody">
|
|
{% for rc in rollercoasters %}
|
|
{% assign progress = forloop.index | random_number %}
|
|
<tr>
|
|
<td class="sort-name">{{ rc.name }}</td>
|
|
<td class="sort-city">{{ rc.city }}</td>
|
|
<td class="sort-type">{{ rc.type }}</td>
|
|
<td class="sort-score">{{ rc.score }}</td>
|
|
<td class="sort-date" data-date="{{ forloop.index | random_date | date: '%s' }}">{{ forloop.index | random_date | date: '%B %d, %Y' }}</td>
|
|
<td class="sort-quantity">{{ forloop.index | random_number: 1, 200 }}</td>
|
|
<td class="sort-progress" data-progress="{{ progress }}">
|
|
<div class="row align-items-center">
|
|
<div class="col-12 col-lg-auto">{{ progress }}%</div>
|
|
<div class="col">{% include "ui/progress.html" value=progress width="5rem" %}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "js/tabler-list.html", parameters="[ 'sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: 'data-date', name: 'sort-date' }, { attr: 'data-progress', name: 'sort-progress' }, 'sort-quantity' ]" %} |