Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wb-tables DataTable Utilities #2438

Merged
merged 11 commits into from
Nov 5, 2024
Merged

wb-tables DataTable Utilities #2438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
18519d8
Initial Commit of 2024-10-datatable-utilities
Sep 26, 2024
780002b
Adjustment to the jeckell html pages as the Javascript Didn't load
Sep 26, 2024
3649d97
Update to the meta.md
Sep 26, 2024
db4a546
Fix to toFrenchMoney Function failing under 'use strict' and Some fi…
Sep 27, 2024
c0af2e9
Fix for French Totals coming back as NaN
Sep 27, 2024
dea3746
Implemented wet-boew team Accesibility changes to sample pages + adde…
Oct 2, 2024
611e13c
1.1.0 - Wet-Boew Fixes + French Translation of Examples Page
Oct 10, 2024
67b13f9
Fixed a Typo
Oct 10, 2024
204c73d
Added the URL Column to the Raw Data
Oct 24, 2024
00355d6
Updated Implementation Plan
Oct 24, 2024
e275594
Fixed typo in implementation Plan
Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions méli-mélo/2024-10-datatable-utilities/css/wb-pspc-datatable-utility.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wb-col-sum {
font-weight: bold;
}
328 changes: 328 additions & 0 deletions méli-mélo/2024-10-datatable-utilities/data/datatable-utility.json
View file
Open in desktop

Large diffs are not rendered by default.

122 changes: 122 additions & 0 deletions méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
---
title: DataTable Utilities - Documentation
language: en
description: List of utilities to manipulate DataTables tables.
tag: DataTable
altLangPage: datatable-utilities-doc-fr.html
dateModified: 2024-11-01
---

<p>DataTable Utilities, includes Data Manipulation Classes for emails, Urls and Money. Also Includes Datatable Footer Totals.</p>
<p>Having this plugin intergrated will make the transition to Canada.ca easier as these features are already in use on https://www.tpsgc-pwgsc.gc.ca, currently some of the pages that make use of this plugin and other pages that make use of Other Javascripts are just pointed to from Canada.ca</p>
<p>The Public at Large, the plugin makes DataTables more user friendly with Clickable Links, and they are used to this functionality our PRE Canada.ca Pages.</p>

<h2>GCWeb implementation plan</h2>

{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-10-datatable-utilities" | first %}

<ul>
{% for deliverable in implPlan.implementationPlan %}
<li>{{ deliverable.due }} - {{ deliverable.what }}</li>
{% endfor %}
</ul>

<p>Todo and for future consideration</p>
<ul>
{% for todo in implPlan.todos %}
<li>{{ todo }}</li>
{% endfor %}
</ul>

<p>Sponsor: PSPC - {{ implPlan.sponsor }}</p>

<div class="wb-prettify all-pre"></div>

<h2>Working examples</h2>
<ul>
<li><a href="index-en.html">DataTables utilities</a></li>
</ul>

<h2>Configuration options</h2>

<p>Enable the plugin for the targeted table by adding the CSS class <code>wb-tables-utility</code> to the table. Add the attribute <code>data-wb-tables-utility</code> to configure the options.</p>

<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Description</th>
<th>How to configure</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>debug</td>
<td>Print Debug messages to the console</td>
<td><code>data-wb-tables-utility="{&amp;quot;debug&amp;quot;:true}"</code></td>
<td>
<dl>
<dt>false (default)</dt>
<dd>Suppress Printing of debug messages.</dd>
<dt>true</dt>
<dd>Show debug messages to the console.</dd>
</dl>
</td>
</tr>
<tr>
<td>filteredsum</td>
<td>Column Totals to reflect Filtered DataTable Data</td>
<td><code>data-wb-tables-utility="{&amp;quot;filteredsum&amp;quot;:false}"</code></td>
<td>
<dl>
<dt>true (default):</dt>
<dd>As Data is Filtered adjust Totals to match filtered Data.</dd>
<dt>false:</dt>
<dd>Show Grand Total Regardless of data filtered.</dd>
</dl>
</td>
</tr>
<tr>
<td>wb-col-sum</td>
<td>When this class is applied to a column, a column footer total is calculated</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-sum&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-sum
</td>
</tr>
<tr>
<td>wb-col-money</td>
<td>When this class is applied to a column, the data is manipulated to reflect currency with $</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-money&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-money
</td>
</tr>
<tr>
<td>wb-col-cur-thousand</td>
<td>When this class is applied to a column, the data is manipulated to reflect currency without $</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-cur-thousand&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-cur-thousand
</td>
</tr>
<tr>
<td>wb-col-mailto</td>
<td>When this class is applied to a column, the data is searched with an email partern, and when found are wrapped with &lt;a href=&quot;mailto:...&quot;&gt;...&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-mailto&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-mailto
</td>
</tr>
<tr>(column-name, column-name-url)
<td>wb-col-url</td>
<td>When this class is applied to a column, dataTable Utilites looks for a second column with the same name as this column that is ending with -url
and the 2 are stiched into a single column wrapped with &lt;a href=&quot;column-name-url&quot;&gt;column-name&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-url&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-url
</td>
</tr>
</tbody>
</table>
121 changes: 121 additions & 0 deletions méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-fr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
title: Utilitaires DataTables - Documentation
language: fr
description: Liste d'utilitaires permettant la modification de tableaux DataTables.
tag: DataTable
altLangPage: datatable-utilities-doc-fr.html
dateModified: 2024-11-01
---
<p>Les utilitaires de table de données incluent des classes de manipulation de données pour les courriels, les URL et l’argent. Ils comprennent également des totaux dans le pied de page de la table de données.</p>
<p>L'intégration de ce plugin facilitera la transition vers Canada.ca, car ces fonctionnalités sont déjà mises en œuvre sur https://www.tpsgc-pwgsc.gc.ca. Actuellement, certaines pages utilisant ce plugiciel, ainsi que d'autres pages qui utilisent différents JavaScripts, sont simplement liées directement de Canada.ca.</p>
<p>Pour le grand public, le plugiciel rend les tables de données plus conviviales en fournissant des liens cliquables, et les utilisateurs sont déjà habitués à cette fonctionnalité sur nos anciennes pages Canada.ca.</p>

<h2>Plan de mise en œuvre de GCWeb</h2>

{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-10-datatable-utilities" | first %}

<ul>
{% for deliverable in implPlan.implementationPlanFR %}
<li>{{ deliverable.due }} - {{ deliverable.what }}</li>
{% endfor %}
</ul>

<p>Todo and for future consideration</p>
<ul>
{% for todo in implPlan.todosFR %}
<li>{{ todo }}</li>
{% endfor %}
</ul>

<p>Commanditaire : SPAC - {{ implPlan.sponsor }}</p>

<div class="wb-prettify all-pre"></div>

<h2>Exemples pratiques</h2>
<ul>
<li><a href="index-fr.html">Utilitaire DataTable</a></li>
</ul>

<h2>Options de configuration</h2>

<p>Activez le plugiciel pour le tableau ciblé en ajoutant la classe CSS <code>wb-tables-utility</code> au tableau. Ajoutez l'attribut <code>data-wb-tables-utility</code> pour configurer les options.</p>

<table class="table" lang="en">
<thead>
<tr>
<th>Option</th>
<th>Description</th>
<th>How to configure</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>debug</td>
<td>Print Debug messages to the console</td>
<td><code>data-wb-tables-utility="{&amp;quot;debug&amp;quot;:true}"</code></td>
<td>
<dl>
<dt>false (default)</dt>
<dd>Suppress Printing of debug messages.</dd>
<dt>true</dt>
<dd>Show debug messages to the console.</dd>
</dl>
</td>
</tr>
<tr>
<td>filteredsum</td>
<td>Column Totals to reflect Filtered DataTable Data</td>
<td><code>data-wb-tables-utility="{&amp;quot;filteredsum&amp;quot;:false}"</code></td>
<td>
<dl>
<dt>true (default):</dt>
<dd>As Data is Filtered adjust Totals to match filtered Data.</dd>
<dt>false:</dt>
<dd>Show Grand Total Regardless of data filtered.</dd>
</dl>
</td>
</tr>
<tr>
<td>wb-col-sum</td>
<td>When this class is applied to a column, a column footer total is calculated</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-sum&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-sum
</td>
</tr>
<tr>
<td>wb-col-money</td>
<td>When this class is applied to a column, the data is manipulated to reflect currency with $</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-money&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-money
</td>
</tr>
<tr>
<td>wb-col-cur-thousand</td>
<td>When this class is applied to a column, the data is manipulated to reflect currency without $</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-cur-thousand&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-cur-thousand
</td>
</tr>
<tr>
<td>wb-col-mailto</td>
<td>When this class is applied to a column, the data is searched with an email partern, and when found are wrapped with &lt;a href=&quot;mailto:...&quot;&gt;...&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-mailto&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-mailto
</td>
</tr>
<tr>(column-name, column-name-url)
<td>wb-col-url</td>
<td>When this class is applied to a column, dataTable Utilites looks for a second column with the same name as this column that is ending with -url
and the 2 are stiched into a single column wrapped with &lt;a href=&quot;column-name-url&quot;&gt;column-name&lt;/a&gt; to make it a clikcable link.</td>
<td><code>&quot;columnDefs&quot;: [{ &quot;className&quot;: &quot;wb-col-url&quot;, &quot;targets&quot;: [3]}]</code></td>
<td>
wb-col-url
</td>
</tr>
</tbody>
</table>
Loading
Loading