diff --git a/content/data-lab/protected-mangroves.md b/content/data-lab/protected-mangroves.md
index bca0c85..4c11a03 100644
--- a/content/data-lab/protected-mangroves.md
+++ b/content/data-lab/protected-mangroves.md
@@ -9,6 +9,8 @@ tags: ["Bitcoin", "Stats"]
 script: "/js/mangrove-map.js"
 ---
 
-{{< table id="mangrove_countries" endpoint="mangrove_by_country_latest" headers="{'country_with_parent': 'Country', 'original_pixels': '1996 Cover', 'total_n_pixels': '2020 Cover', 'cumulative_pixels_diff': 'Diff', 'cumulative_pct_diff': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_with_parent" selectableRows="single" >}}
+{{< table id="mangrove_countries" endpoint="mangrove_by_country_latest" headers="{'country_with_parent': 'Country', 'original_pixels': '1996 Cover', 'total_n_pixels': '2020 Cover', 'cumulative_pixels_diff': 'Diff', 'cumulative_pct_diff': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_with_parent" selectableRows="single" defaultFirstSelected="true" >}}
 {{< chart id="mangrove_countries" endpoint="mangrove_by_country_agg" chartType="bar" xAxisField="year" yAxisField="total_pixels" scaleChart=true >}}
 {{< map id="map" style="https://tiles.semitamaps.com/styles/maptiler-basic/style.json">}}
+
+{{< chart id="mangrove-country-timeseries-chart" endpoint="mangrove_country_timeseries" chartType="line" xAxisField="date" yAxisField="n_pixels" scaleChart=true >}}
diff --git a/layouts/partials/table.html b/layouts/partials/table.html
index 10695e5..22d836f 100644
--- a/layouts/partials/table.html
+++ b/layouts/partials/table.html
@@ -7,7 +7,8 @@
     sortable,
     valueId,
     selectableRows,
-    filterTargets
+    filterTargets,
+    defaultFirstSelected,
   ) {
     async function fetchDataForTable(query) {
       try {
@@ -25,9 +26,7 @@
     }
 
     function generateTable(data) {
-      const jsonTableContainer = document.getElementById(
-        `${id}--container`,
-      );
+      const jsonTableContainer = document.getElementById(`${id}--container`);
       jsonTableContainer.className = "jsonTableContainer";
       jsonTableContainer.innerHTML = "";
       jsonTableContainer.style.maxHeight = maxHeight;
@@ -63,6 +62,13 @@
       }
       table.appendChild(thead);
       table.appendChild(tbody);
+      jsonTableContainer.appendChild(table);
+
+      // sortable
+      if (sortable == "true") {
+        table.className = "sortable";
+        sorttable.makeSortable(document.getElementById(`${id}`));
+      }
 
       if (selectableRows === "multi" || selectableRows === "single") {
         const rows = table.getElementsByTagName("tr");
@@ -76,7 +82,7 @@
                     filterId: valueId,
                     filterValue: this.value,
                     filterActions: ["selected"],
-                    filterTargets: filterTargets
+                    filterTargets: filterTargets,
                   },
                 });
                 document.dispatchEvent(event);
@@ -86,7 +92,7 @@
                     filterId: valueId,
                     filterValue: this.value,
                     filterActions: ["deselected"],
-                    filterTargets: filterTargets
+                    filterTargets: filterTargets,
                   },
                 });
                 document.dispatchEvent(event);
@@ -102,20 +108,28 @@
               }
             }
           });
+          if (defaultFirstSelected == true) {
+            if (i == 1) {
+              rows[i].classList.add("selected");
+              const event = new CustomEvent("filterChange", {
+                detail: {
+                  filterId: valueId,
+                  filterValue: rows[i].value,
+                  filterActions: ["selected"],
+                  filterTargets: filterTargets,
+                },
+              });
+              document.dispatchEvent(event);
+            }
+          }
         }
       }
-      jsonTableContainer.appendChild(table);
 
-      // sortable
-      if (sortable == "true") {
-        table.className = "sortable";
-        sorttable.makeSortable(document.getElementById(`${id}`));
-      }
     }
-    
+
     // listen for filter events for this target
     document.addEventListener("filterChange", function (event) {
-      tableId = document.getElementById(id).id 
+      tableId = document.getElementById(id).id;
       if (event.detail.filterTargets.includes(tableId)) {
         query = queryConstructor();
         fetchDataForTable(query);
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
index 3fe2ec5..68c101f 100644
--- a/layouts/shortcodes/table.html
+++ b/layouts/shortcodes/table.html
@@ -2,7 +2,7 @@
 <div id = '{{ .Get "id" }}--container'>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
-  createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }}, '{{ .Get "targets" }}'.split(" "))
+  createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }}, '{{ .Get "targets" }}'.split(" "), {{ .Get "defaultFirstSelected" | safeJS }})
 });
 </script>
 </div>