Skip to content

Commit

Permalink
Update basic-table.html
Browse files Browse the repository at this point in the history
  • Loading branch information
delisma committed Jun 25, 2021
1 parent 20e1c78 commit fe29883
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 72 deletions.
37 changes: 37 additions & 0 deletions working-on/js/gc-table.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
( function( $, window, wb ) {
"use strict";

var componentName = "gc-table",
selector = "." + componentName,
initEvent = "wb-init" + selector,
$document = wb.doc,

init = function( event ) {
var elm = wb.init( event, componentName, selector ),
$elm;
if ( elm ) {
$elm = $( elm );

// Call my custom event
$elm.trigger( "load" );

// Identify that initialization has completed
wb.ready( $elm, componentName );
}
};

$document.on( "wb-ready.wb", selector, function( event ) {
var elm = event.currentTarget,
$elm = $( elm ),
number_columns = $elm.find( "th" ).length;

for (var i = 0; i < number_columns; i++ ) {
var $label = $elm.find( "th:eq(" + i + ")").text();
for (var j = 0; j < $elm.find( "tr" ).length; j++) {
$elm.find( "tr:eq(" + j +")" ).find( "td:eq(" + i + ")" ).attr("data-label", $label);
}
};
} );
$document.on( "timerpoke.wb " + initEvent, selector, init );
wb.add( selector );
} )( jQuery, window, wb );
116 changes: 44 additions & 72 deletions working-on/responsive-tables/basic-table.html
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,44 @@
<!DOCTYPE html><!--[if lt IE 9]>-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table – Basic example - Canada.ca Design System</title>
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/theme.min.css">
<link rel="stylesheet" href="https://design.canada.ca/css/custom.css">
<link rel="stylesheet" href="./css/jquery.dataTables.css">
<link rel="stylesheet" href="./css/responsive-tables.css">
<script type="text/javascript" src="https://alpha.canada.ca/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://alpha.canada.ca/js/jquery.min.js"></script>


<!--[if lt IE 9]>
<script src="/javascripts/head-ie8-a371085ca251931cc9b5360c7da328f6.js"></script>
<![endif]-->
<!-- <script src="./scaling-sample/javascripts/vendor/modernizr.js"></script> JM: flex-box stuff, not entirely sure the benefit yet -->

</head>
<body>
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
<!-- Disable browser validation for any examples that include form elements -->
<form action="/form-handler" method="post" novalidate>


<table class="table" id="myTable">
<caption class="wb-inv">Population growth in Canadian cities</caption>
<thead>
<tr class="d2">
<th scope="col">City</th>
<th scope="col">Population in 2007</th>
<th scope="col">Population in 2017</th>
<th scope="col">Percentage change</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td data-label="City">Toronto</td>
<td data-label="Population in 2007">5,418,207</td>
<td data-label="Population in 2017">6,346,088</td>
<td data-label="Percentage change">17.1%</td>
</tr>
<tr valign="top">
<td data-label="City">Montréal</td>
<td data-label="Population in 2007">3,714,846</td>
<td data-label="Population in 2017">4,138,254</td>
<td data-label="Percentage change">11.4%</td>
</tr>
<tr valign="top">
<td data-label="City">Vancouver</td>
<td data-label="Population in 2007">2,218,134</td>
<td data-label="Population in 2017">2,571,262</td>
<td data-label="Percentage change">15.9%</td>
</tr>
<tr valign="top">
<td data-label="City">Ottawa–Gatineau</td>
<td data-label="Population in 2007">1,188,073</td>
<td data-label="Population in 2017">1,377,016 </td>
<td data-label="Percentage change">15.9%</td>
</tr>
</tbody>
</table>



</form>
<!-- <script src="./scaling-sample/javascripts/vendor/iframeResizer.contentWindow.js"></script>
JM: supposed to force a frame to resize - but not seeing any benefit on initial tinkering -->
</body>
</html>
---
lang: en
layout: default
title: Responsive tables
script: ../js/gc-table.js
---
<h2>Table</h2>
<table class="provisional gc-table table" id="myTable">
<caption class="wb-inv">Population growth in Canadian cities</caption>
<thead>
<tr>
<th scope="col">City</th>
<th scope="col">Population in 2007</th>
<th scope="col">Population in 2017</th>
<th scope="col">Percentage change</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toronto</td>
<td>5,418,207</td>
<td>6,346,088</td>
<td>17.1%</td>
</tr>
<tr>
<td>Montréal</td>
<td>3,714,846</td>
<td>4,138,254</td>
<td>11.4%</td>
</tr>
<tr>
<td>Vancouver</td>
<td>2,218,134</td>
<td>2,571,262</td>
<td>15.9%</td>
</tr>
<tr>
<td>Ottawa–Gatineau</td>
<td>1,188,073</td>
<td>1,377,016 </td>
<td>15.9%</td>
</tr>
</tbody>
</table>

0 comments on commit fe29883

Please sign in to comment.