Merge pull request #62 from reuters-graphics/table-jon

Sticky fix and pagination bars removed

src/components/Article/Article.svelte

@@ -60,7 +60,6 @@
     display: block;
     margin: 0;
     padding: 0 15px;
-    overflow-x: hidden;
     background-color: var(--theme-colour-background, transparent);
     &.embedded {
       overflow: auto;

src/components/Table/Pagination.svelte

@@ -2,7 +2,7 @@
   import { intcomma } from 'journalize';
   import LeftArrow from './LeftArrow.svelte';
   import RightArrow from './RightArrow.svelte';
-  import ProgressBar from './ProgressBar.svelte';
+
   /**
    * The current page number.
    * @type {number}
@@ -54,7 +54,6 @@
   >
   <div class="label" aria-label="page {pageNumber}" aria-current="page">
     <div class="records">{minRow}-{maxRow} of {intcomma(n)}</div>
-    <div class="progress"><ProgressBar bind:progress /></div>
   </div>
   <button
     on:click="{goToNextPage}"
@@ -73,7 +72,7 @@
   nav.pagination {
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center;
     margin-top: 1rem;
     button {
       border: 1px solid var(--theme-colour-text-secondary, $tr-light-grey);
@@ -117,9 +116,6 @@
         margin: 0 1rem;
         color: var(--theme-colour-text-primary, $tr-medium-grey);
       }
-      .progress {
-        padding: 0.33rem 0 0 0;
-      }
     }
   }
 

src/components/Table/ProgressBar.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  export let progress: number = 0.0;
-</script>
-
-<div class="progress-bar">
-  <div class="progress-bar--segment" class:active="{progress >= 0}"></div>
-  <div class="progress-bar--segment" class:active="{progress >= 0.33}"></div>
-  <div class="progress-bar--segment" class:active="{progress >= 0.66}"></div>
-</div>
-
-<style lang="scss">
-  @import '../../scss/colours/thematic/tr';
-
-  .progress-bar {
-    width: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-    .progress-bar--segment {
-      height: 5px;
-      width: 30%;
-      background-color: var(--theme-colour-brand-rules, $tr-muted-grey);
-      &.active {
-        background-color: var(--theme-colour-text-primary, $tr-medium-grey);
-      }
-    }
-  }
-</style>

src/components/Table/Table.svelte

@@ -122,6 +122,12 @@
    */
   export let fieldFormatters: object = {};
 
+  /**
+   * Whether the table header should be sticky.
+   * @type {boolean}
+   */
+  export let stickyHeader = true;
+
   /** Width of the component within the text well. */
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
   export let width: ContainerWidth = 'normal';
@@ -266,6 +272,7 @@
                 class:sort-descending="{sortable &&
                   sortField === field &&
                   sortDirection === 'descending'}"
+                class:sticky="{stickyHeader}"
                 data-field="{field}"
                 on:click="{handleSort}"
               >
@@ -343,10 +350,9 @@
   @import '../../scss/fonts/variables';
 
   section.table {
-    overflow-x: auto;
     table {
       background-color: transparent;
-      border-collapse: collapse;
+      border-collapse: separate;
       border-spacing: 0;
       width: 100%;
       font-size: 1rem;
@@ -370,18 +376,21 @@
       }
       thead {
         tr {
-          border-bottom: 1px solid
-            var(--theme-colour-text-primary, $tr-medium-grey);
           th {
-            position: sticky;
-            top: 0;
+            border-bottom: 1px solid
+              var(--theme-colour-text-primary, $tr-medium-grey);
             color: var(--theme-colour-text-primary, $tr-medium-grey);
+            background-color: var(--theme-colour-background, #fff);
             font-size: 0.85rem;
             font-weight: 500;
             text-transform: uppercase;
             letter-spacing: 0.06rem;
             line-height: 1.4;
             padding: 0.5rem 0.25rem 0.5rem 0;
+            &.sticky {
+              position: sticky;
+              top: 0;
+            }
             &.sortable {
               cursor: pointer;
             }
@@ -393,15 +402,13 @@
         }
       }
       tbody {
-        tr {
-          border-bottom: 1px solid
-            var(--theme-colour-brand-rules, $tr-muted-grey);
-        }
         td {
           font-size: 1rem;
           font-weight: 300;
           padding: 0.5rem 0.25rem 0.5rem 0;
           vertical-align: top;
+          border-bottom: 1px solid
+            var(--theme-colour-brand-rules, $tr-muted-grey);
           &.no-results {
             color: var(--theme-colour-text-secondary, $tr-muted-grey);
           }