Merge pull request #33 from aabughosh/fixTable

add the missing imports for redhat table

Author: sebrandon1

html/index.html

@@ -51,12 +51,13 @@
     import '@patternfly/elements/pf-text-input/pf-text-input.js';
     import '@rhds/elements/rh-tabs/rh-tabs.js';
     import '@rhds/elements/rh-accordion/rh-accordion.js';
+    import '@rhds/elements/rh-table/rh-table.js';
     import 'https://jspm.dev/@rhds/elements/rh-tag/rh-tag.js'
 </script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-2TnSHycBDAm2wpZmgdi0z81kykGPJAkiUY+Wf97RbvY=" crossorigin="anonymous">
   <link rel="stylesheet" href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" integrity="sha256-X0cPqbNml7z/f/z7c1HiTdJ2aSO4QmaAMDnESV5n7fE=" crossorigin="anonymous">
-
-  <link inline rel="stylesheet" href="style.css">
+  <link rel="stylesheet"
+    href="https://ux.redhat.com/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">  <link inline rel="stylesheet" href="style.css">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js" integrity="sha256-NTsR4SOm3YHfJrmrmvBtEYqfQ6jQ5yvEKMhgQe3DIl0=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/duration.min.js" integrity="sha256-6rug74IKp6v/8WINJxMw33zXo8NVOdRw/5Ib21ZzwU4=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

html/index.js

@@ -199,9 +199,10 @@ function hideAllResultsTabObjects () {
 // fills the "version" tab element with the data from the claim.json passed in input
 function fillVersionsElement (input, element) {
   $(element).empty()
-  $('<thead><tr><th scope="col">Component</th><th scope="col">Version</th></tr></thead><tbody>').appendTo($(element))
+  $('<colgroup><col><col></colgroup><thead><tr><th scope="col" data-label="Component">Component</th>' +
+  '<th scope="col" data-label="Version">Version</th></tr></thead><tbody>').appendTo($(element))
   for (const key in input) {
-    $('<tr><td><b>' + key + '</b></td><td>' + input[key] + '</td></tr>').appendTo($(element))
+    $('<tr><td data-label="Component"><b>' + key + '</b></td><td data-label="Version">' + input[key] + '</td></tr>').appendTo($(element))
   }
   $('</tbody>').appendTo($(element))
 }