Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Add new advanced table example (#2243)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
Mikołaj Sojka
2025-03-30 21:19:55 +02:00
committed by GitHub
parent 523f288c8f
commit 6c566cf7b1
10 changed files with 247 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/young-penguins-perform.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Add new advanced table example

2
core/scss/ui/_badges.scss
View File

@@ -28,7 +28,7 @@
line-height: var(--#{$prefix}badge-line-height);
@at-root a#{&} {
color: $card-bg;
background: var(--#{$prefix}bg-surface-secondary);
}
.icon {

16
core/scss/ui/_tables.scss
View File

@@ -154,8 +154,24 @@ Table sort
//
.table-selectable {
tbody tr {
.on-checked {
display: none;
}
.on-unchecked {
display: initial;
}
&:has(.table-selectable-check:checked) {
background-color: $table-active-bg;
.on-checked {
display: initial;
}
.on-unchecked {
display: none;
}
}
}
}

30
preview/pages/_data/table-properties.json Normal file
View 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
View 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
View 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
View 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>

2
preview/pages/_includes/ui/pagination.html
View File

@@ -1,5 +1,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 }}">
<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">

18
preview/pages/datatables.html
View File

@@ -49,20 +49,4 @@ permalink: datatables.html
</div>
</div>
{% capture_script %}
<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 %}
{% 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' ]" %}

5
preview/pages/tables.html
View File

@@ -2,6 +2,7 @@
page-header: Tables
page-menu: base.tables
layout: default
page-libs: [lists]
permalink: tables.html
---
@@ -37,4 +38,8 @@ permalink: tables.html
<div class="col-12">
{% include "cards/invoices.html" %}
</div>
<div class="col-12">
{% include "ui/advanced-table.html" %}
</div>
</div>