diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index a96bd3cd..a026186b 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -51,7 +51,7 @@ export interface ScrollerStep {
 
 /** Datum type for data that goes into the Table component */
 type TableDatum = {
-  [key: string]: string | number | boolean | undefined | null;
+  [key: string]: unknown;
   searchStr?: string;
 };
 export type TableData = TableDatum[];
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 10c068e9..63ed7296 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -2,9 +2,9 @@
 <script lang="ts">
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
-  import Pagination from './Pagination.svelte';
-  import Select from './Select.svelte';
-  import SortArrow from './SortArrow.svelte';
+  import Pagination from './components/Pagination.svelte';
+  import Select from './components/Select.svelte';
+  import SortArrow from './components/SortArrow.svelte';
   import SearchInput from '../SearchInput/SearchInput.svelte';
   import { filterArray, paginateArray, getOptions } from './utils';
 
@@ -178,13 +178,13 @@
     return sortedData;
   });
 
-  $effect(() => {
-    console.log('includedFieldsDerived', includedFieldsDerived);
-    console.log('sortableFieldsDerived', sortableFieldsDerived);
-    console.log('sortFieldDerived', sortFieldDerived);
-    console.log('sortedData', sortedData);
-    console.log('currentPageData', currentPageData);
-  });
+  // $effect(() => {
+  //   console.log('includedFieldsDerived', includedFieldsDerived);
+  //   console.log('sortableFieldsDerived', sortableFieldsDerived);
+  //   console.log('sortFieldDerived', sortFieldDerived);
+  //   console.log('sortedData', sortedData);
+  //   console.log('currentPageData', currentPageData);
+  // });
 
   /** Add the `searchStr` field to data */
   let searchableData = $derived.by(() => {
diff --git a/src/components/Table/LeftArrow.svelte b/src/components/Table/components/LeftArrow.svelte
similarity index 100%
rename from src/components/Table/LeftArrow.svelte
rename to src/components/Table/components/LeftArrow.svelte
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/components/Pagination.svelte
similarity index 87%
rename from src/components/Table/Pagination.svelte
rename to src/components/Table/components/Pagination.svelte
index 1d39f33b..e5f53075 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/components/Pagination.svelte
@@ -28,9 +28,9 @@
 
   let {
     pageNumber = $bindable(1),
-    pageSize = 25,
-    pageLength = null,
-    n = null,
+    pageSize = $bindable(25),
+    pageLength = $bindable(null),
+    n = $bindable(null),
   }: Props = $props();
 
   let minRow = $derived(pageNumber * pageSize - pageSize + 1);
@@ -51,7 +51,7 @@
 </script>
 
 <nav aria-label="pagination" class="pagination fmt-4">
-  <button onclick="{goToPreviousPage}" disabled="{pageNumber === 1}"
+  <button onclick={goToPreviousPage} disabled={pageNumber === 1}
     ><div class="icon-wrapper">
       <LeftArrow />
       <span class="visually-hidden">Previous page</span>
@@ -63,8 +63,8 @@
     </div>
   </div>
   <button
-    onclick="{goToNextPage}"
-    disabled="{pageNumber === Math.ceil(n / pageSize)}"
+    onclick={goToNextPage}
+    disabled={pageNumber === Math.ceil(n / pageSize)}
     ><div class="icon-wrapper">
       <RightArrow />
       <span class="visually-hidden">Next page</span>
@@ -73,7 +73,7 @@
 </nav>
 
 <style lang="scss">
-  @import '../../scss/mixins';
+  @use '../../../scss/mixins' as mixins;
 
   nav.pagination {
     display: flex;
@@ -83,8 +83,8 @@
     button {
       border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
       border-radius: 50%;
-      @include bg;
-      @include text-secondary;
+      @include mixins.bg;
+      @include mixins.text-secondary;
       cursor: pointer;
       width: 35px;
       height: 35px;
@@ -103,7 +103,7 @@
         justify-content: center;
         white-space: nowrap;
         &:hover {
-          @include text-primary;
+          @include mixins.text-primary;
           border-color: var(--theme-colour-text-primary, var(--tr-medium-grey));
         }
       }
diff --git a/src/components/Table/RightArrow.svelte b/src/components/Table/components/RightArrow.svelte
similarity index 100%
rename from src/components/Table/RightArrow.svelte
rename to src/components/Table/components/RightArrow.svelte
diff --git a/src/components/Table/Select.svelte b/src/components/Table/components/Select.svelte
similarity index 100%
rename from src/components/Table/Select.svelte
rename to src/components/Table/components/Select.svelte
diff --git a/src/components/Table/SortArrow.svelte b/src/components/Table/components/SortArrow.svelte
similarity index 100%
rename from src/components/Table/SortArrow.svelte
rename to src/components/Table/components/SortArrow.svelte
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index 5a75117f..402cc556 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -31,8 +31,9 @@ function uniqueAttr(array: TableData, attr: string) {
   return array.map((e) => e[attr]).filter(unique);
 }
 
-// rewrite this with types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function unique(value: any, index: number, array: TableData) {
+  console.log('unique', value, index, array);
   return array.indexOf(value) === index;
 }
 
@@ -40,13 +41,16 @@ export function getOptions(data: TableData, attr: string) {
   // Get all the unique values in the provided field. Sort it.
 
   // @TODO - check if a and b need to be typed and sorted for non-strings
-  const attrList = uniqueAttr(data, attr).sort((a: any, b: any) =>
+  const attrList = uniqueAttr(data, attr).sort((a: string, b: string) =>
     a.localeCompare(b)
   );
 
+  console.log('attrList', attrList);
+
   // Tack 'All' as the front as the first option.
   attrList.unshift('All');
 
   // Convert the list into Option typed objects ready for our Select component
-  return attrList.map((a: string) => ({ text: a, value: a }));
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return attrList.map((a: any) => ({ text: a, value: a }));
 }