Added the truncate feature

src/components/Table/Table.stories.svelte

@@ -7,6 +7,8 @@
   // @ts-ignore
   import metadataDocs from './stories/docs/metadata.md?raw';
   // @ts-ignore
+  import truncateDocs from './stories/docs/truncate.md?raw';
+  // @ts-ignore
   import searchDocs from './stories/docs/search.md?raw';
   // @ts-ignore
   import filterDocs from './stories/docs/filter.md?raw';
@@ -68,11 +70,22 @@
   }}"
 />
 
+<Story
+  name="Truncate"
+  {...withStoryDocs(truncateDocs)}
+  args="{{
+    data: homeRuns,
+    truncated: true,
+    source: 'Source: Baseball Reference',
+  }}"
+/>
+
 <Story
   name="Search"
   {...withStoryDocs(searchDocs)}
   args="{{
     data: pressFreedom,
+    paginated: true,
     searchable: true,
     title: 'Press Freedom Index',
     notes:
@@ -85,6 +98,7 @@
   {...withStoryDocs(filterDocs)}
   args="{{
     data: pressFreedom,
+    paginated: true,
     filterField: 'Region',
     title: 'Press Freedom Index',
     notes:
@@ -99,6 +113,7 @@
     data: pressFreedom,
     searchable: true,
     filterField: 'Region',
+    paginated: true,
     title: 'Press Freedom Index',
     notes:
       "Source: <a href='https://en.wikipedia.org/wiki/Press_Freedom_Index'>Reporters Without Borders</a>",
@@ -110,12 +125,13 @@
   {...withStoryDocs(sortDocs)}
   args="{{
     data: pressFreedom,
-    title: 'Press Freedom Index',
-    notes:
-      "Source: <a href='https://en.wikipedia.org/wiki/Press_Freedom_Index'>Reporters Without Borders</a>",
     sortable: true,
     sortField: 'Score',
     sortDirection: 'descending',
+    paginated: true,
+    title: 'Press Freedom Index',
+    notes:
+      "Source: <a href='https://en.wikipedia.org/wiki/Press_Freedom_Index'>Reporters Without Borders</a>",
   }}"
 />
 

src/components/Table/Table.svelte

@@ -41,6 +41,24 @@
     (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}
@@ -122,7 +140,8 @@
     isNumeric,
   } from './utils.js';
 
-  /** Set filtering and pagination configuration */
+  /** Set truncate, filtering and pagination configuration */
+  let showAll = false;
   let pageNumber = 1;
   let searchText = '';
   const filterList = filterField
@@ -131,7 +150,15 @@
   let filterValue = '';
   $: filteredData = filterArray(data, searchText, filterField, filterValue);
   $: sortedData = sortArray(filteredData, sortField, sortDirection);
-  $: currentPageData = paginateArray(sortedData, pageSize, pageNumber);
+  $: currentPageData = () => {
+    if (truncated) {
+      return showAll ? sortedData : sortedData.slice(0, truncateLength + 1);
+    } else if (paginated) {
+      return paginateArray(sortedData, pageSize, pageNumber);
+    } else {
+      return sortedData;
+    }
+  };
 
   // Estimate the text alignment of our fields. Strings go left. Numbers go right.
   function getAlignment(value) {
@@ -142,7 +169,11 @@
     return acc;
   }, {});
 
-  //* * Handle search, filter, sort and pagination events */
+  //* * Handle show all, search, filter, sort and pagination events */
+  function toggleTruncate(event) {
+    showAll = !showAll;
+  }
+
   function handleSearchInput(event) {
     searchText = event.target.value;
     pageNumber = 1;
@@ -249,7 +280,12 @@
       </section>
     {/if}
     <section class="table">
-      <table>
+      <table
+        class:paginated
+        class:truncated="{truncated &&
+          !showAll &&
+          data.length > truncateLength}"
+      >
         {#if title || dek}
           <caption class="table--caption">
             {#if title}
@@ -282,7 +318,7 @@
           </tr>
         </thead>
         <tbody class="table--tbody">
-          {#each currentPageData as item, idx}
+          {#each currentPageData() as item, idx}
             <tr data-row-index="{idx}">
               {#each includedFields as field}
                 <td
@@ -298,7 +334,7 @@
           {/each}
         </tbody>
         {#if notes || source}
-          <tfoot class="table--tfoot table--tfoot--footnote">
+          <tfoot class="table--tfoot">
             {#if notes}
               <tr>
                 <td colspan="{includedFields.length}">{@html notes}</td>
@@ -313,7 +349,15 @@
         {/if}
       </table>
     </section>
-    {#if filteredData.length > pageSize}
+    {#if truncated && data.length > truncateLength}
+      <nav aria-label="Show all button" class="show-all">
+        <button on:click="{toggleTruncate}"
+          >{#if showAll}Show fewer rows{:else}Show {data.length -
+              truncateLength} more rows{/if}</button
+        >
+      </nav>
+    {/if}
+    {#if paginated}
       <nav aria-label="pagination" class="pagination">
         <button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
           ><div class="icon-wrapper">
@@ -430,17 +474,29 @@
           padding: 0.5rem 0.25rem 0.5rem 0;
         }
       }
-      .table--tfoot--footnote {
+      tfoot.table--tfoot {
+        display: table-row;
         tr {
           border-bottom: 0;
         }
         td {
           font-weight: 300;
-          color: var(--theme-colour-text-primary, $tr-dark-grey);
+          color: $tr-dark-grey;
           font-size: 0.8rem;
           padding: 0.5rem 0 0 0;
         }
       }
+      &.truncated {
+        tbody tr:last-child:not(:first-child) {
+          border-bottom: none;
+          mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+          -webkit-mask-image: linear-gradient(
+            to bottom,
+            black 0%,
+            transparent 100%
+          );
+        }
+      }
     }
   }
 
@@ -480,6 +536,25 @@
     }
   }
 
+  nav.show-all {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+    button {
+      font-size: 0.8rem;
+      font-family: $font-family-display;
+      font-weight: 500;
+      min-width: 175px;
+      padding: 0.33rem 0.5rem;
+      border: 1px solid $tr-muted-grey;
+      border-radius: 4px;
+      background: $white;
+      color: $tr-medium-grey;
+      cursor: pointer;
+    }
+  }
+
   nav.pagination {
     display: flex;
     justify-content: center;

src/components/Table/stories/docs/metadata.md

@@ -1,12 +1,11 @@
-Set the `title` and `notes` options to add supporting metadata above and below the table.
+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"
-  ,
+  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'}"
 />
 ```

src/components/Table/stories/docs/truncate.md

@@ -0,0 +1,11 @@
+When you table has 10 or more rows, consider clipping it by setting the `truncated` option. Readers can request to see all rows by clicking a button below the table. By default this configuration will limit the table to five rows. You can adjust 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'}"
+/>
+```