mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge branch 'dev' of https://github.com/tabler/tabler into dev
This commit is contained in:
codecalm
5
.changeset/young-penguins-perform.md
Normal file
5
.changeset/young-penguins-perform.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Add new advanced table example
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
line-height: var(--#{$prefix}badge-line-height);
|
line-height: var(--#{$prefix}badge-line-height);
|
||||||
|
|
||||||
@at-root a#{&} {
|
@at-root a#{&} {
|
||||||
color: $card-bg;
|
background: var(--#{$prefix}bg-surface-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|||||||
@@ -154,8 +154,24 @@ Table sort
|
|||||||
//
|
//
|
||||||
.table-selectable {
|
.table-selectable {
|
||||||
tbody tr {
|
tbody tr {
|
||||||
|
.on-checked {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.on-unchecked {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
&:has(.table-selectable-check:checked) {
|
&:has(.table-selectable-check:checked) {
|
||||||
background-color: $table-active-bg;
|
background-color: $table-active-bg;
|
||||||
|
|
||||||
|
.on-checked {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.on-unchecked {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
30
preview/pages/_data/table-properties.json
Normal file
30
preview/pages/_data/table-properties.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"advanced-table": {
|
||||||
|
"headers": [
|
||||||
|
{
|
||||||
|
"data-sort": "sort-name",
|
||||||
|
"name": "Name"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data-sort": "sort-city",
|
||||||
|
"name": "City"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data-sort": "sort-status",
|
||||||
|
"name": "Status"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data-sort": "sort-date",
|
||||||
|
"name": "Start date"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data-sort": "sort-tags",
|
||||||
|
"name": "Tags"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data-sort": "sort-category",
|
||||||
|
"name": "Category"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
10
preview/pages/_includes/js/tabler-list.html
Normal file
10
preview/pages/_includes/js/tabler-list.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
{% if environment == 'development' %}window.tabler_list = window.tabler_list || {};{% endif %}
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const list = {% if environment == 'development' %}window.tabler_list["table-{{ id }}"] = {% endif %}new List('table-{{ id }}', {
|
||||||
|
sortClass: 'table-sort',
|
||||||
|
listClass: 'table-tbody',
|
||||||
|
valueNames: {{ include.parameters }}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
168
preview/pages/_includes/ui/advanced-table.html
Normal file
168
preview/pages/_includes/ui/advanced-table.html
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
{% assign table-id = include.id | default: "advanced-table" %}
|
||||||
|
{% assign statuses = 'Active,Inactive,Requested' | split: ',' %}
|
||||||
|
{% assign per-page = '10,20,50,100' | split: "," %}
|
||||||
|
{% assign categories = 'Agencies,Individual,Event,Ticket' | split: "," %}
|
||||||
|
{% assign tags = 'QTA,Event,Tickets,TODO|Event,Tickets|QTA,Event|Tickets' | split: "|" %}
|
||||||
|
<!--{% include "js/tabler-list.html", parameters="[ 'sort-name', 'sort-content', 'sort-status', 'sort-date', 'sort-tags', 'sort-category']" %}-->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-table">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="row w-full">
|
||||||
|
<div class="col">
|
||||||
|
<h3 class="card-title mb-0">
|
||||||
|
Employee
|
||||||
|
</h3>
|
||||||
|
<p class="text-secondary m-0">
|
||||||
|
Table description.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-auto col-sm-12">
|
||||||
|
{% capture html %}
|
||||||
|
<kbd>ctrl + K</kbd>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
<div class="ms-auto d-flex flex-wrap btn-list">
|
||||||
|
<div class="input-group input-group-flat w-auto">
|
||||||
|
<span class="input-group-text">
|
||||||
|
{% include "ui/icon.html" icon="search" %}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<input id="{{ table-id }}-search" type="text" class="form-control" autocomplete="off">
|
||||||
|
|
||||||
|
<span class="input-group-text">
|
||||||
|
<kbd>ctrl + K</kbd>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" class="btn btn-icon" aria-label="Button">
|
||||||
|
{% include "ui/icon.html" icon="dots" %}
|
||||||
|
</a>
|
||||||
|
{% include "ui/dropdown.html" main-btn="Download" options="Action, Another action, Third action" %}
|
||||||
|
{% include "ui/button.html" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="{{ table-id }}">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-vcenter table-selectable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="w-1"></th>
|
||||||
|
{% assign headers = table-properties.advanced-table.headers %}
|
||||||
|
{% for header in headers %}
|
||||||
|
<th>
|
||||||
|
<button class="table-sort d-flex justify-content-between" data-sort="{{ header.data-sort}}">
|
||||||
|
{{ header.name }}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody class="table-tbody">
|
||||||
|
{% for person in people %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<input class="form-check-input m-0 align-middle table-selectable-check" type="checkbox" aria-label="Select invoice" value="true">
|
||||||
|
</td>
|
||||||
|
<td class="{{ headers[0].data-sort }}">
|
||||||
|
{% include "ui/avatar.html" person=person size="xs" class="me-2" %}
|
||||||
|
{{ person.full_name }}
|
||||||
|
</td>
|
||||||
|
<td class="{{ headers[1].data-sort }}">
|
||||||
|
{{ person.city }}, {{ person.country }}
|
||||||
|
</td>
|
||||||
|
<td class="{{ headers[2].data-sort }}">
|
||||||
|
{% assign status = forloop.index | plus: 5 | random_item: statuses %}
|
||||||
|
{% if status == "Active" %}
|
||||||
|
<span class="badge bg-success-lt">Active</span>
|
||||||
|
{% elsif status == "Inactive" %}
|
||||||
|
<span class="badge bg-danger-lt">Inactive</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="badge">Requested</span>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
<td class="{{ headers[3].data-sort }}">
|
||||||
|
{{ forloop.index | random_date | date: '%B %d, %Y' }}
|
||||||
|
</td>
|
||||||
|
<td class="{{ headers[4].data-sort }}">
|
||||||
|
{% assign item-tags = forloop.index | plus: 5 | random_item: tags %}
|
||||||
|
{% assign item-tags = item-tags | split: "," %}
|
||||||
|
<div class="badges-list">
|
||||||
|
{% for tag in item-tags %}
|
||||||
|
<span class="badge">{{ tag }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="{{ headers[5].data-sort }} py-0">
|
||||||
|
<span class="on-unchecked">
|
||||||
|
{{ forloop.index | random_item: categories }}
|
||||||
|
</span>
|
||||||
|
<div class="on-checked">
|
||||||
|
<div class="d-flex justify-content-end">
|
||||||
|
{% include "ui/button.html" icon="dots" icon-only %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer d-flex align-items-center">
|
||||||
|
<div class="dropdown">
|
||||||
|
<a class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||||
|
<span id="page-count" class="me-1">{{ per-page[1] }}</span>
|
||||||
|
<span>records</span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
{% for record in per-page %}
|
||||||
|
<a class="dropdown-item" onclick="setPageListItems(event)" data-value="{{ record }}">{{ record }} records</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include "ui/pagination.html" class="m-0 ms-auto" no-words="true" count=10 %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const advancedTable = {{ table-properties.advanced-table | json}}
|
||||||
|
const setPageListItems = e => {
|
||||||
|
window.tabler_list["{{ table-id }}"].page = parseInt(e.target.dataset.value)
|
||||||
|
window.tabler_list["{{ table-id }}"].update()
|
||||||
|
|
||||||
|
document.querySelector("#page-count").innerHTML = e.target.dataset.value
|
||||||
|
}
|
||||||
|
|
||||||
|
window.tabler_list = window.tabler_list || {}
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const list = window.tabler_list["{{ table-id }}"] = new List('{{ table-id }}', {
|
||||||
|
sortClass: 'table-sort',
|
||||||
|
listClass: 'table-tbody',
|
||||||
|
page: parseInt("{{ per-page[1] }}"),
|
||||||
|
pagination: {
|
||||||
|
item: value => {
|
||||||
|
return `<li class="page-item"><a class="page-link cursor-pointer">${value.page}</a></li>`
|
||||||
|
},
|
||||||
|
innerWindow: 1,
|
||||||
|
outerWindow: 1,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
valueNames: advancedTable.headers.map(header => header['data-sort'])
|
||||||
|
});
|
||||||
|
|
||||||
|
const searchInput = document.querySelector('#{{ table-id }}-search');
|
||||||
|
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', () => {
|
||||||
|
list.search(searchInput.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
10
preview/pages/_includes/ui/dropdown.html
Normal file
10
preview/pages/_includes/ui/dropdown.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{% assign optionsArray = include.options | split: ", " %}
|
||||||
|
|
||||||
|
<div class="dropdown">
|
||||||
|
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">{{ include.main-btn }}</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
{% for option in optionsArray %}
|
||||||
|
<a class="dropdown-item" href="#">{{ option }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
{% assign count = include.count | default: 5 %}
|
{% assign count = include.count | default: 5 %}
|
||||||
{% assign active-item = include.active-item | default: 2 %}
|
{% assign active-item = include.active-item | default: 3 %}
|
||||||
<ul class="pagination {{ include.class }}">
|
<ul class="pagination {{ include.class }}">
|
||||||
<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
|
<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
|
||||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
|
||||||
|
|||||||
@@ -49,20 +49,4 @@ permalink: datatables.html
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% capture_script %}
|
{% 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' ]" %}
|
||||||
<script>
|
|
||||||
{% if environment == 'development' %}window.tabler_list = window.tabler_list || {};{% endif %}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
const list = {% if environment == 'development' %}window.tabler_list["table-{{ id }}"] = {% endif %}new List('table-{{ id }}', {
|
|
||||||
sortClass: 'table-sort',
|
|
||||||
listClass: 'table-tbody',
|
|
||||||
valueNames: [ 'sort-name', 'sort-type', 'sort-city', 'sort-score',
|
|
||||||
{ attr: 'data-date', name: 'sort-date' },
|
|
||||||
{ attr: 'data-progress', name: 'sort-progress' },
|
|
||||||
'sort-quantity'
|
|
||||||
]
|
|
||||||
});
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
{% endcapture_script %}
|
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
page-header: Tables
|
page-header: Tables
|
||||||
page-menu: base.tables
|
page-menu: base.tables
|
||||||
layout: default
|
layout: default
|
||||||
|
page-libs: [lists]
|
||||||
permalink: tables.html
|
permalink: tables.html
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -37,4 +38,8 @@ permalink: tables.html
|
|||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
{% include "cards/invoices.html" %}
|
{% include "cards/invoices.html" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
{% include "ui/advanced-table.html" %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user