make table component reactive

src/lib/components/Table/Table.svelte

@@ -159,58 +159,59 @@
   checkedItems = new Set(ruleOfList?.map((item) => item.name));
 
   allRows = sortIndicatorCheckMarks(allRows);
+
+
   const handleDownloadMessage = (event) => {
   let updateData = event?.data?.rawData ?? []; // Use a new variable for updated data
-
   // Check if both arrays exist and have data
   if (!updateData?.length || !rawData?.length) {
     return;
   }
   
-    // Create a new array to store the final data
+  // Create a new array to ensure reactivity
-    const updatedRawData = rawData?.map((originalItem) => {
+  const updatedRawData = [...rawData];
-      // Find the corresponding item in updateData by matching symbol
-      const updateItem = updateData?.find(
-        (item) => item.symbol === originalItem.symbol,
-      );
   
-      // If no matching update found, return the original item
+  for (let i = 0; i < updateData.length; i++) {
-      if (!updateItem) {
+    if (updatedRawData[i]) {
-        return originalItem;
+      // Create a new object to merge the data
-      }
+      let newData = {};
-
-      // Create a new object to merge data
-      let newData = { ...originalItem };
       
       // Merge fields from updateData
-      Object.assign(newData, updateItem);
+      Object.assign(newData, updateData[i]);
       
-      defaultRules?.forEach((rule) => {
+      // Merge fields from defaultRules that are missing in updateData
-        // If the rule is missing in updateData but exists in original data, preserve original
+      defaultRules.forEach((rule) => {
-        if (rule in originalItem) {
+        if (!(rule in updateData[i]) && rule in updatedRawData[i]) {
-          newData[rule] = originalItem[rule];
+          newData[rule] = updatedRawData[i][rule];
         }
-        //!(rule in updateItem) &&
       });
       
-      // Explicitly ensure 'rank' and 'years' are preserved if missing in update
+      // Preserve the original 'priceTarget' and other default rule values
-      if (!("rank" in updateItem) && "rank" in originalItem) {
+      for (let rule of defaultRules) {
-        newData.rank = originalItem.rank;
+        if (rule in updatedRawData[i]) {
+          newData[rule] = updatedRawData[i][rule];
         }
-      if (!("years" in updateItem) && "years" in originalItem) {
-        newData.years = originalItem.years;
       }
       
-      return newData;
+      // Ensure 'rank' and 'years' are added if they are missing in updateData
-    });
+      if (!("rank" in updateData[i]) && "rank" in updatedRawData[i]) {
+        newData.rank = updatedRawData[i]["rank"];
+      }
+      if (!("years" in updateData[i]) && "years" in updatedRawData[i]) {
+        newData.years = updatedRawData[i]["years"];
+      }
       
-    rawData = updatedRawData;
+      // Update the specific item in the array
-    originalData = rawData;
+      updatedRawData[i] = newData;
-    stockList = originalData?.slice(0, 150);
+    }
+  }
   
+  // Trigger reactivity by creating a new reference
+  rawData = [...updatedRawData];
+  stockList = rawData?.slice(0, 100);
   columns = generateColumns(rawData);
   sortOrders = generateSortOrders(rawData);
-  };
+};
 
   const updateStockScreenerData = async () => {
     downloadWorker.postMessage({
@@ -473,6 +474,7 @@
 
   let previousList = [];
   let reconnectionTimeout;
+
   afterUpdate(async () => {
     // Compare only the symbols to detect changes
     const currentSymbols = rawData?.map((item) => item?.symbol).sort();
@@ -681,6 +683,7 @@
   };
 
   $: charNumber = $screenWidth < 640 ? 15 : 20;
+
 </script>
 
 <!-- Content area -->

src/routes/analysts/top-stocks/+page.svelte

@@ -6,6 +6,7 @@
 
   export let data;
 
+  const rawData = data?.getTopAnalystStocks;
   const excludedRules = new Set([
     "upside",
     "priceTarget",
@@ -104,7 +105,7 @@
           <div class="w-full m-auto mt-10">
             <Table
               {data}
-              rawData={data?.getTopAnalystStocks}
+              {rawData}
               {defaultList}
               {excludedRules}
               {hideLastRow}