diff --git a/apps/directory/src/components/generators/view-components/string.vue b/apps/directory/src/components/generators/view-components/string.vue
index 10e9b6be00..1fe2da6be1 100644
--- a/apps/directory/src/components/generators/view-components/string.vue
+++ b/apps/directory/src/components/generators/view-components/string.vue
@@ -33,13 +33,11 @@ export default {
     },
   },
   methods: {
-    // ...mapMutations(["SetNotification"]),
     displayName(item) {
       return item.label || item.name || item.id;
     },
     copyToClipboard(link) {
       navigator.clipboard.writeText(link);
-      this.SetNotification(`Copied ${link}`);
     },
   },
 };
diff --git a/apps/directory/src/components/report-components/FactsTable.vue b/apps/directory/src/components/report-components/FactsTable.vue
index fcc6a1f1f7..1a1e1485d5 100644
--- a/apps/directory/src/components/report-components/FactsTable.vue
+++ b/apps/directory/src/components/report-components/FactsTable.vue
@@ -1,12 +1,17 @@
 <template>
-  <div class="mt-4" v-if="attribute && attribute.length">
+  <div class="mt-4" v-if="attribute.length">
+    <Pagination
+      v-model="currentPage"
+      :count="filteredFacts.length"
+      :limit="100"
+    />
     <div>
       <label class="font-weight-bold mr-3">Split by:</label>
       <div class="d-inline-flex justify-content-around w-50">
         <label>
           <input
             type="checkbox"
-            @change="(e) => toggleColumn(e, 'sample_type')"
+            @change="(event) => toggleColumn(event, 'sample_type')"
             :checked="columnChecked('sample_type')"
           />
           Material type
@@ -14,7 +19,7 @@
         <label>
           <input
             type="checkbox"
-            @change="(e) => toggleColumn(e, 'sex')"
+            @change="(event) => toggleColumn(event, 'sex')"
             :checked="columnChecked('sex')"
           />
           Sex
@@ -22,7 +27,7 @@
         <label>
           <input
             type="checkbox"
-            @change="(e) => toggleColumn(e, 'age_range')"
+            @change="(event) => toggleColumn(event, 'age_range')"
             :checked="columnChecked('age_range')"
           />
           Age range
@@ -30,7 +35,7 @@
         <label>
           <input
             type="checkbox"
-            @change="(e) => toggleColumn(e, 'disease')"
+            @change="(event) => toggleColumn(event, 'disease')"
             :checked="columnChecked('disease')"
           />
           Disease codes
@@ -52,7 +57,7 @@
               class="fa"
               :class="sortAsc ? 'fa-sort-asc' : 'fa-sort-desc'"
               aria-hidden="true"
-            ></span>
+            />
           </th>
           <th @click="sort('sex')">
             Sex
@@ -61,7 +66,7 @@
               class="fa"
               :class="sortAsc ? 'fa-sort-asc' : 'fa-sort-desc'"
               aria-hidden="true"
-            ></span>
+            />
           </th>
           <th @click="sort('age_range')">
             Age range
@@ -70,7 +75,7 @@
               class="fa"
               :class="sortAsc ? 'fa-sort-asc' : 'fa-sort-desc'"
               aria-hidden="true"
-            ></span>
+            />
           </th>
           <th @click="sort('disease')">
             Disease codes
@@ -79,7 +84,7 @@
               class="fa"
               :class="sortAsc ? 'fa-sort-asc' : 'fa-sort-desc'"
               aria-hidden="true"
-            ></span>
+            />
           </th>
           <th @click="sort('number_of_donors')">
             #Donors
@@ -88,7 +93,7 @@
               class="fa"
               :class="sortAsc ? 'fa-sort-asc' : 'fa-sort-desc'"
               aria-hidden="true"
-            ></span>
+            />
           </th>
           <th @click="sort('number_of_samples')">
             #Samples
@@ -97,19 +102,15 @@
               class="fa"
               :class="sortAsc ? 'fa-sort-asc' : 'fa-sort-desc'"
               aria-hidden="true"
-            ></span>
+            />
           </th>
         </tr>
         <tr class="filter-bar">
           <th>
-            <select
-              @change="filter('sample_type', $event)"
-              v-model="sampleFilter"
-              class="w-100"
-            >
-              <option value="all">All</option>
+            <select v-model="filters['sample_type']" class="w-100">
+              <option :value="ALL">All</option>
               <option
-                v-for="material of materialtypeOptions"
+                v-for="material of factProperties.materialtypeOptions"
                 :key="material"
                 :value="material"
               >
@@ -118,19 +119,23 @@
             </select>
           </th>
           <th>
-            <select @change="filter('sex', $event)" v-model="sexFilter">
-              <option value="all">All</option>
-              <option v-for="sex of sexOptions" :key="sex" :value="sex">
+            <select v-model="filters['sex']">
+              <option :value="ALL">All</option>
+              <option
+                v-for="sex of factProperties.sexOptions"
+                :key="sex"
+                :value="sex"
+              >
                 {{ sex }}
               </option>
             </select>
           </th>
 
           <th>
-            <select @change="filter('age_range', $event)" v-model="ageFilter">
-              <option value="all">All</option>
+            <select v-model="filters['age_range']">
+              <option :value="ALL">All</option>
               <option
-                v-for="ageRange of ageRangeOptions"
+                v-for="ageRange of factProperties.ageRangeOptions"
                 :key="ageRange"
                 :value="ageRange"
               >
@@ -139,10 +144,10 @@
             </select>
           </th>
           <th>
-            <select @change="filter('disease', $event)" v-model="diseaseFilter">
-              <option value="all">All</option>
+            <select v-model="filters['disease']">
+              <option :value="ALL">All</option>
               <option
-                v-for="disease of diseaseOptions"
+                v-for="disease of factProperties.diseaseOptions"
                 :key="disease"
                 :value="disease"
               >
@@ -150,21 +155,19 @@
               </option>
             </select>
           </th>
-          <th></th>
-          <th></th>
+          <th />
+          <th />
         </tr>
       </thead>
       <tbody>
-        <template v-for="fact of factsTable">
-          <tr :key="fact.id" v-if="hasAFactToShow(fact)">
+        <template v-for="fact of factsTable" :key="fact.id">
+          <tr>
             <th scope="row" class="pr-1 align-top">
               {{ fact.sample_type }}
             </th>
             <td>{{ fact.sex }}</td>
             <td>{{ fact.age_range }}</td>
-            <td :title="fact.disease_name">
-              {{ fact.disease }}
-            </td>
+            <td>{{ fact.disease }}</td>
             <td>{{ fact.number_of_donors }}</td>
             <td>{{ fact.number_of_samples }}</td>
           </tr>
@@ -174,337 +177,319 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    attribute: {
-      type: Array,
-    },
+<script setup lang="ts">
+import * as _ from "lodash";
+//@ts-ignore
+import { Pagination } from "molgenis-components";
+import { computed, onMounted, ref, watch } from "vue";
+
+const { attribute } = defineProps<{ attribute: any[] }>();
+
+const ALL = "all";
+const UNKNOWN = "Unknown";
+const NOFILTERS = { sample_type: ALL, sex: ALL, age_range: ALL, disease: ALL };
+const FACTSPROPERTIES = [
+  "sample_type.label",
+  "sex.label",
+  "age_range.label",
+  "disease.label",
+  "disease.name",
+  "number_of_samples",
+  "number_of_donors",
+];
+const SPLITTABLE_COLUMNS = [
+  "sample_type",
+  "sex",
+  "age_range",
+  "disease",
+  "number_of_samples",
+];
+
+const currentPage = ref(1);
+const facts = ref<Record<string, any>[]>([]);
+const sortColumn = ref("");
+const sortAsc = ref(false);
+const tableVersion = ref(0);
+const filters = ref<Record<string, any>>(NOFILTERS);
+const splitByColumn = ref<string[]>([
+  "sample_type",
+  "sex",
+  "age_range",
+  "disease",
+]);
+
+const factProperties = ref<Record<string, any>>({});
+
+let baseFacts: Record<string, any>[] = [];
+
+onMounted(() => {
+  baseFacts = getBaseFacts(attribute);
+  facts.value = baseFacts;
+  factProperties.value = getFactProperties();
+});
+
+const columnChecked = computed(() => {
+  return (column: string) => splitByColumn.value.includes(column);
+});
+
+const filteredFacts = computed(() => {
+  return getFilteredFacts(facts.value, filters.value);
+});
+
+const factsTable = computed(() => {
+  const firstIndex = 0 + (currentPage.value - 1) * 100;
+  const potentialLastIndex = 99 + (currentPage.value - 1) * 100;
+  const lastIndex =
+    potentialLastIndex > filteredFacts.value.length
+      ? filteredFacts.value.length
+      : potentialLastIndex;
+
+  return filteredFacts.value.slice(firstIndex, lastIndex);
+});
+
+watch(
+  filters.value,
+  () => {
+    currentPage.value = 1;
   },
-  data() {
-    return {
-      facts: [],
-      sortColumn: "",
-      sortAsc: false,
-      tableVersion: 0,
-      filters: [],
-      sampleFilter: "all",
-      sexFilter: "all",
-      ageFilter: "all",
-      diseaseFilter: "all",
-      /** these columns are all the critearia that the rows should be split on. */
-      splitByColumn: ["sample_type", "sex", "age_range", "disease"],
-      splittableColumns: [
-        "sample_type",
-        "sex",
-        "age_range",
-        "disease",
-        "number_of_samples",
-      ],
-      factsProperties: [
-        "sample_type.label",
-        "sex.label",
-        "age_range.label",
-        "disease.label",
-        "disease.name",
-        "number_of_samples",
-        "number_of_donors",
-      ],
-    };
-  },
-  computed: {
-    materialtypeOptions() {
-      return [
-        ...new Set(
-          this.facts
-            .map((fact) => fact.sample_type)
-            .sort((a, b) => a.localeCompare(b))
-        ),
-      ];
-    },
-    sexOptions() {
-      return [
-        ...new Set(
-          this.facts.map((fact) => fact.sex).sort((a, b) => a.localeCompare(b))
-        ),
-      ];
-    },
-    ageRangeOptions() {
-      return [
-        ...new Set(
-          this.facts
-            .map((fact) => fact.age_range)
-            .sort((a, b) => a.localeCompare(b))
-        ),
-      ];
-    },
-    diseaseOptions() {
-      return [
-        ...new Set(
-          this.facts
-            .map((fact) => fact.disease)
-            .sort((a, b) => a.localeCompare(b))
-        ),
-      ];
-    },
-    columnChecked() {
-      return (column) => this.splitByColumn.includes(column);
-    },
-    factsTable() {
-      if (this.filters.length === 0) return this.facts;
-      const filteredFacts = [];
-
-      const lastFilterIndex = this.filters.length - 1;
-
-      for (const fact of this.facts) {
-        for (const [index, filter] of this.filters.entries()) {
-          const propertyValue = this.getValue(fact, filter.column);
-          /** it did not match all filters, so goodbye. */
-          if (!propertyValue && filter.value !== "Unknown") {
-            break;
-          } else if (!propertyValue && filter.value === "Unknown") {
-            filteredFacts.push(fact);
-          } else if (propertyValue !== filter.value) {
-            break;
-          } else if (index === lastFilterIndex) {
-            filteredFacts.push(fact);
-          }
-        }
-      }
-
-      return filteredFacts;
-    },
-  },
-  methods: {
-    toggleColumn(e, columnName) {
-      if (e.target.checked) {
-        this.splitByColumn.push(columnName);
+  { deep: true }
+);
+
+function getFilteredFacts(
+  facts: Record<string, any>[],
+  filters: Record<string, string>
+) {
+  return _.reduce(
+    filters,
+    (accum, filterValue, filterKey) => {
+      if (filterValue === ALL) {
+        return accum;
       } else {
-        const newArray = this.splitByColumn.filter((sbc) => sbc !== columnName);
-        this.splitByColumn = newArray;
+        return accum.filter((fact: Record<string, any>) => {
+          return fact[filterKey] === filterValue;
+        });
       }
-      this.sampleFilter = "all";
-      this.sexFilter = "all";
-      this.ageFilter = "all";
-      this.diseaseFilter = "all";
-      this.filters = [];
-      this.collapseRows();
     },
-    hasAFactToShow(fact) {
-      const hasSamples =
-        fact.number_of_samples && parseInt(fact.number_of_samples) !== 0;
-      const hasDonors =
-        fact.number_of_donors && parseInt(fact.number_of_samples) !== 0;
-      const facts = [hasSamples, hasDonors, fact.sex];
-
-      /** return true, if any of the facts is filled it. */
-      return facts.some((fact) => fact);
-    },
-    filter(column, event) {
-      const indexToRemove = this.filters.findIndex(
-        (fa) => fa.column === column
-      );
+    hardcopy(facts)
+  );
+}
 
-      if (indexToRemove > -1) {
-        this.filters.splice(indexToRemove, 1);
-      }
+function getValue(object: Record<string, any>, propertyString: string) {
+  const trail: string[] = propertyString.split(".");
+  const trailLength = trail.length;
+
+  let value: any;
+  let next: Record<string, any> = object;
+  for (let trailIndex = 0; trailIndex < trailLength; trailIndex++) {
+    const trailPart = trail[trailIndex];
+
+    if (typeof next[trailPart] === "object") {
+      next = next[trailPart];
+    } else {
+      value = next[trailPart];
+    }
+  }
+  return value ?? UNKNOWN;
+}
 
-      if (event.target.value !== "all") {
-        this.filters.push({ column, value: event.target.value });
+function getFactProperties() {
+  const splitFacts: Record<string, string[]> = facts.value.reduce(
+    (accum, fact) => {
+      if (fact.sample_type) accum.materialtypeOptions.push(fact.sample_type);
+      if (fact.sex) accum.sexOptions.push(fact.sex);
+      if (fact.age_range) accum.ageRangeOptions.push(fact.age_range);
+      if (fact.disease) {
+        if (fact.disease.name) {
+          accum.diseaseOptions.push(fact.disease.name);
+        } else {
+          accum.diseaseOptions.push(fact.disease);
+        }
       }
+      return accum;
     },
-    sort(column) {
-      /** user clicked again */
-      if (this.sortColumn === column) {
-        this.sortAsc = !this.sortAsc;
-      } else {
-        this.sortColumn = column;
-        this.sortAsc = true;
-      }
+    {
+      materialtypeOptions: [] as string[],
+      sexOptions: [] as string[],
+      ageRangeOptions: [] as string[],
+      diseaseOptions: [] as string[],
+    }
+  );
+
+  const uniqSplitFacts = {
+    materialtypeOptions: _.uniq(splitFacts.materialtypeOptions),
+    sexOptions: _.uniq(splitFacts.sexOptions),
+    ageRangeOptions: _.uniq(splitFacts.ageRangeOptions),
+    diseaseOptions: _.uniq(splitFacts.diseaseOptions),
+  };
+
+  return {
+    materialtypeOptions: _.sortBy(uniqSplitFacts.materialtypeOptions),
+    sexOptions: _.sortBy(uniqSplitFacts.sexOptions),
+    ageRangeOptions: _.sortBy(uniqSplitFacts.ageRangeOptions),
+    diseaseOptions: _.sortBy(uniqSplitFacts.diseaseOptions),
+  };
+}
 
-      let newFacts = this.hardcopy(this.facts);
+function toggleColumn(event: Record<string, any>, columnName: string) {
+  if (event.target.checked) {
+    splitByColumn.value.push(columnName);
+  } else {
+    const newArray = splitByColumn.value.filter((sbc) => sbc !== columnName);
+    splitByColumn.value = newArray;
+  }
+  filters.value = NOFILTERS;
+  collapseRows();
+}
 
-      newFacts.sort((factA, factB) => {
-        const factAProperty = this.getValue(factA, column);
-        const factBProperty = this.getValue(factB, column);
+function sort(column: string) {
+  if (sortColumn.value === column) {
+    sortAsc.value = !sortAsc;
+  } else {
+    sortColumn.value = column;
+    sortAsc.value = true;
+  }
 
-        const factValueA = isNaN(factAProperty)
-          ? factAProperty
-          : parseInt(factAProperty);
+  const sortedFacts = _.sortBy(facts.value, column);
+  facts.value = sortAsc.value ? sortedFacts : _.reverse(sortedFacts);
 
-        const factValueB = isNaN(factBProperty)
-          ? factBProperty
-          : parseInt(factBProperty);
+  /** if we do not key this, then it will break */
+  tableVersion.value = tableVersion.value + 1;
+}
 
-        if (factValueA > factValueB) {
-          return this.sortAsc ? 1 : -1;
-        } else if (factValueA < factValueB) {
-          return this.sortAsc ? -1 : 1;
-        }
+function getBaseFacts(attribute: Record<string, any>) {
+  const rawFacts = hardcopy(attribute);
+  const facts = rawFacts.map((rawFact: Record<string, any>) => {
+    const fact: Record<string, any> = {};
+    for (const property of FACTSPROPERTIES) {
+      const key = property.split(".")[0];
 
-        return 0;
-      });
-      this.facts = newFacts;
-      /** if we do not key this, then it will break */
-      this.tableVersion = this.tableVersion + 1;
-    },
-    getValue(object, propertyString) {
-      const trail = propertyString.split(".");
-      const trailLength = trail.length;
-
-      let value;
-      let next = object;
-      for (let trailIndex = 0; trailIndex < trailLength; trailIndex++) {
-        const trailPart = trail[trailIndex];
-
-        if (!next[trailPart]) return value ?? "Unknown";
-        else {
-          value = next[trailPart];
-          next = next[trailPart];
-        }
-      }
-      return value ?? "Unknown";
-    },
-    hardcopy(value) {
-      return JSON.parse(JSON.stringify(value));
-    },
-    collapseRows() {
-      if (this.splitByColumn.length === 4) {
-        /** no group together selected, so reset the state */
-        this.copyFactsToComponentState();
-        return;
+      if (!fact[key]) {
+        fact[key] = getValue(rawFact, property);
       }
+    }
+    return fact;
+  });
 
-      /** make a copy that we can keep mutating utill we have dealt with all the collapses.
-       * order matters!
-       */
-      const baseFacts = this.hardcopy(this.factsData());
-
-      const groupedFacts = [];
-
-      const criteriaMet = [];
+  return facts.filter(hasAFactToShow);
+}
 
-      for (const baseFact of baseFacts) {
-        if (Object.values(baseFact).includes("Any")) {
-          continue;
-        }
-        const criteria = {};
+function hardcopy(value: any) {
+  return JSON.parse(JSON.stringify(value));
+}
 
-        let newCriteria = "";
+function hasAFactToShow(fact: Record<string, any>) {
+  const hasSamples =
+    fact.number_of_samples && parseInt(fact.number_of_samples) !== 0;
+  const hasDonors =
+    fact.number_of_donors && parseInt(fact.number_of_donors) !== 0;
 
-        for (const criteriaColumn of this.splittableColumns) {
-          if (this.splitByColumn.includes(criteriaColumn)) {
-            const critValue = this.getValue(baseFact, criteriaColumn);
-            /** for use to group */
-            criteria[criteriaColumn] = critValue;
-            /** track which combination of values has been grouped already  */
-            newCriteria += critValue;
-          }
-        }
+  return hasSamples || hasDonors || !!fact.sex;
+}
 
-        if (!criteriaMet.includes(newCriteria)) {
-          let critGroup = baseFacts;
-          const criteriaKeys = Object.keys(criteria);
-          for (const critKey of criteriaKeys) {
-            critGroup = critGroup.filter(
-              (obj) => obj[critKey] === criteria[critKey]
-            );
-          }
-          criteriaMet.push(newCriteria);
-          groupedFacts.push(critGroup);
-        }
+function collapseRows() {
+  if (splitByColumn.value.length === 4) {
+    /** no group together selected, so reset the state */
+    facts.value = baseFacts;
+    return;
+  }
+
+  /** make a copy that we can keep mutating utill we have dealt with all the collapses.
+   * order matters!
+   */
+  const baseFactsCopy = hardcopy(baseFacts);
+
+  const groupedFacts = [];
+
+  const criteriaMet: string[] = [];
+
+  for (const baseFact of baseFactsCopy) {
+    if (Object.values(baseFact).includes("Any")) {
+      continue;
+    }
+    const criteria: Record<string, any> = {};
+
+    let newCriteria = "";
+
+    for (const criteriaColumn of SPLITTABLE_COLUMNS) {
+      if (splitByColumn.value.includes(criteriaColumn)) {
+        const critValue = getValue(baseFact, criteriaColumn);
+        /** for use to group */
+        criteria[criteriaColumn] = critValue;
+        /** track which combination of values has been grouped already  */
+        newCriteria += critValue;
+      }
+    }
+
+    if (!criteriaMet.includes(newCriteria)) {
+      let critGroup = baseFactsCopy;
+      const criteriaKeys = Object.keys(criteria);
+      for (const critKey of criteriaKeys) {
+        critGroup = critGroup.filter(
+          (obj: Record<string, any>) => obj[critKey] === criteria[critKey]
+        );
+      }
+      criteriaMet.push(newCriteria);
+      groupedFacts.push(critGroup);
+    }
+  }
+
+  const collapsedFacts = [];
+
+  for (const factGroup of groupedFacts) {
+    let collapsedFact: Record<string, any> = {};
+    for (const fact of factGroup) {
+      if (Object.values(fact).includes("Any")) {
+        continue;
+      }
+      if (!Object.keys(collapsedFact).length) {
+        collapsedFact = fact;
+        continue;
       }
 
-      const collapsedFacts = [];
-
-      for (const factGroup of groupedFacts) {
-        let collapsedFact = {};
-        for (const fact of factGroup) {
-          if (Object.values(fact).includes("Any")) {
-            continue;
-          }
-          if (!Object.keys(collapsedFact).length) {
-            collapsedFact = fact;
-            continue;
-          }
-
-          for (const column of this.splittableColumns) {
-            if (!this.splitByColumn.includes(column)) {
-              const mergedValue = collapsedFact[column];
-
-              if (Array.isArray(mergedValue)) {
-                const valueToMerge = fact[column];
-                if (Array.isArray(valueToMerge)) {
-                  collapsedFact[column] = [
-                    ...new Set(...collapsedFact[column].concat(fact[column])),
-                  ];
-                } else {
-                  if (!collapsedFact[column].includes(fact[column])) {
-                    collapsedFact[column].push(fact[column]);
-                  }
-                }
-              } else {
-                if (collapsedFact[column] !== fact[column]) {
-                  if (
-                    isFinite(collapsedFact[column]) &&
-                    isFinite(fact[column])
-                  ) {
-                    collapsedFact[column] =
-                      collapsedFact[column] + fact[column];
-                  } else if (fact[column] !== "Unknown") {
-                    collapsedFact[column] = [
-                      collapsedFact[column],
-                      fact[column],
-                    ];
-                  }
-                } else if (column === "number_of_samples") {
-                  collapsedFact[column] = 2 * collapsedFact[column];
-                }
+      for (const column of SPLITTABLE_COLUMNS) {
+        if (!splitByColumn.value.includes(column)) {
+          const mergedValue = collapsedFact[column];
+
+          if (Array.isArray(mergedValue)) {
+            const valueToMerge = fact[column];
+            if (Array.isArray(valueToMerge)) {
+              collapsedFact[column] = _.uniq(
+                collapsedFact[column].concat(fact[column])
+              );
+            } else {
+              if (!collapsedFact[column].includes(fact[column])) {
+                collapsedFact[column].push(fact[column]);
+              }
+            }
+          } else {
+            if (collapsedFact[column] !== fact[column]) {
+              if (isFinite(collapsedFact[column]) && isFinite(fact[column])) {
+                collapsedFact[column] = collapsedFact[column] + fact[column];
+              } else if (fact[column] !== UNKNOWN) {
+                collapsedFact[column] = [collapsedFact[column], fact[column]];
               }
+            } else if (column === "number_of_samples") {
+              collapsedFact[column] = 2 * collapsedFact[column];
             }
           }
         }
-
-        collapsedFact.number_of_donors = "Available";
-        collapsedFacts.push(collapsedFact);
       }
+    }
 
-      collapsedFacts.forEach((fact) => {
-        for (const prop in fact) {
-          if (Array.isArray(fact[prop])) {
-            fact[prop] = fact[prop].join(", ");
-          }
-        }
-      });
-
-      this.facts = collapsedFacts;
-    },
-    factsData() {
-      const rawFacts = this.hardcopy(this.attribute);
-
-      const facts = [];
-
-      for (const rawFact of rawFacts) {
-        const fact = {};
-        for (const property of this.factsProperties) {
-          const key = property.split(".")[0];
+    collapsedFact.number_of_donors = "Available";
+    collapsedFacts.push(collapsedFact);
+  }
 
-          if (!fact[key]) {
-            fact[key] = this.getValue(rawFact, property);
-          }
-        }
-        facts.push(fact);
+  collapsedFacts.forEach((fact) => {
+    for (const prop in fact) {
+      if (Array.isArray(fact[prop])) {
+        fact[prop] = fact[prop].join(", ");
       }
-      return facts;
-    },
-    copyFactsToComponentState() {
-      this.facts = this.factsData();
-    },
-  },
-  mounted() {
-    this.copyFactsToComponentState();
-  },
-};
+    }
+  });
+
+  facts.value = collapsedFacts;
+}
 </script>
 
 <style scoped>
diff --git a/apps/directory/vite.config.js b/apps/directory/vite.config.js
index 66b43ad460..935d3fcf7c 100644
--- a/apps/directory/vite.config.js
+++ b/apps/directory/vite.config.js
@@ -4,8 +4,9 @@ import vue from "@vitejs/plugin-vue";
 import { createHtmlPlugin } from "vite-plugin-html";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
-const HOST = process.env.MOLGENIS_APPS_HOST || "http://localhost:8080";
-const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "dir";
+const HOST =
+  process.env.MOLGENIS_APPS_HOST || "https://bbmri-emx2-test.molgeniscloud.org";
+const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "ERIC";
 
 const opts = { changeOrigin: true, secure: false, logLevel: "debug" };
 
diff --git a/apps/molgenis-components/src/components/tables/Pagination.vue b/apps/molgenis-components/src/components/tables/Pagination.vue
index 5112dfdbca..6903110b56 100644
--- a/apps/molgenis-components/src/components/tables/Pagination.vue
+++ b/apps/molgenis-components/src/components/tables/Pagination.vue
@@ -124,11 +124,11 @@ export default defineComponent({
   <div>
     <demo-item>
       <Pagination v-model="pageValue1" :count="29" />
-      page = {{ pageValue1 }}
+      <div>page number = {{ pageValue1 }}</div>
     </demo-item>
 
     <demo-item>
-      <pagination v-model="pageValue2" :count="250" />
+      <pagination v-model="pageValue2" :count="250" :limit="20"/>
       <div>page number: {{ pageValue2 }}</div>
     </demo-item>
   </div>