From 17b2be1998f33bd07eb56ab9e1f0207d3d90c3b4 Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Thu, 16 Jun 2022 14:29:01 +0100
Subject: [PATCH 01/14] feat: add option to modal to choos bullet point style
 or inline (semicolon separated)

---
 .../filterable-table/TableModal.vue           |  16 +-
 src/components/filterable-table/constants.js  | 236 +++++++++---------
 2 files changed, 135 insertions(+), 117 deletions(-)

diff --git a/src/components/filterable-table/TableModal.vue b/src/components/filterable-table/TableModal.vue
index 0a83c74..e27e502 100644
--- a/src/components/filterable-table/TableModal.vue
+++ b/src/components/filterable-table/TableModal.vue
@@ -25,13 +25,14 @@
           <div
             v-if="item.showInModal"
             :key="modalContentIndex"
+            class="modal__item"
           >
             <span
               class="modal__item-name"
-              v-text="item.title"
+              v-text="item.title + ':'"
             />
 
-            <div
+            <span
               v-if="hasMultipleValues(item.value)"
               :key="modalContentIndex"
             >
@@ -54,7 +55,7 @@
               </ul>
 
               <ul
-                v-else
+                v-else-if="displayBullet"
                 class="modal__ul"
               >
                 <li
@@ -63,7 +64,8 @@
                   v-html="printValue(string)"
                 />
               </ul>
-            </div>
+              <span v-else>{{ item.value.join("; ") }}</span>
+            </span>
 
             <template v-else>
               <span
@@ -125,6 +127,8 @@ export default {
         '--font-family': this.config.fontFamily
       }
     },
+
+    displayBullet () { return this.config.modal.bulletDisplay },
   },
 
   mounted () {
@@ -228,6 +232,10 @@ export default {
     }
   }
 
+  &__item {
+    margin-bottom: rem-calc(10);
+  }
+
   &__content {
     position: relative;
   }
diff --git a/src/components/filterable-table/constants.js b/src/components/filterable-table/constants.js
index 96acd5d..fffb12a 100644
--- a/src/components/filterable-table/constants.js
+++ b/src/components/filterable-table/constants.js
@@ -1,8 +1,8 @@
-const UNEP_WCMC_BLUE = '#009FE3';
+const UNEP_WCMC_BLUE = '#009FE3'
 
 export const DEFAULT_OPTIONS = {
   columns: {
-    widths: ['1fr', '1fr', '300px', '1fr', '1fr', '100px'], // widths.length = attributes.length + 1
+    widths: ['1fr', '1fr', '300px', '1fr', '1fr', '100px'] // widths.length = attributes.length + 1
   },
   download: {
     bgColor: '#aaa',
@@ -64,7 +64,7 @@ export const DEFAULT_OPTIONS = {
     },
     filterOptions: {
       tickFill: UNEP_WCMC_BLUE,
-      handleLongLabels: 'truncate',
+      handleLongLabels: 'truncate'
     },
     trigger: {
       colorBg: '#fff',
@@ -83,8 +83,8 @@ export const DEFAULT_OPTIONS = {
       fontSize: '16px',
       height: '50px',
       paddingLeft: '24px',
-      paddingRight: '40px',
-    },
+      paddingRight: '40px'
+    }
   },
   headings: {
     bgColor: '#000000',
@@ -95,6 +95,7 @@ export const DEFAULT_OPTIONS = {
     fontWeight: 'normal'
   },
   modal: {
+    bulletDisplay: true,
     title: 'Optional modal title',
     closeBgColor: '#fff',
     closeBorderRadius: '0',
@@ -126,7 +127,7 @@ export const DEFAULT_OPTIONS = {
     borderStyle: 'solid',
     borderWidth: '1px',
     buttonHoverColor: UNEP_WCMC_BLUE,
-    buttonHoverColorArrow: '#fff',
+    buttonHoverColorArrow: '#fff'
   },
   sortable: false, // for a sortable table, pass :options="{sortable: true}" to FilterableTable
   text: {
@@ -135,203 +136,212 @@ export const DEFAULT_OPTIONS = {
 }
 
 export const DUMMY_DATA = {
-  "attributes": [
-    { field: "attribute-2", title: "attribute 2" },
-    { field: "attribute-4", title: "attribute 4" },
-    { field: "attribute-5", title: "attribute 5" },
-    { field: "attribute-6", title: "attribute 6" },
-    { field: "attribute-7", title: "attribute 7" }
+  attributes: [
+    { field: 'attribute-2', title: 'attribute 2' },
+    { field: 'attribute-4', title: 'attribute 4' },
+    { field: 'attribute-5', title: 'attribute 5' },
+    { field: 'attribute-6', title: 'attribute 6' },
+    { field: 'attribute-7', title: 'attribute 7' }
   ],
-  "filters": [
+  filters: [
     {
-      "name": "filter-1",
-      "options": ["Option 1", "Option 2", "Option 3 - this is an example very long label that needs to be handled"],
-      "title": "Filter 1",
-      "type": "multiple"
+      name: 'filter-1',
+      options: [
+        'Option 1',
+        'Option 2',
+        'Option 3 - this is an example very long label that needs to be handled'
+      ],
+      title: 'Filter 1',
+      type: 'multiple'
     },
     {
-      "name": "filter-2",
-      "options": ["Option 1", "Option 2", "Option 3"],
-      "title": "Filter 2",
-      "type": "multiple"
+      name: 'filter-2',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      title: 'Filter 2',
+      type: 'multiple'
     }
   ],
-  "legends": [
+  legends: [
     {
-      "name": "legend-1",
-      "options": ["Option 1", "Option 2", "Option 3 - this is an example very long label that needs to be handled"],
-      "title": "What a legend",
-      "type": "multiple"
+      name: 'legend-1',
+      options: [
+        'Option 1',
+        'Option 2',
+        'Option 3 - this is an example very long label that needs to be handled'
+      ],
+      title: 'What a legend',
+      type: 'multiple'
     },
     {
-      "name": "legend-1",
-      "options": ["Option 1", "Option 2", "Option 3"],
-      "title": "Legendary",
-      "type": "multiple"
+      name: 'legend-1',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      title: 'Legendary',
+      type: 'multiple'
     }
   ],
   items: [
     {
-      pageUrl: "http://google.com",
+      pageUrl: 'http://google.com',
       cells: [
         {
-          name: "attribute_1",
-          title: "Attribute 1",
-          value: " Attribute 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+          name: 'attribute_1',
+          title: 'Attribute 1',
+          value:
+            ' Attribute 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit',
           showInTable: false,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_2",
-          title: "Attribute 2",
-          value: " Attribute 2 Lorem ipsum",
+          name: 'attribute_2',
+          title: 'Attribute 2',
+          value: ' Attribute 2 Lorem ipsum',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_3",
-          title: "Attribute 3",
+          name: 'attribute_3',
+          title: 'Attribute 3',
           value: 3,
           showInTable: false,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_4",
-          title: "Attribute 4",
-          value: " Attribute 4 Lorem",
+          name: 'attribute_4',
+          title: 'Attribute 4',
+          value: ' Attribute 4 Lorem',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_5",
-          title: "Attribute 5",
-          value: " Attribute 5 Lorem ipsum dolor sit amet, consectetur",
+          name: 'attribute_5',
+          title: 'Attribute 5',
+          value: ' Attribute 5 Lorem ipsum dolor sit amet, consectetur',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_6",
-          title: "Attribute 6",
+          name: 'attribute_6',
+          title: 'Attribute 6',
           value: 6,
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_7",
-          title: "Attribute 7",
-          value: " Attribute 7 Lorem ipsum dolor sit",
+          name: 'attribute_7',
+          title: 'Attribute 7',
+          value: ' Attribute 7 Lorem ipsum dolor sit',
           showInTable: true,
           showInModal: true
-        }, 
+        }
       ]
     },
     {
-      pageUrl: '',  
-      cells:[
+      pageUrl: '',
+      cells: [
         {
-          name: "attribute_1",
-          title: "Attribute 1",
-          value: "1",
+          name: 'attribute_1',
+          title: 'Attribute 1',
+          value: '1',
           showInTable: false,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_2",
-          title: "Attribute 2",
-          value: ["http://google.com", "Item 2", "item 3"],
+          name: 'attribute_2',
+          title: 'Attribute 2',
+          value: ['http://google.com', 'Item 2', 'item 3'],
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_3",
-          title: "Attribute 3",
+          name: 'attribute_3',
+          title: 'Attribute 3',
           value: 3,
           showInTable: false,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_4",
-          title: "Attribute 4",
-          value: "Lorem ipsum",
+          name: 'attribute_4',
+          title: 'Attribute 4',
+          value: 'Lorem ipsum',
           showInTable: true,
           showInModal: true
         },
         {
-          name: "attribute_5",
-          title: "Attribute 5",
-          value: "Lorem ipsum dolor sit",
+          name: 'attribute_5',
+          title: 'Attribute 5',
+          value: 'Lorem ipsum dolor sit',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_6",
-          title: "Attribute 6",
+          name: 'attribute_6',
+          title: 'Attribute 6',
           value: 6,
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_7",
-          title: "Attribute 7",
-          value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+          name: 'attribute_7',
+          title: 'Attribute 7',
+          value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
           showInTable: true,
           showInModal: true
-        }, 
-      ],
+        }
+      ]
     },
     {
-      pageUrl: "",
+      pageUrl: '',
       cells: [
         {
-          name: "attribute_1",
-          title: "Attribute 1",
-          value: "Lorem ipsum",
+          name: 'attribute_1',
+          title: 'Attribute 1',
+          value: 'Lorem ipsum',
           showInTable: false,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_2",
-          title: "Attribute 2",
-          value: "Lorem ipsum dolor sit amet, consectetur",
+          name: 'attribute_2',
+          title: 'Attribute 2',
+          value: 'Lorem ipsum dolor sit amet, consectetur',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_3",
-          title: "Attribute 3",
+          name: 'attribute_3',
+          title: 'Attribute 3',
           value: 3,
           showInTable: false,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_4",
-          title: "Attribute 4",
-          value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+          name: 'attribute_4',
+          title: 'Attribute 4',
+          value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_5",
-          title: "Attribute 5",
-          value: "Lorem ipsum dolor sit amet, consectetur",
+          name: 'attribute_5',
+          title: 'Attribute 5',
+          value: 'Lorem ipsum dolor sit amet, consectetur',
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_6",
-          title: "Attribute 6",
+          name: 'attribute_6',
+          title: 'Attribute 6',
           value: 6,
           showInTable: true,
           showInModal: true
-        }, 
+        },
         {
-          name: "attribute_7",
-          title: "Attribute 7",
-          value: "Lorem Ipsum, lorem ipsum",
+          name: 'attribute_7',
+          title: 'Attribute 7',
+          value: 'Lorem Ipsum, lorem ipsum',
           showInTable: true,
           showInModal: true
-        }, 
+        }
       ]
     }
   ]
-}
\ No newline at end of file
+}

From 5fcc46ee29325d9be5c56bbea40ea55631f9df23 Mon Sep 17 00:00:00 2001
From: __joeburke <joseph_burke@outlook.com>
Date: Fri, 17 Jun 2022 11:18:21 +0100
Subject: [PATCH 02/14] chore: update CHANGELOG and version

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78fde57..c413848 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 2.1.2
+
+- Chore: run build and build-lib, update version in package.json
+
 ### 2.1.1
 
 - Chore: run build and build-lib, update version in package.json
diff --git a/package.json b/package.json
index 09c0275..e67d8b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"

From 2487d35288f31e6302cd6c9f0301df91cb3a9df4 Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Mon, 20 Jun 2022 13:14:54 +0100
Subject: [PATCH 03/14] feat: add hyperlink

---
 src/components/filterable-table/TableRow.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/filterable-table/TableRow.vue b/src/components/filterable-table/TableRow.vue
index 732612d..79f29a3 100644
--- a/src/components/filterable-table/TableRow.vue
+++ b/src/components/filterable-table/TableRow.vue
@@ -168,9 +168,10 @@ export default {
         })
 
         output = strings.join(', ')
+      return output
       }
 
-      return output
+      return isALink(value)
     },
 
     trim (phrase) {

From 53071f3a29b6ed338ab339ed9c18bcd9fa35b40b Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Tue, 21 Jun 2022 09:48:44 +0100
Subject: [PATCH 04/14] fix: add toString method and z-index

---
 src/components/filterable-table/TableFilterOption.vue | 1 +
 src/helpers/helpers-url.js                            | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/filterable-table/TableFilterOption.vue b/src/components/filterable-table/TableFilterOption.vue
index 6c3eb65..3343f4c 100644
--- a/src/components/filterable-table/TableFilterOption.vue
+++ b/src/components/filterable-table/TableFilterOption.vue
@@ -94,6 +94,7 @@ $sm-label-max-width: 80vw !default;
 }
 
 .checkbox {
+  z-index: 10;
   border: solid rem-calc(1) $checkbox-border-color;
   cursor: pointer;
   margin: 0;
diff --git a/src/helpers/helpers-url.js b/src/helpers/helpers-url.js
index 14e9b3c..ad517f4 100644
--- a/src/helpers/helpers-url.js
+++ b/src/helpers/helpers-url.js
@@ -1,5 +1,5 @@
 export const isALink = (string) => {
-  if(string.includes('http')){
+  if(string.toString().includes('http')){
     return `<a href="${string}" title="Visit ${string}" target="_blank" />${string}</a>`
   } else {
     return string

From 24f83eed1b9b0ad52ee1e4f88c5a805c9cc0d68f Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Tue, 21 Jun 2022 22:03:18 +0100
Subject: [PATCH 05/14] feat: implement pinning of chosen option

---
 .../filterable-table/TableFilter.vue          | 520 +++++++++---------
 1 file changed, 270 insertions(+), 250 deletions(-)

diff --git a/src/components/filterable-table/TableFilter.vue b/src/components/filterable-table/TableFilter.vue
index 8f8d659..ff93566 100644
--- a/src/components/filterable-table/TableFilter.vue
+++ b/src/components/filterable-table/TableFilter.vue
@@ -1,18 +1,14 @@
 <template>
-  <div 
-    v-if="hasOptions" 
-    class="filter"
-    :style="cssVariables"
-  >
+  <div v-if="hasOptions" class="filter" :style="cssVariables">
     <p
-      @click="openSelect()" 
-      class="trigger" 
-      :class="{ 'active' : isOpen , 'has-selected' : hasSelected }"
+      @click="openSelect()"
+      class="trigger"
+      :class="{ active: isOpen, 'has-selected': hasSelected }"
       :style="cssVariables"
     >
       {{ title }}
 
-      <span 
+      <span
         v-show="hasSelected"
         class="option-total"
         v-text="totalSelectedOptions"
@@ -20,11 +16,12 @@
 
       <svg-chevron class="trigger__icon" />
     </p>
-    
-    <div class="options" :class="{ 'active' : isOpen }">
+
+    <div class="options" :class="{ active: isOpen }">
       <ul class="options-ul" :class="filterClass">
-        <table-filter-option 
-          v-for="option in options" 
+        <!-- v-for="option in options" -->
+        <table-filter-option
+          v-for="option in optionsList"
           :key="option._uid"
           :option="option"
           :selected="false"
@@ -33,232 +30,246 @@
       </ul>
 
       <div class="buttons">
-        <button
-          @click="clear"
-          class="button--clear"
-          v-text="'Clear'"
-        />
+        <button @click="clear" class="button--clear" v-text="'Clear'" />
 
-        <button
-          @click="cancel"
-          class="button--cancel"
-          v-text="'Cancel'"
-        />
+        <button @click="cancel" class="button--cancel" v-text="'Cancel'" />
 
-        <button
-          @click="apply"
-          class="button--apply"
-          v-text="'Apply'"
-        />
+        <button @click="apply" class="button--apply" v-text="'Apply'" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import TableFilterOption from './TableFilterOption.vue'
-import SvgChevron from './svgs/SvgChevron.vue'
-import { createNamespacedHelpers } from 'vuex'
-const { mapGetters } = createNamespacedHelpers('filterableTable')
+import TableFilterOption from "./TableFilterOption.vue";
+import SvgChevron from "./svgs/SvgChevron.vue";
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters } = createNamespacedHelpers("filterableTable");
+
+export default {
+  name: "TableFilter",
+
+  components: {
+    TableFilterOption,
+    SvgChevron,
+  },
+
+  props: {
+    name: {
+      type: String,
+    },
+    tableId: {
+      required: true,
+      type: Number,
+    },
+    title: {
+      required: true,
+      type: String,
+    },
+    options: {
+      type: Array,
+    },
+    type: {
+      type: String,
+    },
+  },
 
-  export default {
-    name: 'TableFilter',
+  data() {
+    return {
+      children: this.$children,
+      isOpen: false,
+      activeOptions: [],
+    };
+  },
 
-    components: { 
-      TableFilterOption,
-      SvgChevron
+  computed: {
+    ...mapGetters(["getSelectedSort"]),
+
+    cssVariables() {
+      return {
+        "--color-bg": this.config.trigger.colorBg,
+        "--color-bg-active": this.config.trigger.colorBgActive,
+        "--color-bg-hover": this.config.trigger.colorBgHover,
+        "--color-bg-selected": this.config.trigger.colorBgSelected,
+        "--color-border": this.config.trigger.colorBorder,
+        "--color-border-active": this.config.trigger.colorBorderActive,
+        "--color-border-hover": this.config.trigger.colorBorderHover,
+        "--color-border-selected": this.config.trigger.colorBorderSelected,
+        "--color-text": this.config.trigger.colorText,
+        "--color-text-active": this.config.trigger.colorTextActive,
+        "--color-text-hover": this.config.trigger.colorTextHover,
+        "--color-text-selected": this.config.trigger.colorTextSelected,
+        "--border-radius": this.config.trigger.borderRadius,
+        "--font-size": this.config.trigger.fontSize,
+        "--height": this.config.trigger.height,
+        "--padding-left": this.config.trigger.paddingLeft,
+        "--padding-right": this.config.trigger.paddingRight,
+
+        "--apply-border-color": this.config.buttonApply.borderColor,
+        "--apply-border-radius": this.config.buttonApply.borderRadius,
+        "--apply-border-style": this.config.buttonApply.borderStyle,
+        "--apply-border-width": this.config.buttonApply.borderWidth,
+        "--apply-color-bg": this.config.buttonApply.colorBg,
+        "--apply-color-bg-hover": this.config.buttonApply.colorBgHover,
+        "--apply-color-border": this.config.buttonApply.colorBorder,
+        "--apply-color-text": this.config.buttonApply.colorText,
+        "--apply-color-text-hover": this.config.buttonApply.colorTextHover,
+        "--apply-height": this.config.buttonApply.height,
+        "--apply-padding-left": this.config.buttonApply.paddingLeft,
+        "--apply-padding-right": this.config.buttonApply.paddingRight,
+        "--apply-text-transform": this.config.buttonApply.textTransform,
+
+        "--cancel-border-color": this.config.buttonCancel.borderColor,
+        "--cancel-border-radius": this.config.buttonCancel.borderRadius,
+        "--cancel-border-style": this.config.buttonCancel.borderStyle,
+        "--cancel-border-width": this.config.buttonCancel.borderWidth,
+        "--cancel-color-bg": this.config.buttonCancel.colorBg,
+        "--cancel-color-bg-hover": this.config.buttonCancel.colorBgHover,
+        "--cancel-color-text": this.config.buttonCancel.colorText,
+        "--cancel-color-text-hover": this.config.buttonCancel.colorTextHover,
+        "--cancel-height": this.config.buttonCancel.height,
+        "--cancel-padding-left": this.config.buttonCancel.paddingLeft,
+        "--cancel-padding-right": this.config.buttonCancel.paddingRight,
+        "--cancel-text-transform": this.config.buttonCancel.textTransform,
+
+        "--clear-border-color": this.config.buttonClear.borderColor,
+        "--clear-border-radius": this.config.buttonClear.borderRadius,
+        "--clear-border-style": this.config.buttonClear.borderStyle,
+        "--clear-border-width": this.config.buttonClear.borderWidth,
+        "--clear-color-bg": this.config.buttonClear.colorBg,
+        "--clear-color-bg-hover": this.config.buttonClear.colorBgHover,
+        "--clear-color-text": this.config.buttonClear.colorText,
+        "--clear-color-text-hover": this.config.buttonClear.colorTextHover,
+        "--clear-height": this.config.buttonClear.height,
+        "--clear-padding-left": this.config.buttonClear.paddingLeft,
+        "--clear-padding-right": this.config.buttonClear.paddingRight,
+        "--clear-text-transform": this.config.buttonClear.textTransform,
+      };
+    },
+    // only show the select if the filter is a real filter and not just a table title
+    hasOptions() {
+      return this.options != undefined || this.name != undefined;
+    },
+    config() {
+      const config = this.$store.getters["filterableTable/options"](
+        this.tableId
+      );
+      return config.filters;
     },
 
-    props: {
-      name: {
-        type: String
-      },
-      tableId: {
-        required: true,
-        type: Number,
-      },
-      title: {
-        required: true, 
-        type: String
-      },
-      options: {
-        type: Array
-      },
-      type: {
-        type: String
-      }
+    selectedOptions() {
+      let selectedArray = [];
+
+      this.children.forEach((child) => {
+        if (child.isSelected) {
+          selectedArray.push(child.option);
+        }
+      });
+
+      return selectedArray;
     },
 
-    data () {
-      return {
-        children: this.$children,
-        isOpen: false,
-        activeOptions: []
-      }
+    hasSelected() {
+      return this.totalSelectedOptions > 0;
     },
 
-    computed: {
-      ...mapGetters([
-        'getSelectedSort'
-      ]),
-
-      cssVariables () {
-        return {
-          '--color-bg'                : this.config.trigger.colorBg,
-          '--color-bg-active'         : this.config.trigger.colorBgActive,
-          '--color-bg-hover'          : this.config.trigger.colorBgHover,
-          '--color-bg-selected'       : this.config.trigger.colorBgSelected,
-          '--color-border'            : this.config.trigger.colorBorder,
-          '--color-border-active'     : this.config.trigger.colorBorderActive,
-          '--color-border-hover'      : this.config.trigger.colorBorderHover,
-          '--color-border-selected'   : this.config.trigger.colorBorderSelected,
-          '--color-text'              : this.config.trigger.colorText,
-          '--color-text-active'       : this.config.trigger.colorTextActive,
-          '--color-text-hover'        : this.config.trigger.colorTextHover,
-          '--color-text-selected'     : this.config.trigger.colorTextSelected,
-          '--border-radius'           : this.config.trigger.borderRadius,
-          '--font-size'                  : this.config.trigger.fontSize,
-          '--height'                  : this.config.trigger.height,
-          '--padding-left'            : this.config.trigger.paddingLeft,
-          '--padding-right'           : this.config.trigger.paddingRight,
-          
-          '--apply-border-color'      : this.config.buttonApply.borderColor,
-          '--apply-border-radius'     : this.config.buttonApply.borderRadius,
-          '--apply-border-style'      : this.config.buttonApply.borderStyle,
-          '--apply-border-width'      : this.config.buttonApply.borderWidth,
-          '--apply-color-bg'          : this.config.buttonApply.colorBg,
-          '--apply-color-bg-hover'    : this.config.buttonApply.colorBgHover,
-          '--apply-color-border'      : this.config.buttonApply.colorBorder,
-          '--apply-color-text'        : this.config.buttonApply.colorText,
-          '--apply-color-text-hover'  : this.config.buttonApply.colorTextHover,
-          '--apply-height'            : this.config.buttonApply.height,
-          '--apply-padding-left'      : this.config.buttonApply.paddingLeft,
-          '--apply-padding-right'     : this.config.buttonApply.paddingRight,
-          '--apply-text-transform'    : this.config.buttonApply.textTransform,
-
-          '--cancel-border-color'     : this.config.buttonCancel.borderColor,
-          '--cancel-border-radius'    : this.config.buttonCancel.borderRadius,
-          '--cancel-border-style'     : this.config.buttonCancel.borderStyle,
-          '--cancel-border-width'     : this.config.buttonCancel.borderWidth,
-          '--cancel-color-bg'         : this.config.buttonCancel.colorBg,
-          '--cancel-color-bg-hover'   : this.config.buttonCancel.colorBgHover,
-          '--cancel-color-text'       : this.config.buttonCancel.colorText,
-          '--cancel-color-text-hover' : this.config.buttonCancel.colorTextHover,
-          '--cancel-height'           : this.config.buttonCancel.height,
-          '--cancel-padding-left'     : this.config.buttonCancel.paddingLeft,
-          '--cancel-padding-right'    : this.config.buttonCancel.paddingRight,
-          '--cancel-text-transform'   : this.config.buttonCancel.textTransform,
-
-          '--clear-border-color'      : this.config.buttonClear.borderColor,
-          '--clear-border-radius'     : this.config.buttonClear.borderRadius,
-          '--clear-border-style'      : this.config.buttonClear.borderStyle,
-          '--clear-border-width'      : this.config.buttonClear.borderWidth,
-          '--clear-color-bg'          : this.config.buttonClear.colorBg,
-          '--clear-color-bg-hover'    : this.config.buttonClear.colorBgHover,
-          '--clear-color-text'        : this.config.buttonClear.colorText,
-          '--clear-color-text-hover'  : this.config.buttonClear.colorTextHover,
-          '--clear-height'            : this.config.buttonClear.height,
-          '--clear-padding-left'      : this.config.buttonClear.paddingLeft,
-          '--clear-padding-right'     : this.config.buttonClear.paddingRight,
-          '--clear-text-transform'    : this.config.buttonClear.textTransform,
-        }
-      },
-      // only show the select if the filter is a real filter and not just a table title
-      hasOptions () {
-        return this.options != undefined || this.name != undefined
-      },
-      config () {
-        const config = this.$store.getters['filterableTable/options'](this.tableId)
-        return config.filters
-      },
-
-      selectedOptions () {
-        let selectedArray = []
-
-        this.children.forEach(child => {
-          if(child.isSelected){ 
-            selectedArray.push(child.option) 
-          }
-        })
+    totalSelectedOptions() {
+      return this.selectedOptions.length;
+    },
 
-        return selectedArray
-      },
+    filterClass() {
+      return (
+        "filter__options--" + this.name.replace("_| |(|)", "-").toLowerCase()
+      );
+    },
 
-      hasSelected () {
-        return this.totalSelectedOptions > 0
-      },
+    optionsList() {
+      let optionsList = [];
+      let optionsListToDisplay = [];
+      if (this.config.optionToPinAtTheTop) {
+        this.config.optionToPinAtTheTop.forEach((filter) => {
+          if (filter.filterName === this.title) {
+            const optionsWithoutPinnedOption = this.options.filter(
+              (option) => option !== filter.option
+            );
+            const optionToPin = this.options.find(
+              (option) => option === filter.option
+            );
+            optionsListToDisplay = optionsWithoutPinnedOption;
+            optionsListToDisplay.unshift(optionToPin);
+          }
+        });
+      }
+      optionsList =
+        optionsListToDisplay.length == 0 ? this.options : optionsListToDisplay;
+      return optionsList;
+    },
+  },
 
-      totalSelectedOptions () {
-        return this.selectedOptions.length
-      },
+  methods: {
+    openSelect() {
+      // if the filter is open is close it, else open it and close the others
+      if (this.isOpen) {
+        this.isOpen = false;
+      } else {
+        this.isOpen = true;
 
-      filterClass () {
-        return 'filter__options--' + this.name.replace('_| |(|)', '-').toLowerCase()
+        this.$root.$emit("clickDropdown", this.name, this.tableId);
       }
     },
 
-    methods: {
-      openSelect () {
-        // if the filter is open is close it, else open it and close the others
-        if(this.isOpen){
-          this.isOpen = false
-        } else {
-          this.isOpen = true
+    closeSelect() {
+      this.isOpen = false;
+    },
 
-          this.$root.$emit('clickDropdown', this.name, this.tableId)  
-        }
-      },
-
-      closeSelect () {
-        this.isOpen = false
-      },
-
-      cancel() {
-        this.closeSelect()
-        
-        // reset each option to the correct state
-        this.children.forEach(child => {
-          child.isSelected = this.activeOptions.includes(child.option) ? true : false
-        })
-
-        // const eventLabel = `Page: PAME - Filter title: ${this.title} - Button: cancel`
-        // this.$ga.event('Button', 'click', eventLabel)
-      },
-
-      clear () {
-        // set the isSelected property on all options to false
-        this.children.forEach(child => {
-          child.isSelected = false
-        })
-
-        //todo sort out event tracking
-        // const eventLabel = `Page: PAME - Filter title: ${this.title} - Button: clear`
-        // this.$ga.event('Button', 'click', eventLabel)
-      },
-
-      apply () {
-        this.closeSelect()
-        this.activeOptions = this.selectedOptions
-
-        const obj = {
-          tableId: this.tableId,
-          newOptions: {
-            name: this.name,
-            options: this.activeOptions
-          },
-          sortObj: this.getSelectedSort(this.tableId),
-          requestedPage: 1
-        }
+    cancel() {
+      this.closeSelect();
 
-        this.$store.dispatch('filterableTable/applyNewFilterOptions', obj)
-        this.$root.$emit('getNewItems')
+      // reset each option to the correct state
+      this.children.forEach((child) => {
+        child.isSelected = this.activeOptions.includes(child.option)
+          ? true
+          : false;
+      });
 
-        //TODO - sort out tracking
-        // const eventLabel = `Page: PAME - Filter title: ${this.title} - Button: Apply`
-        // this.$ga.event('Button', 'click', eventLabel)
-      }
-    }
-  }
+      // const eventLabel = `Page: PAME - Filter title: ${this.title} - Button: cancel`
+      // this.$ga.event('Button', 'click', eventLabel)
+    },
+
+    clear() {
+      // set the isSelected property on all options to false
+      this.children.forEach((child) => {
+        child.isSelected = false;
+      });
+
+      //todo sort out event tracking
+      // const eventLabel = `Page: PAME - Filter title: ${this.title} - Button: clear`
+      // this.$ga.event('Button', 'click', eventLabel)
+    },
+
+    apply() {
+      this.closeSelect();
+      this.activeOptions = this.selectedOptions;
+
+      const obj = {
+        tableId: this.tableId,
+        newOptions: {
+          name: this.name,
+          options: this.activeOptions,
+        },
+        sortObj: this.getSelectedSort(this.tableId),
+        requestedPage: 1,
+      };
+
+      this.$store.dispatch("filterableTable/applyNewFilterOptions", obj);
+      this.$root.$emit("getNewItems");
+
+      //TODO - sort out tracking
+      // const eventLabel = `Page: PAME - Filter title: ${this.title} - Button: Apply`
+      // this.$ga.event('Button', 'click', eventLabel)
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -271,7 +282,7 @@ $table-filter-trigger-border-color: black !default;
 
 // mixins
 @mixin svg-color($color) {
-  fill: $color; 
+  fill: $color;
   stroke: $color;
 }
 
@@ -283,8 +294,8 @@ $table-filter-trigger-border-color: black !default;
   display: inline-block;
   position: relative;
 
-  @include breakpoint($medium) { 
-    margin-right: rem-calc(20); 
+  @include breakpoint($medium) {
+    margin-right: rem-calc(20);
     margin-bottom: 0;
   }
 }
@@ -315,50 +326,53 @@ $table-filter-trigger-border-color: black !default;
     font-size: rem-calc(16);
   }
 
-  &:hover { 
+  &:hover {
     background-color: #333; // IE 11
     background-color: var(--color-bg-hover);
-    border-color: ''; // IE11
+    border-color: ""; // IE11
     border-color: var(--color-border-hover);
     color: #fff; // IE11
     color: var(--color-text-hover);
 
-    ::v-deep .svg-chevron { 
+    ::v-deep .svg-chevron {
       @include svg-color(#fff); //IE11
-      @include svg-color(--var(--color-text-hover)); 
+      @include svg-color(--var(--color-text-hover));
     }
   }
-      
+
   &.active {
-    background-color: #009FE3; // IE11
+    background-color: #009fe3; // IE11
     background-color: var(--color-bg-active);
-    border-color: ''; // IE11
+    border-color: ""; // IE11
     border-color: var(--color-border-active);
     color: #fff; // IE11
     color: var(--color-text-active);
 
-    ::v-deep .svg-chevron { 
+    ::v-deep .svg-chevron {
       @include svg-color(#fff); //IE11
-      @include svg-color(--var(--color-text-hover)); 
+      @include svg-color(--var(--color-text-hover));
     }
   }
 
   &.has-selected {
-    background-color: #009FE3; // IE11
+    background-color: #009fe3; // IE11
     background-color: var(--color-bg-selected);
     color: #fff; // IE11
     color: var(--color-text-selected);
 
-    @include breakpoint($small){ 
+    @include breakpoint($small) {
       padding-right: rem-calc(36); // IE11
       padding-right: var(--padding-right);
     }
-    
-    .trigger__icon { visibility: hidden; }
+
+    .trigger__icon {
+      visibility: hidden;
+    }
   }
 
   &__icon {
-    width: rem-calc(10); height: rem-calc(6);
+    width: rem-calc(10);
+    height: rem-calc(6);
 
     display: block;
     position: absolute;
@@ -368,9 +382,9 @@ $table-filter-trigger-border-color: black !default;
     transform: translateY(-50%) rotateZ(90deg);
   }
 
-  ::v-deep .svg-chevron { 
+  ::v-deep .svg-chevron {
     @include svg-color(#000); //IE11
-    @include svg-color(--var(--color-text)); 
+    @include svg-color(--var(--color-text));
     stroke-width: 3px;
   }
 }
@@ -382,12 +396,13 @@ $table-filter-trigger-border-color: black !default;
     background-color: #fff; // IE11
     background-color: var(--color-text-active);
     border-radius: 100%;
-    color: #009FE3; // IE11
+    color: #009fe3; // IE11
     color: var(--color-bg-active);
     font-size: rem-calc(14);
     line-height: $total-width-mobile;
     text-align: center;
-    width: $total-width-mobile; height: $total-width-mobile;
+    width: $total-width-mobile;
+    height: $total-width-mobile;
 
     display: block;
     position: absolute;
@@ -397,10 +412,11 @@ $table-filter-trigger-border-color: black !default;
     transform: translateY(-50%);
   }
 
-  @include breakpoint($medium){ 
+  @include breakpoint($medium) {
     font-size: rem-calc(18);
     line-height: $total-width-desktop;
-    width: $total-width-desktop; height: $total-width-desktop;
+    width: $total-width-desktop;
+    height: $total-width-desktop;
   }
 }
 
@@ -408,20 +424,22 @@ $table-filter-trigger-border-color: black !default;
   background-color: white;
   font-size: rem-calc(16);
   padding: rem-calc(30 25);
-  width: 100%; height: 100vh;
-  
+  width: 100%;
+  height: 100vh;
+
   display: none;
   position: fixed;
   top: 0;
   left: 0;
-  
+
   z-index: 1;
 
   @include breakpoint($small) {
     border: solid rem-calc(1) black;
     margin-top: rem-calc(18);
     min-width: rem-calc(460);
-    width: auto; height: auto;
+    width: auto;
+    height: auto;
 
     position: absolute;
     top: auto;
@@ -440,7 +458,7 @@ $table-filter-trigger-border-color: black !default;
     max-height: 85vh;
     overflow-y: auto;
     overflow-x: hidden; //for IE11
-    white-space: nowrap; 
+    white-space: nowrap;
 
     @include breakpoint($small) {
       max-height: 40vh;
@@ -457,11 +475,13 @@ $table-filter-trigger-border-color: black !default;
 
 .button {
   &--download {
-    @include breakpoint($small) { margin-left: auto; }
+    @include breakpoint($small) {
+      margin-left: auto;
+    }
   }
 }
 
-$buttons: ('apply', 'cancel', 'clear', '');
+$buttons: ("apply", "cancel", "clear", "");
 
 @for $i from 1 to length($buttons) {
   .button--#{nth($buttons, $i)} {
@@ -477,9 +497,9 @@ $buttons: ('apply', 'cancel', 'clear', '');
 
     height: 50px; // IE11
 
-    @if nth($buttons, $i) == 'apply' {
-      border-color: #009FE3; // IE11
-      background-color: #009FE3; // IE11
+    @if nth($buttons, $i) == "apply" {
+      border-color: #009fe3; // IE11
+      background-color: #009fe3; // IE11
     }
 
     border-color: var(--#{nth($buttons, $i)}-border-color);
@@ -495,16 +515,16 @@ $buttons: ('apply', 'cancel', 'clear', '');
 
     height: var(--#{nth($buttons, $i)}-height);
 
-    @if nth($buttons, $i) == 'cancel' {
-      margin: rem-calc(0 20 0) auto; 
+    @if nth($buttons, $i) == "cancel" {
+      margin: rem-calc(0 20 0) auto;
     }
 
     &:hover {
       background-color: #333; // IE11
       background-color: var(--#{nth($buttons, $i)}-color-bg-hover);
-      color: #fff;  // IE11
+      color: #fff; // IE11
       color: var(--#{nth($buttons, $i)}-color-text-hover);
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

From 30500e321b5fe2741ea769409a4a17d41502ca0d Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Tue, 21 Jun 2022 22:10:01 +0100
Subject: [PATCH 06/14] fix: remove whitespaces

---
 src/components/filterable-table/TableFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/filterable-table/TableFilter.vue b/src/components/filterable-table/TableFilter.vue
index ff93566..8d7fd55 100644
--- a/src/components/filterable-table/TableFilter.vue
+++ b/src/components/filterable-table/TableFilter.vue
@@ -188,7 +188,7 @@ export default {
       let optionsListToDisplay = [];
       if (this.config.optionToPinAtTheTop) {
         this.config.optionToPinAtTheTop.forEach((filter) => {
-          if (filter.filterName === this.title) {
+          if (filter.filterName === this.title.trim()) {
             const optionsWithoutPinnedOption = this.options.filter(
               (option) => option !== filter.option
             );

From 606466fb2af63c1ad3272afef4f2d1e8a9ae6aab Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Thu, 23 Jun 2022 08:54:08 +0100
Subject: [PATCH 07/14] fix: make link in the modal hyperlink, make hyperlinks
 blue

---
 src/components/filterable-table/TableModal.vue | 2 +-
 src/helpers/helpers-url.js                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/filterable-table/TableModal.vue b/src/components/filterable-table/TableModal.vue
index 0a83c74..e86caf5 100644
--- a/src/components/filterable-table/TableModal.vue
+++ b/src/components/filterable-table/TableModal.vue
@@ -74,7 +74,7 @@
                 v-text="item.value"
               />
 
-              <span v-else v-text="item.value" />
+              <span v-else v-html="printValue(item.value)" />
             </template>
           </div>
         </template>
diff --git a/src/helpers/helpers-url.js b/src/helpers/helpers-url.js
index ad517f4..d487bd0 100644
--- a/src/helpers/helpers-url.js
+++ b/src/helpers/helpers-url.js
@@ -1,6 +1,6 @@
 export const isALink = (string) => {
   if(string.toString().includes('http')){
-    return `<a href="${string}" title="Visit ${string}" target="_blank" />${string}</a>`
+    return `<a href="${string}" style="color:blue;" title="Visit ${string}" target="_blank" />${string}</a>`
   } else {
     return string
   }

From b45082f9218cae8f94ed65911b6ee906c3b8e75b Mon Sep 17 00:00:00 2001
From: __joeburke <joseph_burke@outlook.com>
Date: Fri, 24 Jun 2022 08:37:11 +0100
Subject: [PATCH 08/14] feat: implement ability to hide "more content" column
 via options prop

---
 dev/Serve.vue                                       |  3 +++
 src/components/filterable-table/FilterableTable.vue | 10 +++++++---
 src/components/filterable-table/TableHead.vue       |  9 ++++++++-
 src/components/filterable-table/TableRow.vue        |  6 +++++-
 src/components/filterable-table/constants.js        |  7 ++++---
 src/components/filterable-table/store.js            |  6 +++++-
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/dev/Serve.vue b/dev/Serve.vue
index bf0cde5..b4bd033 100644
--- a/dev/Serve.vue
+++ b/dev/Serve.vue
@@ -6,6 +6,9 @@
     
     <filterable-table
       endpoint-download="/"
+      :options="{ 
+        hideMoreContentColumn: true
+      }"
     >
     <!-- 
       <template #sort-icon>
diff --git a/src/components/filterable-table/FilterableTable.vue b/src/components/filterable-table/FilterableTable.vue
index 306849d..9fd18e4 100644
--- a/src/components/filterable-table/FilterableTable.vue
+++ b/src/components/filterable-table/FilterableTable.vue
@@ -140,7 +140,8 @@ export default {
       isSortable: 'isSortable',
       requestedPage: 'getRequestedPage',
       selectedFilterOptions: 'getSelectedFilterOptions',
-      selectedSort: 'getSelectedSort'
+      selectedSort: 'getSelectedSort',
+      isMoreContentColumnDisplayed: 'isMoreContentColumnDisplayed'
     }),
 
     cssVariables () {
@@ -237,9 +238,12 @@ export default {
     },
 
     getTotalTableColumns () {
-      // Add an additional column for the "View more" button
-      if (this.headings.length > 0) {
+      if (this.headings.length < 1) { return }
+
+      if (this.isMoreContentColumnDisplayed(this.id)) {
         this.totalColumns = this.headings.length + 1
+      } else {
+        this.totalColumns = this.headings.length
       }
     },
 
diff --git a/src/components/filterable-table/TableHead.vue b/src/components/filterable-table/TableHead.vue
index a3cb6d1..28c3170 100644
--- a/src/components/filterable-table/TableHead.vue
+++ b/src/components/filterable-table/TableHead.vue
@@ -17,6 +17,7 @@
       
       <!-- empty heading for 'more content' button -->
       <table-heading
+        v-if="this.isMoreContentColumnDisplayed(this.tableId)"
         :tableId="tableId"
         :style="`grid-column: ${totalColumns}`"
       />
@@ -25,10 +26,12 @@
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
 import TableHeading from './TableHeading.vue'
-
 import mixinColumns from './mixins/mixin-columns'
 
+const { mapGetters } = createNamespacedHelpers('filterableTable')
+
 export default {
   name: 'TableHead',
 
@@ -41,10 +44,12 @@ export default {
       required: true,
       type: Array
     },
+
     tableId: {
       required: true,
       type: Number,
     },
+
     totalColumns: {
       required: true,
       type: Number,
@@ -59,6 +64,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['isMoreContentColumnDisplayed']),
+
     cssVariables () {
       return {
         'grid-template-columns': this.gridColumnsCss,
diff --git a/src/components/filterable-table/TableRow.vue b/src/components/filterable-table/TableRow.vue
index 732612d..4559adc 100644
--- a/src/components/filterable-table/TableRow.vue
+++ b/src/components/filterable-table/TableRow.vue
@@ -40,6 +40,7 @@
     </div>
 
     <span
+      v-if="this.isMoreContentColumnDisplayed(this.tableId)" 
       class="cell"
       :style="`grid-column: ${totalColumns}`"
     >
@@ -104,7 +105,10 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['options']),
+    ...mapGetters([
+      'options',
+      'isMoreContentColumnDisplayed'
+    ]),
 
     cssVariablesAndStyles () {
       return {
diff --git a/src/components/filterable-table/constants.js b/src/components/filterable-table/constants.js
index fffb12a..d04371c 100644
--- a/src/components/filterable-table/constants.js
+++ b/src/components/filterable-table/constants.js
@@ -4,6 +4,7 @@ export const DEFAULT_OPTIONS = {
   columns: {
     widths: ['1fr', '1fr', '300px', '1fr', '1fr', '100px'] // widths.length = attributes.length + 1
   },
+  hideMoreContentColumn: true,
   download: {
     bgColor: '#aaa',
     bgColorHover: UNEP_WCMC_BLUE,
@@ -181,7 +182,7 @@ export const DUMMY_DATA = {
   ],
   items: [
     {
-      pageUrl: 'http://google.com',
+      pageUrl: false,
       cells: [
         {
           name: 'attribute_1',
@@ -236,7 +237,7 @@ export const DUMMY_DATA = {
       ]
     },
     {
-      pageUrl: '',
+      pageUrl: false,
       cells: [
         {
           name: 'attribute_1',
@@ -290,7 +291,7 @@ export const DUMMY_DATA = {
       ]
     },
     {
-      pageUrl: '',
+      pageUrl: false,
       cells: [
         {
           name: 'attribute_1',
diff --git a/src/components/filterable-table/store.js b/src/components/filterable-table/store.js
index 128cea5..19f4831 100644
--- a/src/components/filterable-table/store.js
+++ b/src/components/filterable-table/store.js
@@ -44,7 +44,11 @@ export const storeFilterableTable = {
 
     getSelectedSort: state => id => {
       return state.tables[id].selectedSort
-    }
+    },
+    
+    isMoreContentColumnDisplayed: state => id => {
+      return !state.tables[id].options.hideMoreContentColumn
+    },
   },
 
   actions: {

From e8ca5228bf90258c9b314497b5a27622e83b0ffd Mon Sep 17 00:00:00 2001
From: __joeburke <joseph_burke@outlook.com>
Date: Fri, 24 Jun 2022 08:52:25 +0100
Subject: [PATCH 09/14] refactor: display hideMoreContentColumn as comment

This way it won't actually hide the column by default
Comment will still provide example usage
---
 dev/Serve.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/dev/Serve.vue b/dev/Serve.vue
index b4bd033..ae78e9d 100644
--- a/dev/Serve.vue
+++ b/dev/Serve.vue
@@ -6,10 +6,14 @@
     
     <filterable-table
       endpoint-download="/"
+    >
+    <!-- 
+      Example of an options prop that would disable the "show more content" column for the whole table
       :options="{ 
         hideMoreContentColumn: true
       }"
-    >
+    -->
+
     <!-- 
       <template #sort-icon>
         <span>This element is used as the sorting icon now!</span>

From 219f7cf5a149d3efd92da9bfcf4c83f789a5da3b Mon Sep 17 00:00:00 2001
From: __joeburke <joseph_burke@outlook.com>
Date: Fri, 24 Jun 2022 08:53:57 +0100
Subject: [PATCH 10/14] fix: set hideMoreContentColumn to false in constants.js

---
 src/components/filterable-table/constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/filterable-table/constants.js b/src/components/filterable-table/constants.js
index d04371c..8d4b9d8 100644
--- a/src/components/filterable-table/constants.js
+++ b/src/components/filterable-table/constants.js
@@ -4,7 +4,7 @@ export const DEFAULT_OPTIONS = {
   columns: {
     widths: ['1fr', '1fr', '300px', '1fr', '1fr', '100px'] // widths.length = attributes.length + 1
   },
-  hideMoreContentColumn: true,
+  hideMoreContentColumn: false,
   download: {
     bgColor: '#aaa',
     bgColorHover: UNEP_WCMC_BLUE,

From 511077995ced28200bf20ccb892d6358ac755d19 Mon Sep 17 00:00:00 2001
From: __joeburke <joseph_burke@outlook.com>
Date: Fri, 24 Jun 2022 08:55:44 +0100
Subject: [PATCH 11/14] fix: restore original pageUrls in constants.js

---
 src/components/filterable-table/constants.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/filterable-table/constants.js b/src/components/filterable-table/constants.js
index 8d4b9d8..9f3f0a9 100644
--- a/src/components/filterable-table/constants.js
+++ b/src/components/filterable-table/constants.js
@@ -182,7 +182,7 @@ export const DUMMY_DATA = {
   ],
   items: [
     {
-      pageUrl: false,
+      pageUrl: 'http://google.com',
       cells: [
         {
           name: 'attribute_1',
@@ -237,7 +237,7 @@ export const DUMMY_DATA = {
       ]
     },
     {
-      pageUrl: false,
+      pageUrl: '',
       cells: [
         {
           name: 'attribute_1',
@@ -291,7 +291,7 @@ export const DUMMY_DATA = {
       ]
     },
     {
-      pageUrl: false,
+      pageUrl: '',
       cells: [
         {
           name: 'attribute_1',

From 4333963e9f1c8b49c922bb3516d76d2ef986fecf Mon Sep 17 00:00:00 2001
From: __joeburke <joseph_burke@outlook.com>
Date: Fri, 24 Jun 2022 09:03:30 +0100
Subject: [PATCH 12/14] chore: update CHANGELOG.md and version number

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c413848..b74b218 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### 2.2.0
+
+- Feature:
+  - Allow the "more content" column (the rightmost column where users can either open a modal or be redirected to a URL) to be disabled
+  - Implemented via a key in the existing `options` prop: `hideMoreContentColumn`, which can be set to true to remove the column entirely
+  - Provide example usage comment in Serve.vue
+
 ### 2.1.2
 
 - Chore: run build and build-lib, update version in package.json
diff --git a/package.json b/package.json
index e67d8b8..cc90508 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"

From 0c45d1f4466234c61d3e8ea4a21763baaff741e3 Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Fri, 24 Jun 2022 14:22:25 +0100
Subject: [PATCH 13/14] fix: update CHANGELOG and package.json to new version

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b74b218..9af605a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 2.2.1
+  - Feature:
+    - Allow the modal to display a list in a bulletpoint style or inline style, implemented via a key in the existing `options` prop: `modal.bulletDisplay`, which can be set to true to have bulletpoint style or false to have inline style (with words separated by a semi-colon)
+    - Make URLs hyperlinks, styled in blue
+    - Give the option to pin one filter option to the top of any filter, implemented via a key in the existing `options` prop: `filters.optionToPinAtTheTop`, which can be set to an array of objects containing the name of the filter and the option itself, like this => `[{filterName: nameOfFilter, option: nameOfOption},...,{filterName: nameOfFilter, option: nameOfOption}]`
+
 ### 2.2.0
 
 - Feature:
diff --git a/package.json b/package.json
index cc90508..242f782 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"

From 1d38f086467728744177ae49b0778a643e3affbc Mon Sep 17 00:00:00 2001
From: maxime <maxycle@hotmail.com>
Date: Fri, 24 Jun 2022 16:13:16 +0100
Subject: [PATCH 14/14] fix: remove page buttons

---
 CHANGELOG.md                                        | 13 +++++++++----
 package.json                                        |  2 +-
 src/components/filterable-table/TablePagination.vue |  4 +++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9af605a..83ec604 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,13 @@
+### 2.2.2
+
+- Fix: Remove page buttons (numbers) from pagination
+
 ### 2.2.1
-  - Feature:
-    - Allow the modal to display a list in a bulletpoint style or inline style, implemented via a key in the existing `options` prop: `modal.bulletDisplay`, which can be set to true to have bulletpoint style or false to have inline style (with words separated by a semi-colon)
-    - Make URLs hyperlinks, styled in blue
-    - Give the option to pin one filter option to the top of any filter, implemented via a key in the existing `options` prop: `filters.optionToPinAtTheTop`, which can be set to an array of objects containing the name of the filter and the option itself, like this => `[{filterName: nameOfFilter, option: nameOfOption},...,{filterName: nameOfFilter, option: nameOfOption}]`
+
+- Feature:
+  - Allow the modal to display a list in a bulletpoint style or inline style, implemented via a key in the existing `options` prop: `modal.bulletDisplay`, which can be set to true to have bulletpoint style or false to have inline style (with words separated by a semi-colon)
+  - Make URLs hyperlinks, styled in blue
+  - Give the option to pin one filter option to the top of any filter, implemented via a key in the existing `options` prop: `filters.optionToPinAtTheTop`, which can be set to an array of objects containing the name of the filter and the option itself, like this => `[{filterName: nameOfFilter, option: nameOfOption},...,{filterName: nameOfFilter, option: nameOfOption}]`
 
 ### 2.2.0
 
diff --git a/package.json b/package.json
index 242f782..fdf2811 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"
diff --git a/src/components/filterable-table/TablePagination.vue b/src/components/filterable-table/TablePagination.vue
index 7741d7e..4665c32 100644
--- a/src/components/filterable-table/TablePagination.vue
+++ b/src/components/filterable-table/TablePagination.vue
@@ -19,7 +19,6 @@
         <svg-chevron class="button__svg" />
       </button>
 
-
       <button
         v-bind="{ 'disabled' : !nextIsActive }"
         @click="changePage(nextIsActive, 'next')"
@@ -181,6 +180,9 @@ $buttons: ('next', 'previous', '');
       width: rem-calc(12); height: rem-calc(22);
     }
 
+    .button__page {
+      width: rem-calc(12); height: rem-calc(22); margin-right: rem-calc(10);
+    }
     &.disabled { 
       background-color: #ccc; // IE11 
       background-color: var(--button-bg-color-disabled);