add tabular view stories file

src/components/TabularView.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styled from "styled-components";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 
 const DataTabularContainerDiv = styled.div`
@@ -114,7 +113,7 @@ const DataTabularListAlignItem = styled.div<styledWidthProps>`
 interface ViewProps {
   fields: string[];
   data: { [key: string]: number | string }[];
-  searchTerm?: string;
+  searchTerm?: string | undefined;
 }
 
 export type DataSortType = {
@@ -161,9 +160,10 @@ export const TabularView = ({ fields, data, searchTerm }: ViewProps) => {
         const recordFields: elementsArray = [];
 
         if (
-          searchTerm === null ||
-          searchTerm === "" ||
-          Object.values(element).toString().toLowerCase().includes(searchTerm.toLowerCase())
+          searchTerm !== undefined &&
+          (searchTerm === null ||
+            searchTerm === "" ||
+            Object.values(element).toString().toLowerCase().includes(searchTerm.toLowerCase()))
         ) {
           fields.forEach((field) => {
             recordFields.push(

src/stories/TabularView.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TabularView } from "../components/TabularView";
+
+const meta = {
+  title: "components/Tabular View",
+  component: TabularView,
+} satisfies Meta<typeof TabularView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const testData = [
+  { title: "The First Book", body: "Large desciription of text", signature: "test name" },
+  { title: "The Second Book", body: "Large desciription of text", signature: "tester" },
+  { title: "The Last Book", body: "Large desciription of text", signature: "final book name" },
+];
+
+const testDataCost = [
+  { title: "The First Book", price: 400, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 200, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 450, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 110, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 220, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 250, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 400, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 420, signature: "test name", price2: 400, signature2: "test name" },
+  { title: "The First Book", price: 3300, signature: "test name", price2: 400, signature2: "test name" },
+];
+
+export const ViewText: Story = {
+  args: { fields: ["title", "body", "signature"], data: testData, searchTerm: "" },
+};
+
+export const ViewCost: Story = {
+  args: { fields: ["title", "price", "signature", "price2", "signature2"], data: testDataCost, searchTerm: "" },
+};