Datatables (#1114)

_config.yml

@@ -26,6 +26,9 @@ google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
 google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
 npm-package: "@tabler/core"
 
+random-date-from: "2018-01-01"
+random-date-to: "2022-01-01"
+
 debug: false
 
 layout-dark: false

package-lock.json

@@ -45,6 +45,7 @@
         "gulp-sass": "^5.1.0",
         "imask": "^6.4.2",
         "jsvectormap": "^1.4.5",
+        "list.js": "^2.3.1",
         "litepicker": "^2.0.12",
         "nouislider": "^15.5.1",
         "postcss": "^8.4.12",
@@ -9119,6 +9120,18 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "node_modules/list.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/list.js/-/list.js-2.3.1.tgz",
+      "integrity": "sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg==",
+      "dev": true,
+      "dependencies": {
+        "string-natural-compare": "^2.0.2"
+      },
+      "engines": {
+        "node": "^6.0 || ^8.0 || ^10.0 || ^12.0 || >=14"
+      }
+    },
     "node_modules/litepicker": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.12.tgz",
@@ -13628,6 +13641,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-natural-compare": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-2.0.3.tgz",
+      "integrity": "sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==",
+      "dev": true
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -22412,6 +22431,15 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "list.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/list.js/-/list.js-2.3.1.tgz",
+      "integrity": "sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg==",
+      "dev": true,
+      "requires": {
+        "string-natural-compare": "^2.0.2"
+      }
+    },
     "litepicker": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.12.tgz",
@@ -25961,6 +25989,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "string-natural-compare": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-2.0.3.tgz",
+      "integrity": "sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==",
+      "dev": true
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",

package.json

@@ -87,6 +87,7 @@
     "gulp-sass": "^5.1.0",
     "imask": "^6.4.2",
     "jsvectormap": "^1.4.5",
+    "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.5.1",
     "postcss": "^8.4.12",

src/pages/_data/libs.json

@@ -10,6 +10,7 @@
     "apexcharts": "apexcharts/dist/apexcharts.min.js",
     "nouislider": "nouislider/dist/nouislider.min.js",
     "countup": "countup.js/dist/countUp.js",
+    "lists": "list.js/dist/list.min.js",
     "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
     "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",

src/pages/_data/menu.yml

@@ -37,6 +37,10 @@ base:
     colors:
       url: colors.html
       title: Colors
+    datatables:
+      url: datatables.html
+      title: Datatables
+      badge: New
     dropdowns:
       url: dropdowns.html
       title: Dropdowns

src/pages/_includes/cards/tasks.html

@@ -14,7 +14,7 @@
 				</td>
 				<td class="text-nowrap text-muted">
 					{% include ui/icon.html icon="calendar" %}
-					{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
+					{{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%B %d, %Y' }}
 				</td>
 				<td class="text-nowrap">
 					<a href="#" class="text-muted">

src/pages/_includes/ui/progress.html

@@ -1,6 +1,6 @@
 {% assign percentage = include.value | default: 38 %}
 {% assign colors = include.colors | default: 'blue,red,green,yellow,dark' | split: ',' %}
-<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}>
    {% if include.indeterminate %}
       <div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
    {% elsif include.values  %}

src/pages/datatables.html

@@ -0,0 +1,65 @@
+---
+title: Datatables
+page-header: Datatables
+libs: lists
+---
+
+{% assign id = include.map-id | default: 'default' %}
+<div class="card">
+	<div class="card-body">
+		{% 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 }}">
+		<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 site.data.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: site.random-date-from, site.random-date-to | date: '%s' }}">{{ forloop.index | random_date: site.random-date-from, site.random-date-to | 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-auto">{{ progress }}%</div>
+						<div class="col">{% include ui/progress.html value=progress width="5rem" %}</div>
+					</div>
+				</td>
+			</tr>
+			{% endfor %}
+			</tbody>
+		</table>
+		</div>
+	</div>
+</div>
+
+{% capture_global scripts %}
+<script>
+{% if jekyll.environment == 'development' %}window.tabler_list = window.tabler_list || {};{% endif %}
+
+	document.addEventListener("DOMContentLoaded", function() {
+	const list = {% if jekyll.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_global %}

src/scss/_variables.scss

@@ -545,15 +545,22 @@ $spinner-border-width-sm: 1px !default;
 
 //tables
 $table-color: inherit !default;
+$table-cell-padding-x: .5rem !default;
+$table-cell-padding-y: .75rem !default;
 $table-border-color: $border-color-transparent !default;
-$table-head-border-color: $border-color-transparent !default;
+$table-th-border-color: $border-color-transparent !default;
-$table-head-padding-y: .5rem !default;
+$table-th-padding-x: $table-cell-padding-x !default;
-$table-head-color: $text-muted !default;
+$table-th-padding-y: .5rem !default;
-$table-head-bg: var(--#{$variable-prefix}border-color-light) !default;
+$table-th-color: $text-muted !default;
+$table-th-bg: var(--#{$variable-prefix}border-color-light) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$variable-prefix}border-color-light) !default;
 $table-group-separator-color: $border-color-transparent !default;
 
+$table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
+$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
+$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
+
 //toasts
 $toast-border-color: $border-color !default;
 $toast-header-color: $text-muted !default;

src/scss/ui/_tables.scss

@@ -1,11 +1,12 @@
 .table {
   thead {
     th {
-      color: $table-head-color;
+      color: $table-th-color;
-      background: $table-head-bg;
+      background: $table-th-bg;
       @include subheader;
-      padding-top: $table-head-padding-y;
+      padding-top: $table-th-padding-y;
-      padding-bottom: $table-head-padding-y;
+      padding-bottom: $table-th-padding-y;
+      white-space: nowrap;
 
       @media print {
         background: transparent;
@@ -13,7 +14,7 @@
     }
   }
 
-  >:not(:first-child) {
+  > :not(:first-child) {
     border-top-width: $table-border-width;
   }
 }
@@ -96,4 +97,48 @@
       }
     }
   }
+}
+
+.table-sort {
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  border: 0;
+  background: inherit;
+  display: block;
+  width: 100%;
+  text-align: inherit;
+  @include transition(color $transition-time);
+
+  margin: (-$table-th-padding-y) (-$table-th-padding-x);
+  padding: $table-th-padding-y $table-th-padding-x;
+
+  &:hover,
+  &.asc,
+  &.desc {
+    color: $body-color;
+  }
+
+  &:after,
+  &.asc:after,
+  &.desc:after {
+    content: '';
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: bottom;
+    background: $table-sort-bg-image no-repeat center;
+    opacity: .2;
+  }
+
+  &.asc:after {
+    background: $table-sort-desc-bg-image no-repeat center;
+    opacity: 1;
+  }
+
+  &.desc:after {
+    background: $table-sort-asc-bg-image no-repeat center;
+    opacity: 1;
+  }
 }