From 6c566cf7b1ec7de98d6279d2e17898fb7aabd0e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miko=C5=82aj=20Sojka?= Date: Sun, 30 Mar 2025 21:19:55 +0200 Subject: [PATCH] Add new advanced table example (#2243) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: codecalm Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com> --- .changeset/young-penguins-perform.md | 5 + core/scss/ui/_badges.scss | 2 +- core/scss/ui/_tables.scss | 16 ++ preview/pages/_data/table-properties.json | 30 ++++ preview/pages/_includes/js/tabler-list.html | 10 ++ .../pages/_includes/ui/advanced-table.html | 168 ++++++++++++++++++ preview/pages/_includes/ui/dropdown.html | 10 ++ preview/pages/_includes/ui/pagination.html | 2 +- preview/pages/datatables.html | 18 +- preview/pages/tables.html | 5 + 10 files changed, 247 insertions(+), 19 deletions(-) create mode 100644 .changeset/young-penguins-perform.md create mode 100644 preview/pages/_data/table-properties.json create mode 100644 preview/pages/_includes/js/tabler-list.html create mode 100644 preview/pages/_includes/ui/advanced-table.html create mode 100644 preview/pages/_includes/ui/dropdown.html diff --git a/.changeset/young-penguins-perform.md b/.changeset/young-penguins-perform.md new file mode 100644 index 000000000..63109f3b1 --- /dev/null +++ b/.changeset/young-penguins-perform.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Add new advanced table example diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss index 2799be011..de465004b 100644 --- a/core/scss/ui/_badges.scss +++ b/core/scss/ui/_badges.scss @@ -28,7 +28,7 @@ line-height: var(--#{$prefix}badge-line-height); @at-root a#{&} { - color: $card-bg; + background: var(--#{$prefix}bg-surface-secondary); } .icon { diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index 63c8b5577..b30ed0aeb 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -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; + } } } } \ No newline at end of file diff --git a/preview/pages/_data/table-properties.json b/preview/pages/_data/table-properties.json new file mode 100644 index 000000000..722a82bb0 --- /dev/null +++ b/preview/pages/_data/table-properties.json @@ -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" + } + ] + } +} \ No newline at end of file diff --git a/preview/pages/_includes/js/tabler-list.html b/preview/pages/_includes/js/tabler-list.html new file mode 100644 index 000000000..1f5b4591d --- /dev/null +++ b/preview/pages/_includes/js/tabler-list.html @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/preview/pages/_includes/ui/advanced-table.html b/preview/pages/_includes/ui/advanced-table.html new file mode 100644 index 000000000..7dfe0bcf1 --- /dev/null +++ b/preview/pages/_includes/ui/advanced-table.html @@ -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: "|" %} + +
+
+
+
+
+

+ Employee +

+

+ Table description. +

+
+
+ {% capture html %} + ctrl + K + {% endcapture %} + +
+
+ + {% include "ui/icon.html" icon="search" %} + + + + + + ctrl + K + +
+ + + {% include "ui/icon.html" icon="dots" %} + + {% include "ui/dropdown.html" main-btn="Download" options="Action, Another action, Third action" %} + {% include "ui/button.html" %} +
+
+
+
+ +
+
+ + + + + {% assign headers = table-properties.advanced-table.headers %} + {% for header in headers %} + + {% endfor %} + + + + + {% for person in people %} + + + + + + + + + + {% endfor %} + +
+ +
+ + + {% include "ui/avatar.html" person=person size="xs" class="me-2" %} + {{ person.full_name }} + + {{ person.city }}, {{ person.country }} + + {% assign status = forloop.index | plus: 5 | random_item: statuses %} + {% if status == "Active" %} + Active + {% elsif status == "Inactive" %} + Inactive + {% else %} + Requested + {% endif %} + + {{ forloop.index | random_date | date: '%B %d, %Y' }} + + {% assign item-tags = forloop.index | plus: 5 | random_item: tags %} + {% assign item-tags = item-tags | split: "," %} +
+ {% for tag in item-tags %} + {{ tag }} + {% endfor %} +
+ 		+ + {{ forloop.index | random_item: categories }} + +
+
+ {% include "ui/button.html" icon="dots" icon-only %} +
+
+
+
+
+
+ + {{ per-page[1] }} + records + +
+ {% for record in per-page %} + {{ record }} records + {% endfor %} +
+
+ + {% include "ui/pagination.html" class="m-0 ms-auto" no-words="true" count=10 %} +
+
+
+
+ + diff --git a/preview/pages/_includes/ui/dropdown.html b/preview/pages/_includes/ui/dropdown.html new file mode 100644 index 000000000..cd2444245 --- /dev/null +++ b/preview/pages/_includes/ui/dropdown.html @@ -0,0 +1,10 @@ +{% assign optionsArray = include.options | split: ", " %} + +
+ {{ include.main-btn }} +
+ {% for option in optionsArray %} + {{ option }} + {% endfor %} +
+
\ No newline at end of file diff --git a/preview/pages/_includes/ui/pagination.html b/preview/pages/_includes/ui/pagination.html index 153b81944..3cd357c94 100644 --- a/preview/pages/_includes/ui/pagination.html +++ b/preview/pages/_includes/ui/pagination.html @@ -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 %}