From 7cfd93f9012358d7ccde13d1c37f49a7bc52f369 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 25 Mar 2025 10:55:23 -0700
Subject: [PATCH 1/7] setting up table

---
 src/components/Table/Table.mdx                |  19 ++
 src/components/Table/Table.stories.svelte     |  98 ++-----
 src/components/Table/Table.svelte             | 251 +++++++-----------
 .../Table/{stories => demo}/docs/both.md      |   0
 .../Table/{stories => demo}/docs/component.md |   0
 .../Table/{stories => demo}/docs/filter.md    |   0
 .../Table/{stories => demo}/docs/format.md    |   0
 .../Table/{stories => demo}/docs/metadata.md  |   0
 .../Table/{stories => demo}/docs/paginate.md  |   0
 .../Table/{stories => demo}/docs/search.md    |   0
 .../Table/{stories => demo}/docs/sort.md      |   0
 .../Table/{stories => demo}/docs/style.md     |   0
 .../Table/{stories => demo}/docs/truncate.md  |   0
 .../Table/{stories => demo}/homeRuns.json     |   0
 .../Table/{stories => demo}/pressFreedom.json |   0
 .../Table/{stories => demo}/richestWomen.json |   0
 src/components/Table/{utils.js => utils.ts}   |   0
 17 files changed, 143 insertions(+), 225 deletions(-)
 create mode 100644 src/components/Table/Table.mdx
 rename src/components/Table/{stories => demo}/docs/both.md (100%)
 rename src/components/Table/{stories => demo}/docs/component.md (100%)
 rename src/components/Table/{stories => demo}/docs/filter.md (100%)
 rename src/components/Table/{stories => demo}/docs/format.md (100%)
 rename src/components/Table/{stories => demo}/docs/metadata.md (100%)
 rename src/components/Table/{stories => demo}/docs/paginate.md (100%)
 rename src/components/Table/{stories => demo}/docs/search.md (100%)
 rename src/components/Table/{stories => demo}/docs/sort.md (100%)
 rename src/components/Table/{stories => demo}/docs/style.md (100%)
 rename src/components/Table/{stories => demo}/docs/truncate.md (100%)
 rename src/components/Table/{stories => demo}/homeRuns.json (100%)
 rename src/components/Table/{stories => demo}/pressFreedom.json (100%)
 rename src/components/Table/{stories => demo}/richestWomen.json (100%)
 rename src/components/Table/{utils.js => utils.ts} (100%)

diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx
new file mode 100644
index 00000000..aa15c7c4
--- /dev/null
+++ b/src/components/Table/Table.mdx
@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as TableTextStories from './Table.stories.svelte';
+
+<Meta of={TableTextStories} />
+
+# Table
+
+The `Table` component TKTK
+
+```svelte
+<script>
+  import { Table } from '@reuters-graphics/graphics-components';
+</script>
+
+<Table />
+```
+
+<Canvas of={TableTextStories.Demo} />
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index d7777f23..d7f74e9b 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -1,128 +1,91 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import metadataDocs from './stories/docs/metadata.md?raw';
-  // @ts-ignore raw
-  import truncateDocs from './stories/docs/truncate.md?raw';
-  // @ts-ignore raw
-  import paginateDocs from './stories/docs/paginate.md?raw';
-  // @ts-ignore raw
-  import searchDocs from './stories/docs/search.md?raw';
-  // @ts-ignore raw
-  import filterDocs from './stories/docs/filter.md?raw';
-  // @ts-ignore raw
-  import bothDocs from './stories/docs/both.md?raw';
-  // @ts-ignore raw
-  import sortDocs from './stories/docs/sort.md?raw';
-  // @ts-ignore raw
-  import formatDocs from './stories/docs/format.md?raw';
-  // @ts-ignore raw
-  import styleDocs from './stories/docs/style.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Table from './Table.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/Table',
     component: Table,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script lang="ts">
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import pressFreedom from './stories/pressFreedom.json';
-  import homeRuns from './stories/homeRuns.json';
-  import richestWomen from './stories/richestWomen.json';
+  import pressFreedom from './demo/pressFreedom.json';
+  import homeRuns from './demo/homeRuns.json';
+  import richestWomen from './demo/richestWomen.json';
 
   const currencyFormat = (v: number) => '$' + v.toFixed(1);
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <Table {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     width: 'normal',
     data: homeRuns,
-  }}"
+  }}
 />
 
-<Story
+<!-- <Story
   name="Metadata"
-  {...withStoryDocs(metadataDocs)}
-  args="{{
+  args={{
     width: 'normal',
     data: homeRuns,
     title: 'Career home run leaders',
     dek: 'In baseball, a home run (also known as a "dinger" or "tater") occurs when a batter hits the ball over the outfield fence. When a home run is hit, the batter and any runners on base are able to score.',
     notes: 'Note: As of Opening Day 2023',
     source: 'Source: Baseball Reference',
-  }}"
+  }}
 />
 
 <Story
   name="Truncate"
-  {...withStoryDocs(truncateDocs)}
-  args="{{
+  args={{
     data: homeRuns,
     truncated: true,
     source: 'Source: Baseball Reference',
-  }}"
+  }}
 />
 
 <Story
   name="Paginate"
-  {...withStoryDocs(paginateDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     title: 'Press Freedom Index',
     paginated: true,
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Search"
-  {...withStoryDocs(searchDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     searchable: true,
     paginated: true,
     title: 'Press Freedom Index',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Filter"
-  {...withStoryDocs(filterDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     paginated: true,
     filterField: 'Region',
     title: 'Press Freedom Index',
     notes: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Search and filter"
-  {...withStoryDocs(bothDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     searchable: true,
     filterField: 'Region',
@@ -130,13 +93,12 @@
     title: 'Press Freedom Index',
     dek: 'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Sort"
-  {...withStoryDocs(sortDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     sortable: true,
     sortField: 'Score',
@@ -145,13 +107,12 @@
     title: 'Press Freedom Index',
     notes: 'Note: data as of 2018',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Format"
-  {...withStoryDocs(formatDocs)}
-  args="{{
+  args={{
     data: richestWomen,
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
@@ -159,16 +120,15 @@
     sortField: 'Net worth (in billions)',
     sortDirection: 'descending',
     fieldFormatters: { 'Net worth (in billions)': currencyFormat },
-  }}"
+  }}
 />
 
 <Story
   name="Style"
-  {...withStoryDocs(styleDocs)}
-  args="{{
+  args={{
     id: 'custom-table',
     data: richestWomen,
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
-  }}"
-/>
+  }}
+/> -->
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index efb621e1..fa241e52 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -1,138 +1,79 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  /**
-   * A source for the data.
-   * @type []
-   * @required
-   */
-  export let data: [];
+  interface Props {
+    /** Data for the table. */
+    data: [];
+    /** A title that runs above the table. */
+    title?: string;
+    /** A block of text that runs above the table. */
+    dek?: string;
+    /** A footnote that runs below the table. */
+    notes?: string;
+    /** A source line that runs below the table. */
+    source?: string;
+    /** List of the fields to include in the table. By default everything goes. */
+    includedFields?: string[];
+    /** Whether or not the table is cutoff after a set number of rows. */
+    truncated?: boolean;
+    /** If the table is truncated, how many rows to allow before the cutoff. */
+    truncateLength?: number;
+    /** Whether or not the table is paginated after a set number of rows. */
+    paginated?: boolean;
+    /** The default page size. */
+    pageSize?: number;
+    /** Whether or not searches are allowed. */
+    searchable?: boolean;
+    /** The placeholder text that appears in the search box. */
+    searchPlaceholder?: string;
+    /**  A field to offer uses as an interactive filter. */
+    filterField?: string;
+    /** The label to place above the filter box. */
+    filterLabel?: string;
+    /** Whether or not sorts are allowed. */
+    sortable?: boolean;
+    /** The column to sort by. By default it's the first header. */
+    sortField?: string;
+    /** The columns that are allowed to sort. It's all of them by default. */
+    sortableFields?: string[];
+    /** The direction of the sort. By default it's ascending. */
+    sortDirection?: 'ascending' | 'descending';
+    /** Custom field formatting functions. Should be keyed to the name of the field. */
+    fieldFormatters?: object;
+    /** Width of the component within the text well. */
+    width?: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+  }
 
-  /**
-   * A title that runs above the table.
-   * @type {string}
-   */
-  export let title: string | null = null;
-
-  /**
-   * A block of text that runs above the table.
-   * @type {string}
-   */
-  export let dek: string | null = null;
-
-  /**
-   * A footnote that runs below the table.
-   * @type {string}
-   */
-  export let notes: string | null = null;
-
-  /**
-   * A source line that runs below the table.
-   * @type {string}
-   */
-  export let source: string | null = null;
-
-  /**
-   * list of the fields to include in the table. By default everything goes.
-   * @type []
-   */
-  export let includedFields: string[] = Object.keys(data[0]).filter(
-    (f) => f !== 'searchStr'
-  );
-
-  /**
-   * Whether or not the table is cutoff after a set number of rows.
-   * @type {boolean}
-   */
-  export let truncated: boolean = false;
-
-  /**
-   * If the table is truncated, how many rows to allow before the cutoff.
-   * @type {number}
-   */
-  export let truncateLength: number = 5;
-
-  /**
-   * Whether or not the table is paginated after a set number of rows.
-   * @type {boolean}
-   */
-  export let paginated: boolean = false;
-
-  /**
-   * The default page size.
-   * @type {number}
-   */
-  export let pageSize: number = 25;
-
-  /**
-   * Whether or not searches are allowed.
-   * @type {boolean}
-   */
-  export let searchable: boolean = false;
-
-  /**
-   * The placeholder text that appears in the search box.
-   * @type {string}
-   */
-  export let searchPlaceholder: string = 'Search in table';
-
-  /**
-   * A field to offer uses as an interactive filter.
-   * @type {string}
-   */
-  export let filterField: string;
-
-  /**
-   * The label to place above the filter box
-   * @type {string}
-   */
-  export let filterLabel: string;
-
-  /**
-   * Whether or not sorts are allowed.
-   * @type {boolean}
-   */
-  export let sortable: boolean = false;
-
-  /**
-   * The column to sort by. By default it's the first header.
-   * @type {string}
-   */
-  export let sortField: string = Object.keys(data[0])[0];
-
-  /**
-   * The columns that are allowed to sort. It's all of them by default.
-   * @type {string}
-   */
-  export let sortableFields: string[] = Object.keys(data[0]).filter(
-    (f) => f !== 'searchStr'
-  );
-
-  /**
-   * The direction of the sort. By default it's ascending.
-   * @type {SortDirection}
-   */
-  type SortDirection = 'ascending' | 'descending';
-  export let sortDirection: SortDirection = 'ascending';
-
-  /**
-   * Custom field formatting functions. Should be keyed to the name of the field.
-   * @type {object}
-   */
-  export let fieldFormatters: object = {};
-
-  /** Width of the component within the text well. */
-  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
-  export let width: ContainerWidth = 'normal';
-
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
+  let {
+    data,
+    title,
+    dek,
+    notes,
+    source,
+    includedFields = Object.keys(data?[0]).filter((f) => f !== 'searchStr'),
+    truncated = false,
+    truncateLength = 5,
+    paginated= false,
+    pageSize = 25,
+    searchable = false,
+    searchPlaceholder = 'Search in table',
+    filterField,
+    filterLabel,
+    sortable = false,
+    sortField = Object.keys(data[0])[0],
+    sortableFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
+    sortDirection = 'ascending',
+    fieldFormatters = {},
+    width = 'normal',
+    id = '',
+    class: cls = '',
+  }: Props = $props();
+ 
 
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
@@ -140,7 +81,7 @@
   import SearchInput from '../SearchInput/SearchInput.svelte';
   import Select from './Select.svelte';
   import SortArrow from './SortArrow.svelte';
-  import { filterArray, paginateArray, getOptions } from './utils.js';
+  import { filterArray, paginateArray, getOptions } from './utils.ts';
 
   /** Set truncate, filtering and pagination configuration */
   let showAll = false;
@@ -230,9 +171,9 @@
             {#if filterList}
               <div class="table--header--filter">
                 <Select
-                  label="{filterLabel || filterField}"
-                  options="{filterList}"
-                  on:select="{handleFilterInput}"
+                  label={filterLabel || filterField}
+                  options={filterList}
+                  on:select={handleFilterInput}
                 />
               </div>
             {/if}
@@ -240,7 +181,7 @@
               <div class="table--header--search">
                 <SearchInput
                   bind:searchPlaceholder
-                  on:search="{handleSearchInput}"
+                  on:search={handleSearchInput}
                 />
               </div>
             {/if}
@@ -252,9 +193,7 @@
       <table
         class="w-full"
         class:paginated
-        class:truncated="{truncated &&
-          !showAll &&
-          data.length > truncateLength}"
+        class:truncated={truncated && !showAll && data.length > truncateLength}
       >
         <thead class="table--thead">
           <tr>
@@ -262,22 +201,22 @@
               <th
                 scope="col"
                 class="table--thead--th h4 pl-0 py-2 pr-2"
-                class:sortable="{sortable && sortableFields.includes(field)}"
-                class:sort-ascending="{sortable &&
+                class:sortable={sortable && sortableFields.includes(field)}
+                class:sort-ascending={sortable &&
                   sortField === field &&
-                  sortDirection === 'ascending'}"
-                class:sort-descending="{sortable &&
+                  sortDirection === 'ascending'}
+                class:sort-descending={sortable &&
                   sortField === field &&
-                  sortDirection === 'descending'}"
-                data-field="{field}"
-                on:click="{handleSort}"
+                  sortDirection === 'descending'}
+                data-field={field}
+                on:click={handleSort}
               >
                 {field}
                 {#if sortable && sortableFields.includes(field)}
                   <div class="table--thead--sortarrow fml-1 avoid-clicks">
                     <SortArrow
                       bind:sortDirection
-                      active="{sortField === field}"
+                      active={sortField === field}
                     />
                   </div>
                 {/if}
@@ -287,13 +226,13 @@
         </thead>
         <tbody class="table--tbody">
           {#each currentPageData as item, idx}
-            <tr data-row-index="{idx}">
+            <tr data-row-index={idx}>
               {#each includedFields as field}
                 <td
                   class="body-note pl-0 py-2 pr-2"
-                  data-row-index="{idx}"
-                  data-field="{field}"
-                  data-value="{item[field]}"
+                  data-row-index={idx}
+                  data-field={field}
+                  data-value={item[field]}
                 >
                   {@html formatValue(item, field)}
                 </td>
@@ -302,7 +241,7 @@
           {/each}
           {#if searchable && searchText && currentPageData.length === 0}
             <tr>
-              <td class="no-results" colspan="{includedFields.length}">
+              <td class="no-results" colspan={includedFields.length}>
                 No results found for "{searchText}"
               </td>
             </tr>
@@ -312,7 +251,7 @@
           <tfoot class="table--tfoot">
             {#if notes}
               <tr>
-                <td class="" colspan="{includedFields.length}">
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-2">
                     {@html notes}
                   </div>
@@ -321,7 +260,7 @@
             {/if}
             {#if source}
               <tr>
-                <td class="" colspan="{includedFields.length}">
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-1">
                     {@html source}
                   </div>
@@ -337,7 +276,7 @@
         aria-label="Show all button"
         class="show-all flex items-center justify-center fmt-2"
       >
-        <button class="body-caption" on:click="{toggleTruncate}"
+        <button class="body-caption" on:click={toggleTruncate}
           >{#if showAll}Show fewer rows{:else}Show {data.length -
               truncateLength} more rows{/if}</button
         >
@@ -347,8 +286,8 @@
       <Pagination
         bind:pageNumber
         bind:pageSize
-        bind:pageLength="{currentPageData.length}"
-        bind:n="{sortedData.length}"
+        bind:pageLength={currentPageData.length}
+        bind:n={sortedData.length}
       />{/if}
   </article>
 </Block>
diff --git a/src/components/Table/stories/docs/both.md b/src/components/Table/demo/docs/both.md
similarity index 100%
rename from src/components/Table/stories/docs/both.md
rename to src/components/Table/demo/docs/both.md
diff --git a/src/components/Table/stories/docs/component.md b/src/components/Table/demo/docs/component.md
similarity index 100%
rename from src/components/Table/stories/docs/component.md
rename to src/components/Table/demo/docs/component.md
diff --git a/src/components/Table/stories/docs/filter.md b/src/components/Table/demo/docs/filter.md
similarity index 100%
rename from src/components/Table/stories/docs/filter.md
rename to src/components/Table/demo/docs/filter.md
diff --git a/src/components/Table/stories/docs/format.md b/src/components/Table/demo/docs/format.md
similarity index 100%
rename from src/components/Table/stories/docs/format.md
rename to src/components/Table/demo/docs/format.md
diff --git a/src/components/Table/stories/docs/metadata.md b/src/components/Table/demo/docs/metadata.md
similarity index 100%
rename from src/components/Table/stories/docs/metadata.md
rename to src/components/Table/demo/docs/metadata.md
diff --git a/src/components/Table/stories/docs/paginate.md b/src/components/Table/demo/docs/paginate.md
similarity index 100%
rename from src/components/Table/stories/docs/paginate.md
rename to src/components/Table/demo/docs/paginate.md
diff --git a/src/components/Table/stories/docs/search.md b/src/components/Table/demo/docs/search.md
similarity index 100%
rename from src/components/Table/stories/docs/search.md
rename to src/components/Table/demo/docs/search.md
diff --git a/src/components/Table/stories/docs/sort.md b/src/components/Table/demo/docs/sort.md
similarity index 100%
rename from src/components/Table/stories/docs/sort.md
rename to src/components/Table/demo/docs/sort.md
diff --git a/src/components/Table/stories/docs/style.md b/src/components/Table/demo/docs/style.md
similarity index 100%
rename from src/components/Table/stories/docs/style.md
rename to src/components/Table/demo/docs/style.md
diff --git a/src/components/Table/stories/docs/truncate.md b/src/components/Table/demo/docs/truncate.md
similarity index 100%
rename from src/components/Table/stories/docs/truncate.md
rename to src/components/Table/demo/docs/truncate.md
diff --git a/src/components/Table/stories/homeRuns.json b/src/components/Table/demo/homeRuns.json
similarity index 100%
rename from src/components/Table/stories/homeRuns.json
rename to src/components/Table/demo/homeRuns.json
diff --git a/src/components/Table/stories/pressFreedom.json b/src/components/Table/demo/pressFreedom.json
similarity index 100%
rename from src/components/Table/stories/pressFreedom.json
rename to src/components/Table/demo/pressFreedom.json
diff --git a/src/components/Table/stories/richestWomen.json b/src/components/Table/demo/richestWomen.json
similarity index 100%
rename from src/components/Table/stories/richestWomen.json
rename to src/components/Table/demo/richestWomen.json
diff --git a/src/components/Table/utils.js b/src/components/Table/utils.ts
similarity index 100%
rename from src/components/Table/utils.js
rename to src/components/Table/utils.ts

From bbe68f489f6f318613750bc62235b65debccfb1e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 25 Mar 2025 13:07:13 -0700
Subject: [PATCH 2/7] working on table migration

---
 src/components/Table/Table.mdx            |   6 +-
 src/components/Table/Table.stories.svelte |   2 +-
 src/components/Table/Table.svelte         | 143 ++++++++++++++--------
 3 files changed, 97 insertions(+), 54 deletions(-)

diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx
index aa15c7c4..66c4ad8c 100644
--- a/src/components/Table/Table.mdx
+++ b/src/components/Table/Table.mdx
@@ -1,8 +1,8 @@
 import { Meta, Canvas } from '@storybook/blocks';
 
-import * as TableTextStories from './Table.stories.svelte';
+import * as TableStories from './Table.stories.svelte';
 
-<Meta of={TableTextStories} />
+<Meta of={TableStories} />
 
 # Table
 
@@ -16,4 +16,4 @@ The `Table` component TKTK
 <Table />
 ```
 
-<Canvas of={TableTextStories.Demo} />
+<Canvas of={TableStories.Demo} />
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index d7f74e9b..988be50e 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -3,7 +3,7 @@
   import Table from './Table.svelte';
 
   const { Story } = defineMeta({
-    title: 'Components/Text elements/Table',
+    title: 'Components/Graphics/Table',
     component: Table,
     argTypes: {
       width: {
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index fa241e52..f6629eb0 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -2,9 +2,17 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
+  /** 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 SearchInput from '../SearchInput/SearchInput.svelte';
+  import { filterArray, paginateArray, getOptions } from './utils';
+
   interface Props {
-    /** Data for the table. */
-    data: [];
+    /** Data for the table as an array of objects. */
+    data: object[];
     /** A title that runs above the table. */
     title?: string;
     /** A block of text that runs above the table. */
@@ -55,48 +63,54 @@
     dek,
     notes,
     source,
-    includedFields = Object.keys(data?[0]).filter((f) => f !== 'searchStr'),
+    includedFields,
     truncated = false,
     truncateLength = 5,
-    paginated= false,
+    paginated = false,
     pageSize = 25,
     searchable = false,
     searchPlaceholder = 'Search in table',
     filterField,
     filterLabel,
     sortable = false,
-    sortField = Object.keys(data[0])[0],
-    sortableFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
-    sortDirection = 'ascending',
+    sortField,
+    sortableFields,
+    sortDirection = $bindable('ascending'),
     fieldFormatters = {},
     width = 'normal',
     id = '',
     class: cls = '',
   }: Props = $props();
- 
 
-  /** Import local helpers */
-  import Block from '../Block/Block.svelte';
-  import Pagination from './Pagination.svelte';
-  import SearchInput from '../SearchInput/SearchInput.svelte';
-  import Select from './Select.svelte';
-  import SortArrow from './SortArrow.svelte';
-  import { filterArray, paginateArray, getOptions } from './utils.ts';
+  /** Derived variables */
+  let includedFieldsDerived = $derived.by(() => {
+    if (includedFields) return includedFields;
+    if (data.length > 0)
+      return Object.keys(data[0]).filter((f) => f !== 'searchStr');
+    return [];
+  });
+
+  let sortableFieldsDerived = $derived.by(() => {
+    if (sortableFields) return sortableFields;
+    if (data.length > 0)
+      return Object.keys(data[0]).filter((f) => f !== 'searchStr');
+    return [];
+  });
+
+  let sortFieldDerived = $derived.by(() => {
+    if (sortField) return sortField;
+    if (data.length > 0) return Object.keys(data[0])[0];
+    return '';
+  });
 
   /** Set truncate, filtering and pagination configuration */
-  let showAll = false;
-  let pageNumber = 1;
-  let searchText = '';
-  const filterList = filterField ? getOptions(data, filterField) : undefined;
+  let showAll = $state(false);
+  let pageNumber = $state(1);
+  let searchText = $state('');
+  let filterList = $derived(
+    filterField ? getOptions(data, filterField) : undefined
+  );
   let filterValue = '';
-  $: filteredData = filterArray(data, searchText, filterField, filterValue);
-  $: sortedData = sortArray(filteredData, sortField, sortDirection);
-  $: currentPageData =
-    truncated ?
-      showAll ? sortedData
-      : sortedData.slice(0, truncateLength + 1)
-    : paginated ? paginateArray(sortedData, pageSize, pageNumber)
-    : sortedData;
 
   //* * Handle show all, search, filter, sort and pagination events */
   function toggleTruncate(_event) {
@@ -143,12 +157,39 @@
     }
   }
 
+  /** Set up the data pipeline */
+  let filteredData = $derived.by(() =>
+    filterArray(data, searchText, filterField, filterValue)
+  );
+
+  let sortedData = $derived.by(() =>
+    sortArray(filteredData, sortField, sortDirection)
+  );
+
+  let currentPageData = $derived.by(() => {
+    if (truncated) {
+      return showAll ? sortedData : sortedData.slice(0, truncateLength + 1);
+    }
+    if (paginated) {
+      return paginateArray(sortedData, pageSize, pageNumber);
+    }
+    return sortedData;
+  });
+
+  $effect(() => {
+    console.log('includedFieldsDerived', includedFieldsDerived);
+    console.log('sortableFieldsDerived', sortableFieldsDerived);
+    console.log('sortFieldDerived', sortFieldDerived);
+    console.log('sortedData', sortedData);
+    console.log('currentPageData', currentPageData);
+  });
+
   /** Boot it up. */
   onMount(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data.forEach((d: any) => {
       // Compose the string we will allow users to search
-      d.searchStr = includedFields
+      d.searchStr = includedFieldsDerived
         .map((field) => d[field])
         .join(' ')
         .toLowerCase();
@@ -157,9 +198,9 @@
 </script>
 
 <Block {width} {id} class="fmy-6 {cls}">
-  <article class="table-wrapper">
+  <div class="table-wrapper">
     {#if title || dek || searchable || filterList}
-      <header class="table--header w-full">
+      <div class="table--header w-full">
         {#if title}
           <h3 class="table--header--title">{@html title}</h3>
         {/if}
@@ -187,9 +228,9 @@
             {/if}
           </nav>
         {/if}
-      </header>
+      </div>
     {/if}
-    <section class="table w-full">
+    <div class="table w-full">
       <table
         class="w-full"
         class:paginated
@@ -197,11 +238,12 @@
       >
         <thead class="table--thead">
           <tr>
-            {#each includedFields as field}
+            {#each includedFieldsDerived as field}
               <th
                 scope="col"
                 class="table--thead--th h4 pl-0 py-2 pr-2"
-                class:sortable={sortable && sortableFields.includes(field)}
+                class:sortable={sortable &&
+                  sortableFieldsDerived.includes(field)}
                 class:sort-ascending={sortable &&
                   sortField === field &&
                   sortDirection === 'ascending'}
@@ -209,15 +251,12 @@
                   sortField === field &&
                   sortDirection === 'descending'}
                 data-field={field}
-                on:click={handleSort}
+                onclick={handleSort}
               >
                 {field}
-                {#if sortable && sortableFields.includes(field)}
+                {#if sortable && sortableFieldsDerived.includes(field)}
                   <div class="table--thead--sortarrow fml-1 avoid-clicks">
-                    <SortArrow
-                      bind:sortDirection
-                      active={sortField === field}
-                    />
+                    <SortArrow {sortDirection} active={sortField === field} />
                   </div>
                 {/if}
               </th>
@@ -227,7 +266,7 @@
         <tbody class="table--tbody">
           {#each currentPageData as item, idx}
             <tr data-row-index={idx}>
-              {#each includedFields as field}
+              {#each includedFieldsDerived as field}
                 <td
                   class="body-note pl-0 py-2 pr-2"
                   data-row-index={idx}
@@ -241,7 +280,7 @@
           {/each}
           {#if searchable && searchText && currentPageData.length === 0}
             <tr>
-              <td class="no-results" colspan={includedFields.length}>
+              <td class="no-results" colspan={includedFieldsDerived.length}>
                 No results found for "{searchText}"
               </td>
             </tr>
@@ -251,7 +290,7 @@
           <tfoot class="table--tfoot">
             {#if notes}
               <tr>
-                <td class="" colspan={includedFields.length}>
+                <td class="" colspan={includedFieldsDerived.length}>
                   <div class="fmt-2">
                     {@html notes}
                   </div>
@@ -260,7 +299,7 @@
             {/if}
             {#if source}
               <tr>
-                <td class="" colspan={includedFields.length}>
+                <td class="" colspan={includedFieldsDerived.length}>
                   <div class="fmt-1">
                     {@html source}
                   </div>
@@ -270,16 +309,20 @@
           </tfoot>
         {/if}
       </table>
-    </section>
+    </div>
     {#if truncated && data.length > truncateLength}
       <nav
         aria-label="Show all button"
         class="show-all flex items-center justify-center fmt-2"
       >
-        <button class="body-caption" on:click={toggleTruncate}
-          >{#if showAll}Show fewer rows{:else}Show {data.length -
-              truncateLength} more rows{/if}</button
-        >
+        <button class="body-caption" onclick={toggleTruncate}>
+          {#if showAll}
+            Show fewer rows
+          {:else}
+            Show {data.length - truncateLength}
+            more rows
+          {/if}
+        </button>
       </nav>
     {/if}
     {#if paginated}
@@ -289,7 +332,7 @@
         bind:pageLength={currentPageData.length}
         bind:n={sortedData.length}
       />{/if}
-  </article>
+  </div>
 </Block>
 
 <style lang="scss">

From b7fc8b606499a3327270ed93ad760c8ba7f14ee0 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 25 Mar 2025 13:29:29 -0700
Subject: [PATCH 3/7] working on types....

---
 src/components/@types/global.ts   |  7 +++++++
 src/components/Table/Table.svelte | 35 ++++++++++++++++++-------------
 src/components/Table/utils.ts     | 34 ++++++++++++++++++++++--------
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index 5dfd180e..a96bd3cd 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -48,3 +48,10 @@ export interface ScrollerStep {
    */
   foregroundProps?: object;
 }
+
+/** Datum type for data that goes into the Table component */
+type TableDatum = {
+  [key: string]: string | number | boolean | undefined | null;
+  searchStr?: string;
+};
+export type TableData = TableDatum[];
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index f6629eb0..10c068e9 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -1,7 +1,5 @@
 <!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './Pagination.svelte';
@@ -10,9 +8,13 @@
   import SearchInput from '../SearchInput/SearchInput.svelte';
   import { filterArray, paginateArray, getOptions } from './utils';
 
+  // Types
+  import type { TableData } from '../@types/global';
+
   interface Props {
     /** Data for the table as an array of objects. */
-    data: object[];
+    data: TableData;
+
     /** A title that runs above the table. */
     title?: string;
     /** A block of text that runs above the table. */
@@ -184,15 +186,16 @@
     console.log('currentPageData', currentPageData);
   });
 
-  /** Boot it up. */
-  onMount(() => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data.forEach((d: any) => {
-      // Compose the string we will allow users to search
-      d.searchStr = includedFieldsDerived
-        .map((field) => d[field])
-        .join(' ')
-        .toLowerCase();
+  /** Add the `searchStr` field to data */
+  let searchableData = $derived.by(() => {
+    return data.map((d) => {
+      return {
+        ...d,
+        searchStr: includedFieldsDerived
+          .map((field) => d[field])
+          .join(' ')
+          .toLowerCase(),
+      };
     });
   });
 </script>
@@ -234,7 +237,9 @@
       <table
         class="w-full"
         class:paginated
-        class:truncated={truncated && !showAll && data.length > truncateLength}
+        class:truncated={truncated &&
+          !showAll &&
+          searchableData.length > truncateLength}
       >
         <thead class="table--thead">
           <tr>
@@ -310,7 +315,7 @@
         {/if}
       </table>
     </div>
-    {#if truncated && data.length > truncateLength}
+    {#if truncated && searchableData.length > truncateLength}
       <nav
         aria-label="Show all button"
         class="show-all flex items-center justify-center fmt-2"
@@ -319,7 +324,7 @@
           {#if showAll}
             Show fewer rows
           {:else}
-            Show {data.length - truncateLength}
+            Show {searchableData.length - truncateLength}
             more rows
           {/if}
         </button>
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index 0eb2b6b8..5a75117f 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -1,10 +1,17 @@
-export function filterArray(data, searchText, filterField, filterValue) {
+import type { TableData } from '../@types/global';
+
+export function filterArray(
+  data: TableData,
+  searchText: string,
+  filterField: string | undefined,
+  filterValue: string
+) {
   if (searchText) {
     data = data.filter((item) => {
-      return item.searchStr.includes(searchText.toLowerCase());
+      return item.searchStr?.includes(searchText.toLowerCase());
     });
   }
-  if (filterValue && filterValue) {
+  if (filterField && filterValue) {
     data = data.filter((item) => {
       return item[filterField] === filterValue;
     });
@@ -12,25 +19,34 @@ export function filterArray(data, searchText, filterField, filterValue) {
   return data;
 }
 
-export function paginateArray(array, pageSize, pageNumber) {
+export function paginateArray(
+  array: TableData,
+  pageSize: number,
+  pageNumber: number
+) {
   return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
 }
 
-function uniqueAttr(array, attr) {
+function uniqueAttr(array: TableData, attr: string) {
   return array.map((e) => e[attr]).filter(unique);
 }
 
-function unique(value, index, array) {
+// rewrite this with types
+function unique(value: any, index: number, array: TableData) {
   return array.indexOf(value) === index;
 }
 
-export function getOptions(data, attr) {
+export function getOptions(data: TableData, attr: string) {
   // Get all the unique values in the provided field. Sort it.
-  const attrList = uniqueAttr(data, attr).sort((a, b) => a.localeCompare(b));
+
+  // @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) =>
+    a.localeCompare(b)
+  );
 
   // 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) => ({ text: a, value: a }));
+  return attrList.map((a: string) => ({ text: a, value: a }));
 }

From fbc34a075d39fb6b1d9051518c346c7428a502b0 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 26 Mar 2025 08:57:34 -0700
Subject: [PATCH 4/7] stashing table migration for now

---
 src/components/@types/global.ts               |  2 +-
 src/components/Table/Table.svelte             | 20 +++++++++----------
 .../Table/{ => components}/LeftArrow.svelte   |  0
 .../Table/{ => components}/Pagination.svelte  | 20 +++++++++----------
 .../Table/{ => components}/RightArrow.svelte  |  0
 .../Table/{ => components}/Select.svelte      |  0
 .../Table/{ => components}/SortArrow.svelte   |  0
 src/components/Table/utils.ts                 | 10 +++++++---
 8 files changed, 28 insertions(+), 24 deletions(-)
 rename src/components/Table/{ => components}/LeftArrow.svelte (100%)
 rename src/components/Table/{ => components}/Pagination.svelte (87%)
 rename src/components/Table/{ => components}/RightArrow.svelte (100%)
 rename src/components/Table/{ => components}/Select.svelte (100%)
 rename src/components/Table/{ => components}/SortArrow.svelte (100%)

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 }));
 }

From a5b93e5f5313fe4710d8ff4e337b8ecafcf85f75 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 31 Mar 2025 14:02:13 -0700
Subject: [PATCH 5/7] rewrites utils as ts

---
 src/components/@types/global.ts           |  7 --
 src/components/Table/Table.stories.svelte |  4 +-
 src/components/Table/Table.svelte         | 82 ++++++++++-------------
 src/components/Table/utils.ts             | 52 +++++++-------
 4 files changed, 65 insertions(+), 80 deletions(-)

diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index a026186b..5dfd180e 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -48,10 +48,3 @@ export interface ScrollerStep {
    */
   foregroundProps?: object;
 }
-
-/** Datum type for data that goes into the Table component */
-type TableDatum = {
-  [key: string]: unknown;
-  searchStr?: string;
-};
-export type TableData = TableDatum[];
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index 988be50e..6f766425 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -30,7 +30,7 @@
   }}
 />
 
-<!-- <Story
+<Story
   name="Metadata"
   args={{
     width: 'normal',
@@ -131,4 +131,4 @@
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
   }}
-/> -->
+/>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 63ed7296..600a53e2 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -1,5 +1,5 @@
 <!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
-<script lang="ts">
+<script lang="ts" generics="T">
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './components/Pagination.svelte';
@@ -8,12 +8,9 @@
   import SearchInput from '../SearchInput/SearchInput.svelte';
   import { filterArray, paginateArray, getOptions } from './utils';
 
-  // Types
-  import type { TableData } from '../@types/global';
-
-  interface Props {
-    /** Data for the table as an array of objects. */
-    data: TableData;
+  interface Props<T extends Record<string, unknown>> {
+    /** Data for the table as an array. */
+    data: T[];
 
     /** A title that runs above the table. */
     title?: string;
@@ -65,7 +62,7 @@
     dek,
     notes,
     source,
-    includedFields,
+    includedFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
     truncated = false,
     truncateLength = 5,
     paginated = false,
@@ -75,35 +72,35 @@
     filterField,
     filterLabel,
     sortable = false,
-    sortField,
-    sortableFields,
+    sortField = Object.keys(data[0])[0],
+    sortableFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
     sortDirection = $bindable('ascending'),
     fieldFormatters = {},
     width = 'normal',
     id = '',
     class: cls = '',
-  }: Props = $props();
+  }: Props<Record<string, unknown>> = $props();
 
   /** Derived variables */
-  let includedFieldsDerived = $derived.by(() => {
-    if (includedFields) return includedFields;
-    if (data.length > 0)
-      return Object.keys(data[0]).filter((f) => f !== 'searchStr');
-    return [];
-  });
+  // let includedFieldsDerived = $derived.by(() => {
+  //   if (includedFields) return includedFields;
+  //   if (data.length > 0)
+  //     return Object.keys(data[0]).filter((f) => f !== 'searchStr');
+  //   return [];
+  // });
 
-  let sortableFieldsDerived = $derived.by(() => {
-    if (sortableFields) return sortableFields;
-    if (data.length > 0)
-      return Object.keys(data[0]).filter((f) => f !== 'searchStr');
-    return [];
-  });
+  // let sortableFieldsDerived = $derived.by(() => {
+  //   if (sortableFields) return sortableFields;
+  //   if (data.length > 0)
+  //     return Object.keys(data[0]).filter((f) => f !== 'searchStr');
+  //   return [];
+  // });
 
-  let sortFieldDerived = $derived.by(() => {
-    if (sortField) return sortField;
-    if (data.length > 0) return Object.keys(data[0])[0];
-    return '';
-  });
+  // let sortFieldDerived = $derived.by(() => {
+  //   if (sortField) return sortField;
+  //   if (data.length > 0) return Object.keys(data[0])[0];
+  //   return '';
+  // });
 
   /** Set truncate, filtering and pagination configuration */
   let showAll = $state(false);
@@ -178,20 +175,12 @@
     return sortedData;
   });
 
-  // $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(() => {
     return data.map((d) => {
       return {
         ...d,
-        searchStr: includedFieldsDerived
+        searchStr: includedFields
           .map((field) => d[field])
           .join(' ')
           .toLowerCase(),
@@ -243,12 +232,11 @@
       >
         <thead class="table--thead">
           <tr>
-            {#each includedFieldsDerived as field}
+            {#each includedFields as field}
               <th
                 scope="col"
                 class="table--thead--th h4 pl-0 py-2 pr-2"
-                class:sortable={sortable &&
-                  sortableFieldsDerived.includes(field)}
+                class:sortable={sortable && sortableFields.includes(field)}
                 class:sort-ascending={sortable &&
                   sortField === field &&
                   sortDirection === 'ascending'}
@@ -259,7 +247,7 @@
                 onclick={handleSort}
               >
                 {field}
-                {#if sortable && sortableFieldsDerived.includes(field)}
+                {#if sortable && sortableFields.includes(field)}
                   <div class="table--thead--sortarrow fml-1 avoid-clicks">
                     <SortArrow {sortDirection} active={sortField === field} />
                   </div>
@@ -271,7 +259,7 @@
         <tbody class="table--tbody">
           {#each currentPageData as item, idx}
             <tr data-row-index={idx}>
-              {#each includedFieldsDerived as field}
+              {#each includedFields as field}
                 <td
                   class="body-note pl-0 py-2 pr-2"
                   data-row-index={idx}
@@ -285,7 +273,7 @@
           {/each}
           {#if searchable && searchText && currentPageData.length === 0}
             <tr>
-              <td class="no-results" colspan={includedFieldsDerived.length}>
+              <td class="no-results" colspan={includedFields.length}>
                 No results found for "{searchText}"
               </td>
             </tr>
@@ -295,7 +283,7 @@
           <tfoot class="table--tfoot">
             {#if notes}
               <tr>
-                <td class="" colspan={includedFieldsDerived.length}>
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-2">
                     {@html notes}
                   </div>
@@ -304,7 +292,7 @@
             {/if}
             {#if source}
               <tr>
-                <td class="" colspan={includedFieldsDerived.length}>
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-1">
                     {@html source}
                   </div>
@@ -343,10 +331,10 @@
 <style lang="scss">
   @use '../../scss/mixins' as mixins;
 
-  section.table {
+  .table {
     overflow-x: auto;
   }
-  section.table table {
+  .table table {
     background-color: transparent;
     border-collapse: separate;
     border-spacing: 0;
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index 402cc556..5892ab6d 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -1,56 +1,60 @@
-import type { TableData } from '../@types/global';
-
-export function filterArray(
-  data: TableData,
+export function filterArray<T extends { searchStr: string }>(
+  data: T[],
   searchText: string,
-  filterField: string | undefined,
-  filterValue: string
+  filterField: keyof T,
+  filterValue: T[keyof T]
 ) {
   if (searchText) {
     data = data.filter((item) => {
-      return item.searchStr?.includes(searchText.toLowerCase());
+      return item.searchStr.includes(searchText.toLowerCase());
     });
   }
-  if (filterField && filterValue) {
+
+  if (filterValue) {
     data = data.filter((item) => {
       return item[filterField] === filterValue;
     });
   }
+
   return data;
 }
 
-export function paginateArray(
-  array: TableData,
+export function paginateArray<T>(
+  array: T[],
   pageSize: number,
   pageNumber: number
 ) {
   return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
 }
 
-function uniqueAttr(array: TableData, attr: string) {
+/**
+ *  We specify the output type here by adding `string` to the union because we want to explicitly define the output array as accepting strings.
+ *
+ * This is to get rid of the type error from `attrList.unshift('All')`
+ */
+function uniqueAttr<T>(array: T[], attr: keyof T): (T[keyof T] | string)[] {
   return array.map((e) => e[attr]).filter(unique);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function unique(value: any, index: number, array: TableData) {
-  console.log('unique', value, index, array);
+function unique<T>(value: T, index: number, array: T[]) {
   return array.indexOf(value) === index;
 }
 
-export function getOptions(data: TableData, attr: string) {
+export function getOptions<T>(data: T[], attr: keyof T) {
   // Get all the unique values in the provided field. Sort it.
+  const attrList = uniqueAttr(data, attr).sort((a, b) => {
+    // Throw errors if a and b are not strings.
+    // a and b should be strings since they are keys of T.
+    if (typeof a !== 'string' || typeof b !== 'string') {
+      throw new Error(`Expected string, got ${typeof a} and ${typeof b}`);
+    }
 
-  // @TODO - check if a and b need to be typed and sorted for non-strings
-  const attrList = uniqueAttr(data, attr).sort((a: string, b: string) =>
-    a.localeCompare(b)
-  );
+    return a.localeCompare(b);
+  });
 
-  console.log('attrList', attrList);
-
-  // Tack 'All' as the front as the first option.
+  // Tack 'All' at the start of `attrList`, making it the first option.
   attrList.unshift('All');
 
   // Convert the list into Option typed objects ready for our Select component
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return attrList.map((a: any) => ({ text: a, value: a }));
+  return attrList.map((a) => ({ text: a, value: a }));
 }

From 9774939d08eeb756c213562523bd62911db04351 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 31 Mar 2025 15:01:45 -0700
Subject: [PATCH 6/7] fixes search input

---
 src/components/SearchInput/SearchInput.svelte | 14 +++++-
 src/components/Table/Table.svelte             | 48 ++++++++++---------
 src/components/Table/utils.ts                 | 15 ++++--
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index c89a83dc..929a0e85 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -6,15 +6,23 @@
   interface Props {
     /** The placeholder text that appears in the search box.*/
     searchPlaceholder?: string;
+
+    onsearch?: (newValue: string) => void;
   }
 
-  let { searchPlaceholder = 'Search...' }: Props = $props();
+  let { searchPlaceholder = 'Search...', onsearch }: Props = $props();
 
   let value = $state('');
   let active = $derived(value !== '');
 
   function clear() {
     value = '';
+    if (onsearch) onsearch(value); // Call the prop to update the parent when cleared
+  }
+
+  function oninput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (onsearch) onsearch(value); // Update the parent on every input change
   }
 </script>
 
@@ -22,12 +30,14 @@
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
+
   <input
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
     placeholder={searchPlaceholder}
     bind:value
+    {oninput}
   />
   <div
     class="search--x absolute"
@@ -72,4 +82,4 @@
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 600a53e2..e961a7f4 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -1,5 +1,5 @@
 <!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
-<script lang="ts" generics="T">
+<script lang="ts">
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './components/Pagination.svelte';
@@ -69,7 +69,7 @@
     pageSize = 25,
     searchable = false,
     searchPlaceholder = 'Search in table',
-    filterField,
+    filterField = '',
     filterLabel,
     sortable = false,
     sortField = Object.keys(data[0])[0],
@@ -116,8 +116,16 @@
     showAll = !showAll;
   }
 
-  function handleSearchInput(event) {
-    searchText = event.detail.value;
+  // function handleSearchInput(event: CustomEvent<string>) {
+  //   searchText = event.detail;
+
+  //   console.log('searchText', searchText);
+  //   pageNumber = 1;
+  // }
+
+  /** Filters table data based on the input value in the search bar */
+  function handleSearchInput(newSearchText: string) {
+    searchText = newSearchText;
     pageNumber = 1;
   }
 
@@ -156,9 +164,21 @@
     }
   }
 
+  /** Add the `searchStr` field to data */
+  let searchableData = $derived.by(() => {
+    return data.map((d) => {
+      return {
+        ...d,
+        searchStr: includedFields
+          .map((field) => d[field])
+          .join(' ')
+          .toLowerCase(),
+      };
+    });
+  });
   /** Set up the data pipeline */
   let filteredData = $derived.by(() =>
-    filterArray(data, searchText, filterField, filterValue)
+    filterArray(searchableData, searchText, filterField, filterValue)
   );
 
   let sortedData = $derived.by(() =>
@@ -174,19 +194,6 @@
     }
     return sortedData;
   });
-
-  /** Add the `searchStr` field to data */
-  let searchableData = $derived.by(() => {
-    return data.map((d) => {
-      return {
-        ...d,
-        searchStr: includedFields
-          .map((field) => d[field])
-          .join(' ')
-          .toLowerCase(),
-      };
-    });
-  });
 </script>
 
 <Block {width} {id} class="fmy-6 {cls}">
@@ -212,10 +219,7 @@
             {/if}
             {#if searchable}
               <div class="table--header--search">
-                <SearchInput
-                  bind:searchPlaceholder
-                  on:search={handleSearchInput}
-                />
+                <SearchInput {searchPlaceholder} onsearch={handleSearchInput} />
               </div>
             {/if}
           </nav>
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index 5892ab6d..be9357e5 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -1,8 +1,12 @@
-export function filterArray<T extends { searchStr: string }>(
-  data: T[],
+type FilterableDatum<T extends Record<string, unknown>> = T & {
+  searchStr: string;
+};
+
+export function filterArray<T extends Record<string, unknown>>(
+  data: FilterableDatum<T>[],
   searchText: string,
-  filterField: keyof T,
-  filterValue: T[keyof T]
+  filterField: keyof FilterableDatum<T>,
+  filterValue: FilterableDatum<T>[keyof FilterableDatum<T>]
 ) {
   if (searchText) {
     data = data.filter((item) => {
@@ -12,13 +16,14 @@ export function filterArray<T extends { searchStr: string }>(
 
   if (filterValue) {
     data = data.filter((item) => {
+      if (!filterField) return true; // or handle the undefined case as appropriate
+
       return item[filterField] === filterValue;
     });
   }
 
   return data;
 }
-
 export function paginateArray<T>(
   array: T[],
   pageSize: number,

From 0645c636fae4a919598f848d1d311315ed022d4b Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 31 Mar 2025 16:33:14 -0700
Subject: [PATCH 7/7] deletes old docs

---
 src/components/Table/demo/docs/both.md      | 13 ------------
 src/components/Table/demo/docs/component.md | 14 -------------
 src/components/Table/demo/docs/filter.md    | 11 ----------
 src/components/Table/demo/docs/format.md    | 21 -------------------
 src/components/Table/demo/docs/metadata.md  | 14 -------------
 src/components/Table/demo/docs/paginate.md  | 14 -------------
 src/components/Table/demo/docs/search.md    | 11 ----------
 src/components/Table/demo/docs/sort.md      | 14 -------------
 src/components/Table/demo/docs/style.md     | 23 ---------------------
 src/components/Table/demo/docs/truncate.md  | 11 ----------
 10 files changed, 146 deletions(-)
 delete mode 100644 src/components/Table/demo/docs/both.md
 delete mode 100644 src/components/Table/demo/docs/component.md
 delete mode 100644 src/components/Table/demo/docs/filter.md
 delete mode 100644 src/components/Table/demo/docs/format.md
 delete mode 100644 src/components/Table/demo/docs/metadata.md
 delete mode 100644 src/components/Table/demo/docs/paginate.md
 delete mode 100644 src/components/Table/demo/docs/search.md
 delete mode 100644 src/components/Table/demo/docs/sort.md
 delete mode 100644 src/components/Table/demo/docs/style.md
 delete mode 100644 src/components/Table/demo/docs/truncate.md

diff --git a/src/components/Table/demo/docs/both.md b/src/components/Table/demo/docs/both.md
deleted file mode 100644
index 150557d4..00000000
--- a/src/components/Table/demo/docs/both.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Feel free to both search and filter.
-
-```svelte
-<table
-  data="{yourData}"
-  searchable="{true}"
-  filterField="{'Region'}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  dek="{'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.'}"
-  source="{'Source: Reporters Without Borders'}"
-></table>
-```
diff --git a/src/components/Table/demo/docs/component.md b/src/components/Table/demo/docs/component.md
deleted file mode 100644
index 31646f1e..00000000
--- a/src/components/Table/demo/docs/component.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Present structured data in a table. Consider making it interactive.
-
----
-
-```svelte
-<script>
-  import { Table } from '@reuters-graphics/graphics-components';
-
-  // Import your data as JSON, or otherwise structure it
-  import yourData from './stories/homeRuns.json';
-</script>
-
-<table data="{yourData}"></table>
-```
diff --git a/src/components/Table/demo/docs/filter.md b/src/components/Table/demo/docs/filter.md
deleted file mode 100644
index ba9f3ba2..00000000
--- a/src/components/Table/demo/docs/filter.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Allow users to filter the table by providing one of the attributes as the `filterField`. This works best with categorical columns.
-
-```svelte
-<table
-  data="{yourData}"
-  filterField="{'Region'}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  notes="{'Source: Reporters Without Borders'}"
-></table>
-```
diff --git a/src/components/Table/demo/docs/format.md b/src/components/Table/demo/docs/format.md
deleted file mode 100644
index b53d7ba0..00000000
--- a/src/components/Table/demo/docs/format.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Format column values by supplying functions keyed to field names with the `fieldFormatters` option. Columns are still sorted using the raw, underlying values.
-
-Among other things, this feature can be used to provide a unit of measurement with numeric fields.
-
-```svelte
-<script lang="ts">
-  const fieldFormatters = {
-    'Net worth (in billions)': (v) => '$' + v.toFixed(1),
-  };
-</script>
-
-<table
-  data="{yourData}"
-  fieldFormatters="{fieldFormatters}"
-  sortable="{true}"
-  sortField="{'Score'}"
-  sortDirection="{'descending'}"
-  title="{'The Richest Women in the World'}"
-  source="{'Source: Forbes'}"
-></table>
-```
diff --git a/src/components/Table/demo/docs/metadata.md b/src/components/Table/demo/docs/metadata.md
deleted file mode 100644
index 9db84c7a..00000000
--- a/src/components/Table/demo/docs/metadata.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
-
-```svelte
-<Table 
-  data="{yourData}"
-  title="{'Career home run leaders'}"
-  dek="{`In baseball,
-a home run (also known as a "dinger" or "tater") occurs when a batter hits the
-ball over the outfield fence. When a home run is hit, the batter and any runners
-on base are able to score.`}" 
-  notes="{'Note: As of Opening Day 2023'}"
-  source="{'Source: Baseball Reference'}"
-/>
-```
diff --git a/src/components/Table/demo/docs/paginate.md b/src/components/Table/demo/docs/paginate.md
deleted file mode 100644
index d18646bf..00000000
--- a/src/components/Table/demo/docs/paginate.md
+++ /dev/null
@@ -1,14 +0,0 @@
-When your table has lots of rows you should consider breaking it up into pages. This can be done by setting the `paginated` option.
-
-When it is enabled, readers can leaf through the data using a set of buttons below the table. By default there are 25 records per page. You can change the number by adjusting the `pageSize` option.
-
-This is a good option when publishing large tables for readers to explore. It works well with interactive features like searching and filters.
-
-```svelte
-<table
-  data="{yourData}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  source="{'Reporters Without Borders'}"
-></table>
-```
diff --git a/src/components/Table/demo/docs/search.md b/src/components/Table/demo/docs/search.md
deleted file mode 100644
index e81b05c8..00000000
--- a/src/components/Table/demo/docs/search.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Allow users to search the table by setting the optional `searchable` variable. Modify the default text that appears in the box by supplying the `searchPlaceholder` option.
-
-```svelte
-<table
-  data="{yourData}"
-  searchable="{true}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  notes="{'Source: Reporters Without Borders'}"
-></table>
-```
diff --git a/src/components/Table/demo/docs/sort.md b/src/components/Table/demo/docs/sort.md
deleted file mode 100644
index 7ed003cd..00000000
--- a/src/components/Table/demo/docs/sort.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Allow users to sort the table by setting the `sortable` input. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
-
-By default, all fields are sortable. If you'd like to limit the columns where sorting is allowed, provide a list to the `sortableFields` option.
-
-```svelte
-<table
-  data="{yourData}"
-  sortable="{true}"
-  sortField="{'Score'}"
-  sortDirection="{'descending'}"
-  title="{'Press Freedom Index'}"
-  source="{'Source: Reporters Without Borders'}"
-></table>
-```
diff --git a/src/components/Table/demo/docs/style.md b/src/components/Table/demo/docs/style.md
deleted file mode 100644
index 42c89e28..00000000
--- a/src/components/Table/demo/docs/style.md
+++ /dev/null
@@ -1,23 +0,0 @@
-You can tailor the table's appearance by crafting CSS that targets specific elements.
-
-Like other components, you can apply labels by providing the `id` of `cls` options, which allow you to make broad changes that remain limited to your element.
-
-Each column has a `data-field` attribute that contains the field's name. Use it to apply different styles to different fields. One common use is setting different text alignments on different columns.
-
-```svelte
-<table
-  id="{'custom-table'}"
-  data="{yourData}"
-  title="{'The Richest Women in the World'}"
-  source="{'Source: Forbes'}"
-></table>
-
-<style lang="scss">
-  /* Here we right align the table's numeric column. */
-  #custom-table {
-    [data-field='Net worth (in billions)'] {
-      text-align: right;
-    }
-  }
-</style>
-```
diff --git a/src/components/Table/demo/docs/truncate.md b/src/components/Table/demo/docs/truncate.md
deleted file mode 100644
index d36a230f..00000000
--- a/src/components/Table/demo/docs/truncate.md
+++ /dev/null
@@ -1,11 +0,0 @@
-When your table has 10 or more rows, consider clipping it by setting the `truncated` option. When it is enabled, the table is clipped and readers must request to see all rows by clicking a button below the table. By default this configuration will limit the table to five records. You can change the cutoff point by adjusting the `truncateLength` option.
-
-This is a good option for simple tables with row counts between 10 and 30. It works best when the table doesn't require interactivity.
-
-```svelte
-<table
-  data="{yourData}"
-  truncated="{true}"
-  source="{'Source: Baseball Reference'}"
-></table>
-```