Add selectable table functionality with active background color (#2171)

.changeset/swift-feet-think.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add selectable table functionality with active background color

core/scss/_variables.scss

@@ -864,6 +864,7 @@ $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
+$table-active-bg: var(--#{$prefix}active-bg) !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;

core/scss/ui/_tables.scss

@@ -148,3 +148,14 @@ Table sort
     background: transparent;
   }
 }
+
+//
+// Table selectable
+//
+.table-selectable {
+  tbody tr {
+    &:has(.table-selectable-check:checked) {
+      background-color: $table-active-bg;
+    }
+  }
+}

preview/eleventy.config.mjs

@@ -504,11 +504,11 @@ export default function (eleventyConfig) {
 	});
 
 	eleventyConfig.addFilter("random_date", function (x, startDate = null, endDate = null) {
-		const start = startDate ? new Date(startDate).getTime() : Date.now() - 100 * 24 * 60 * 60 * 1000;
+		const start = new Date(startDate ? startDate : '2024-01-01').getTime() / 1000;
-		const end = endDate ? new Date(endDate).getTime() : Date.now();
+		const end = new Date(endDate ? endDate : '2024-12-30').getTime() / 1000;
 
 		const randomTimestamp = randomNumber(x, start, end);
-		return new Date(randomTimestamp);
+		return new Date(randomTimestamp * 1000);
 	});
 
 	eleventyConfig.addFilter("random_item", function (x, items) {

preview/pages/_includes/cards/invoices.html

@@ -23,7 +23,7 @@
 
 	</div>
 	<div class="table-responsive">
-		<table class="table card-table table-vcenter text-nowrap datatable">
+		<table class="table table-selectable card-table table-vcenter text-nowrap datatable">
 			<thead>
 			<tr>
 				<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th>
@@ -41,7 +41,7 @@
 			<tbody>
 			{% for invoice in invoices limit: 8 %}
 			<tr>
-				<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
+				<td><input class="form-check-input m-0 align-middle table-selectable-check" type="checkbox" aria-label="Select invoice"></td>
 				<td><span class="text-secondary">00{{ forloop.index | plus: 1400 }}</span></td>
 				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
 				<td>

preview/pages/_includes/cards/tasks.html

@@ -3,18 +3,18 @@
 		<h3 class="card-title">Tasks</h3>
 	</div>
 	<div class="table-responsive">
-		<table class="table card-table table-vcenter">
+		<table class="table table-selectable card-table table-vcenter">
 			{% for task in tasks-list %}
 			<tr>
 				<td class="w-1 pe-0">
-					<input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task"{% if task.checked %} checked{% endif %} >
+					<input type="checkbox" class="form-check-input m-0 align-middle table-selectable-check" aria-label="Select task"{% if task.checked %} checked{% endif %} >
 				</td>
 				<td class="w-100">
 					<a href="#" class="text-reset">{{ task.name }}</a>
 				</td>
 				<td class="text-nowrap text-secondary">
 					{% include "ui/icon.html" icon="calendar" %}
-					{{ forloop.index | random_date: site.randomDateFrom, site.randomDateTo | date: '%B %d, %Y' }}
+					{{ forloop.index | random_date | date: '%B %d, %Y' }}
 				</td>
 				<td class="text-nowrap">
 					<a href="#" class="text-secondary">

preview/pages/datatables.html

@@ -33,7 +33,7 @@ permalink: datatables.html
 				<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.randomDateFrom, site.randomDateTo | date: '%s' }}">{{ forloop.index | random_date: site.randomDateFrom, site.randomDateTo | date: '%B %d, %Y' }}</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">