From 8b076608f2756ae8079a04edd34981cd33698030 Mon Sep 17 00:00:00 2001
From: Emanuele Bardelli <ebardelli@srcs.k12.ca.us>
Date: Thu, 12 Dec 2024 07:45:42 -0800
Subject: [PATCH 1/9] Remove groupDataPopulated flag

This flag doesn't get updated when the underlying data is changed. Removing it seems to fix tables not showing updated data on component changes.
---
 .../src/lib/unsorted/viz/table/_DataTable.svelte             | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
index 39aa6550ec..72f90f9ab3 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -130,13 +130,11 @@
 	$: showLinkCol = showLinkCol === 'true' || showLinkCol === true;
 
 	let error = undefined;
-	let groupDataPopulated = false;
 
 	// ---------------------------------------------------------------------------------------
 	// Add props to store to let child components access them
 	// ---------------------------------------------------------------------------------------
 	props.update((d) => {
-		groupDataPopulated = false;
 		return { ...d, data, columns: [] };
 	});
 
@@ -453,7 +451,7 @@
 	let groupRowData = [];
 
 	$: if (!error) {
-		if (groupBy && !groupDataPopulated) {
+		if (groupBy) {
 			groupedData = data.reduce((acc, row) => {
 				const groupName = row[groupBy];
 				if (!acc[groupName]) {
@@ -462,7 +460,6 @@
 				acc[groupName].push(row);
 				return acc;
 			}, {});
-			groupDataPopulated = true;
 		}
 
 		// After groupedData is populated, calculate aggregations for groupRowData

From eda30637aae098578502c8f54453ec2dfddf0d92 Mon Sep 17 00:00:00 2001
From: Emanuele Bardelli <ebardelli@srcs.k12.ca.us>
Date: Thu, 12 Dec 2024 09:18:02 -0800
Subject: [PATCH 2/9] Add changeset

---
 .changeset/twelve-toes-serve.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/twelve-toes-serve.md

diff --git a/.changeset/twelve-toes-serve.md b/.changeset/twelve-toes-serve.md
new file mode 100644
index 0000000000..42684b0b20
--- /dev/null
+++ b/.changeset/twelve-toes-serve.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Remove groupDataPopulated flag

From 91a6fcf0c942c3e7c2802a08709e4bfd3c2a5c9b Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 20 Dec 2024 15:51:35 -0500
Subject: [PATCH 3/9] added filtered data groupby datatable story

---
 .../viz/table/DataTable.stories.svelte        | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index 78695f7e89..de225cf8ca 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -32,6 +32,15 @@
 
 <script>
 	const inputStore = getInputContext();
+
+	// const data = Query.create(
+	// 	`SELECT * from flights where regulator in ('Afghanistan', 'Belgium', 'Canada', 'Denmark') limit 50`,
+	// 	query
+	// );
+	// const data2 = Query.create(
+	// 		`SELECT * from flights where regulator = ${inputStore.regulator.value} limit 50`,
+	// 		query
+	// 	)
 </script>
 
 <Story name="Simple Case">
@@ -365,6 +374,26 @@
 	<h3>AreaMap Error</h3>
 	<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codeERROR" />
 </Story>
+<Story name="With Input Filtering Query on GroupBy">
+	{@const data = Query.create(
+		`SELECT * from flights where regulator in ('Afghanistan', 'Belgium', 'Canada', 'Denmark') limit 50`,
+		query
+	)}
+	{@const filteredData = Query.create(
+		`SELECT * from flights where regulator = '${$inputStore.regulator.value}' limit 10`,
+		query
+	)}
+	<Dropdown name="regulator" {data} value="regulator" label="regulator" />
+	<h2>Normal Data</h2>
+	<DataTable {data} title="Flights" search groupBy="regulator" groupsOpen="false">
+		<Column id="id" title="ID" />
+		<Column id="airline" title="Airline" />
+		<Column id="departure_airport" title="Departure Airport" />
+		<Column id="arrival_airport" title="Arrival Airport" />
+	</DataTable>
+	<h2>Filtered Data</h2>
+	<DataTable data={filteredData} title="Flights" groupBy="regulator" groupsOpen="true" />
+</Story>
 <!-- <Story name="column sort layout shift">
 	{@const countries = Query.create(
 		`SELECT 'United States' as country, 'North America' as continent, 22996 as gdp_usd, 0.017 as gdp_growth, 0.025 as interest_rate, 0.085 as inflation_rate, 0.037 as jobless_rate, -16.7 as gov_budget, 137.2 as debt_to_gdp, -3.6 as current_account, 332.4 as population

From 1e707b1336569afa878f1d6e8b97dd3b697cefdc Mon Sep 17 00:00:00 2001
From: Emanuele Bardelli <ebardelli@srcs.k12.ca.us>
Date: Sat, 21 Dec 2024 07:27:51 -0800
Subject: [PATCH 4/9] Group data then sort

---
 .../lib/unsorted/viz/table/_DataTable.svelte  | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
index 72f90f9ab3..8049687f8e 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -288,6 +288,51 @@
 		);
 	}
 
+	// ---------------------------------------------------------------------------------------
+	// GROUPED DATA
+	// ---------------------------------------------------------------------------------------
+
+	let groupedData = {};
+	let groupRowData = [];
+
+	$: if (!error) {
+		if (groupBy) {
+			groupedData = data.reduce((acc, row) => {
+				const groupName = row[groupBy];
+				if (!acc[groupName]) {
+					acc[groupName] = [];
+				}
+				acc[groupName].push(row);
+				return acc;
+			}, {});
+		}
+
+		// After groupedData is populated, calculate aggregations for groupRowData
+		groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
+			acc[groupName] = {}; // Initialize groupRow object for this group
+
+			for (const col of $props.columns) {
+				const id = col.id;
+				const colType = columnSummary.find((d) => d.id === id)?.type;
+				const totalAgg = col.totalAgg;
+				const weightCol = col.weightCol;
+				const rows = groupedData[groupName];
+				acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
+			}
+
+			return acc;
+		}, {});
+
+		// Update groupToggleStates only for new groups
+		const existingGroups = Object.keys(groupToggleStates);
+		for (const groupName of Object.keys(groupedData)) {
+			if (!existingGroups.includes(groupName)) {
+				groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
+			}
+			// Existing states are untouched
+		}
+	}
+
 	// ---------------------------------------------------------------------------------------
 	// SORTING
 	// ---------------------------------------------------------------------------------------
@@ -443,51 +488,6 @@
 		$props.columns.map((d) => d.id)
 	);
 
-	// ---------------------------------------------------------------------------------------
-	// GROUPED DATA
-	// ---------------------------------------------------------------------------------------
-
-	let groupedData = {};
-	let groupRowData = [];
-
-	$: if (!error) {
-		if (groupBy) {
-			groupedData = data.reduce((acc, row) => {
-				const groupName = row[groupBy];
-				if (!acc[groupName]) {
-					acc[groupName] = [];
-				}
-				acc[groupName].push(row);
-				return acc;
-			}, {});
-		}
-
-		// After groupedData is populated, calculate aggregations for groupRowData
-		groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
-			acc[groupName] = {}; // Initialize groupRow object for this group
-
-			for (const col of $props.columns) {
-				const id = col.id;
-				const colType = columnSummary.find((d) => d.id === id)?.type;
-				const totalAgg = col.totalAgg;
-				const weightCol = col.weightCol;
-				const rows = groupedData[groupName];
-				acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
-			}
-
-			return acc;
-		}, {});
-
-		// Update groupToggleStates only for new groups
-		const existingGroups = Object.keys(groupToggleStates);
-		for (const groupName of Object.keys(groupedData)) {
-			if (!existingGroups.includes(groupName)) {
-				groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
-			}
-			// Existing states are untouched
-		}
-	}
-
 	let fullscreen = false;
 	/** @type {number} */
 	let innerHeight;

From 9b742bf8550c6bc1565f44b737459153fe9da2ee Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 30 Dec 2024 14:35:49 -0500
Subject: [PATCH 5/9] updated stories

---
 .../lib/unsorted/viz/table/DataTable.stories.svelte   | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index de225cf8ca..94d16c4a0a 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -383,15 +383,16 @@
 		`SELECT * from flights where regulator = '${$inputStore.regulator.value}' limit 10`,
 		query
 	)}
+
 	<Dropdown name="regulator" {data} value="regulator" label="regulator" />
-	<h2>Normal Data</h2>
-	<DataTable {data} title="Flights" search groupBy="regulator" groupsOpen="false">
+	<h2>Filtered Data</h2>
+	<DataTable data={filteredData} title="Flights" groupsOpen="false">
 		<Column id="id" title="ID" />
+		<Column id="plane" title="Plane" />
 		<Column id="airline" title="Airline" />
-		<Column id="departure_airport" title="Departure Airport" />
-		<Column id="arrival_airport" title="Arrival Airport" />
+		<Column id="regulator" title="Regulator" />
 	</DataTable>
-	<h2>Filtered Data</h2>
+	<h2>Filtered Data Group By</h2>
 	<DataTable data={filteredData} title="Flights" groupBy="regulator" groupsOpen="true" />
 </Story>
 <!-- <Story name="column sort layout shift">

From 261bf1202b6a5680790c05f3372c207917c03d2e Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 30 Dec 2024 15:46:45 -0500
Subject: [PATCH 6/9] reimplemented groupedDataPopulated var, added data change
 check to handle filtered data input changes

---
 .../lib/unsorted/viz/table/_DataTable.svelte  | 96 ++++++++++---------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
index 8049687f8e..f180435513 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -130,11 +130,13 @@
 	$: showLinkCol = showLinkCol === 'true' || showLinkCol === true;
 
 	let error = undefined;
+	let groupDataPopulated = false;
 
 	// ---------------------------------------------------------------------------------------
 	// Add props to store to let child components access them
 	// ---------------------------------------------------------------------------------------
 	props.update((d) => {
+		groupDataPopulated = false;
 		return { ...d, data, columns: [] };
 	});
 
@@ -288,51 +290,6 @@
 		);
 	}
 
-	// ---------------------------------------------------------------------------------------
-	// GROUPED DATA
-	// ---------------------------------------------------------------------------------------
-
-	let groupedData = {};
-	let groupRowData = [];
-
-	$: if (!error) {
-		if (groupBy) {
-			groupedData = data.reduce((acc, row) => {
-				const groupName = row[groupBy];
-				if (!acc[groupName]) {
-					acc[groupName] = [];
-				}
-				acc[groupName].push(row);
-				return acc;
-			}, {});
-		}
-
-		// After groupedData is populated, calculate aggregations for groupRowData
-		groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
-			acc[groupName] = {}; // Initialize groupRow object for this group
-
-			for (const col of $props.columns) {
-				const id = col.id;
-				const colType = columnSummary.find((d) => d.id === id)?.type;
-				const totalAgg = col.totalAgg;
-				const weightCol = col.weightCol;
-				const rows = groupedData[groupName];
-				acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
-			}
-
-			return acc;
-		}, {});
-
-		// Update groupToggleStates only for new groups
-		const existingGroups = Object.keys(groupToggleStates);
-		for (const groupName of Object.keys(groupedData)) {
-			if (!existingGroups.includes(groupName)) {
-				groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
-			}
-			// Existing states are untouched
-		}
-	}
-
 	// ---------------------------------------------------------------------------------------
 	// SORTING
 	// ---------------------------------------------------------------------------------------
@@ -488,6 +445,55 @@
 		$props.columns.map((d) => d.id)
 	);
 
+	// ---------------------------------------------------------------------------------------
+	// GROUPED DATA
+	// ---------------------------------------------------------------------------------------
+
+	let groupedData = {};
+	let groupRowData = [];
+
+	$: if (!error) {
+		if (data) {
+			groupDataPopulated = false;
+		}
+		if (groupBy && !groupDataPopulated) {
+			groupedData = data.reduce((acc, row) => {
+				const groupName = row[groupBy];
+				if (!acc[groupName]) {
+					acc[groupName] = [];
+				}
+				acc[groupName].push(row);
+				return acc;
+			}, {});
+			groupDataPopulated = true;
+		}
+
+		// After groupedData is populated, calculate aggregations for groupRowData
+		groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
+			acc[groupName] = {}; // Initialize groupRow object for this group
+
+			for (const col of $props.columns) {
+				const id = col.id;
+				const colType = columnSummary.find((d) => d.id === id)?.type;
+				const totalAgg = col.totalAgg;
+				const weightCol = col.weightCol;
+				const rows = groupedData[groupName];
+				acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
+			}
+
+			return acc;
+		}, {});
+
+		// Update groupToggleStates only for new groups
+		const existingGroups = Object.keys(groupToggleStates);
+		for (const groupName of Object.keys(groupedData)) {
+			if (!existingGroups.includes(groupName)) {
+				groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
+			}
+			// Existing states are untouched
+		}
+	}
+
 	let fullscreen = false;
 	/** @type {number} */
 	let innerHeight;

From 1ca7e0d620a1a77f65ccac3214754cc73d446428 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 30 Dec 2024 15:55:55 -0500
Subject: [PATCH 7/9] moved data check to reactive check

---
 .../src/lib/unsorted/viz/table/_DataTable.svelte           | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
index f180435513..c8f52bfe8a 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -452,10 +452,11 @@
 	let groupedData = {};
 	let groupRowData = [];
 
+	$: if (data) {
+		groupDataPopulated = false;
+	}
+
 	$: if (!error) {
-		if (data) {
-			groupDataPopulated = false;
-		}
 		if (groupBy && !groupDataPopulated) {
 			groupedData = data.reduce((acc, row) => {
 				const groupName = row[groupBy];

From 9671a2aeead271f21ad2ed25c92ed54f4ab707b8 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Tue, 31 Dec 2024 11:05:00 -0500
Subject: [PATCH 8/9] moved grouping logic back above sort

---
 .../lib/unsorted/viz/table/_DataTable.svelte  | 104 +++++++++---------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
index c8f52bfe8a..21228bcde2 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -31,6 +31,8 @@
 	import { browserDebounce } from '@evidence-dev/sdk/utils';
 	import { getThemeStores } from '../../../themes/themes.js';
 
+	import { onMount } from 'svelte';
+
 	const { resolveColor } = getThemeStores();
 
 	// Set up props store
@@ -41,6 +43,7 @@
 	export let data;
 	export let queryID = undefined;
 	export let rows = 10; // number of rows to show
+
 	$: rows = Number.parseInt(rows);
 
 	export let rowNumbers = false;
@@ -136,7 +139,6 @@
 	// Add props to store to let child components access them
 	// ---------------------------------------------------------------------------------------
 	props.update((d) => {
-		groupDataPopulated = false;
 		return { ...d, data, columns: [] };
 	});
 
@@ -290,6 +292,56 @@
 		);
 	}
 
+	// ---------------------------------------------------------------------------------------
+	// GROUPED DATA
+	// ---------------------------------------------------------------------------------------
+
+	let groupedData = {};
+	let groupRowData = [];
+
+	$: if (data) {
+		groupDataPopulated = false;
+	}
+
+	$: if (!error) {
+		if (groupBy && !groupDataPopulated) {
+			groupedData = data.reduce((acc, row) => {
+				const groupName = row[groupBy];
+				if (!acc[groupName]) {
+					acc[groupName] = [];
+				}
+				acc[groupName].push(row);
+				return acc;
+			}, {});
+			groupDataPopulated = true;
+		}
+
+		// After groupedData is populated, calculate aggregations for groupRowData
+		groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
+			acc[groupName] = {}; // Initialize groupRow object for this group
+
+			for (const col of $props.columns) {
+				const id = col.id;
+				const colType = columnSummary.find((d) => d.id === id)?.type;
+				const totalAgg = col.totalAgg;
+				const weightCol = col.weightCol;
+				const rows = groupedData[groupName];
+				acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
+			}
+
+			return acc;
+		}, {});
+
+		// Update groupToggleStates only for new groups
+		const existingGroups = Object.keys(groupToggleStates);
+		for (const groupName of Object.keys(groupedData)) {
+			if (!existingGroups.includes(groupName)) {
+				groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
+			}
+			// Existing states are untouched
+		}
+	}
+
 	// ---------------------------------------------------------------------------------------
 	// SORTING
 	// ---------------------------------------------------------------------------------------
@@ -445,56 +497,6 @@
 		$props.columns.map((d) => d.id)
 	);
 
-	// ---------------------------------------------------------------------------------------
-	// GROUPED DATA
-	// ---------------------------------------------------------------------------------------
-
-	let groupedData = {};
-	let groupRowData = [];
-
-	$: if (data) {
-		groupDataPopulated = false;
-	}
-
-	$: if (!error) {
-		if (groupBy && !groupDataPopulated) {
-			groupedData = data.reduce((acc, row) => {
-				const groupName = row[groupBy];
-				if (!acc[groupName]) {
-					acc[groupName] = [];
-				}
-				acc[groupName].push(row);
-				return acc;
-			}, {});
-			groupDataPopulated = true;
-		}
-
-		// After groupedData is populated, calculate aggregations for groupRowData
-		groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
-			acc[groupName] = {}; // Initialize groupRow object for this group
-
-			for (const col of $props.columns) {
-				const id = col.id;
-				const colType = columnSummary.find((d) => d.id === id)?.type;
-				const totalAgg = col.totalAgg;
-				const weightCol = col.weightCol;
-				const rows = groupedData[groupName];
-				acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
-			}
-
-			return acc;
-		}, {});
-
-		// Update groupToggleStates only for new groups
-		const existingGroups = Object.keys(groupToggleStates);
-		for (const groupName of Object.keys(groupedData)) {
-			if (!existingGroups.includes(groupName)) {
-				groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
-			}
-			// Existing states are untouched
-		}
-	}
-
 	let fullscreen = false;
 	/** @type {number} */
 	let innerHeight;

From 3ce6995404389bbe60e296ad306c43a9157076d3 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 2 Jan 2025 15:44:32 -0500
Subject: [PATCH 9/9] removed onmount + stories commnets

---
 .../viz/table/DataTable.stories.svelte        | 97 -------------------
 .../lib/unsorted/viz/table/_DataTable.svelte  |  2 -
 2 files changed, 99 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index 94d16c4a0a..7d8c754a19 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -32,15 +32,6 @@
 
 <script>
 	const inputStore = getInputContext();
-
-	// const data = Query.create(
-	// 	`SELECT * from flights where regulator in ('Afghanistan', 'Belgium', 'Canada', 'Denmark') limit 50`,
-	// 	query
-	// );
-	// const data2 = Query.create(
-	// 		`SELECT * from flights where regulator = ${inputStore.regulator.value} limit 50`,
-	// 		query
-	// 	)
 </script>
 
 <Story name="Simple Case">
@@ -395,91 +386,3 @@
 	<h2>Filtered Data Group By</h2>
 	<DataTable data={filteredData} title="Flights" groupBy="regulator" groupsOpen="true" />
 </Story>
-<!-- <Story name="column sort layout shift">
-	{@const countries = Query.create(
-		`SELECT 'United States' as country, 'North America' as continent, 22996 as gdp_usd, 0.017 as gdp_growth, 0.025 as interest_rate, 0.085 as inflation_rate, 0.037 as jobless_rate, -16.7 as gov_budget, 137.2 as debt_to_gdp, -3.6 as current_account, 332.4 as population
-UNION ALL
-SELECT 'China', 'Asia', 17734, 0.004, 0.0365, 0.027, 0.054, -3.7, 66.8, 1.8, 1412.6
-UNION ALL
-SELECT 'Japan', 'Asia', 4937, 0.002, -0.001, 0.026, 0.026, -12.6, 266.2, 3.2, 125.31
-UNION ALL
-SELECT 'Germany', 'Europe', 4223, 0.017, 0.005, 0.079, 0.055, -3.7, 69.3, 7.4, 83.16
-UNION ALL
-SELECT 'United Kingdom', 'Europe', 3187, 0.029, 0.0175, 0.101, 0.038, -6, 95.9, -2.6, 67.53
-UNION ALL
-SELECT 'India', 'Asia', 3173, 0.135, 0.054, 0.0671, 0.078, -9.4, 73.95, -1.7, 1380
-UNION ALL
-SELECT 'France', 'Europe', 2937, 0.042, 0.005, 0.058, 0.074, -6.5, 112.9, 0.4, 67.63
-UNION ALL
-SELECT 'Italy', 'Europe', 2100, 0.047, 0.005, 0.084, 0.079, -7.2, 150.8, 2.5, 59.24
-UNION ALL
-SELECT 'Canada', 'North America', 1991, 0.029, 0.025, 0.076, 0.049, -4.7, 117.8, 0.1, 38.44
-UNION ALL
-SELECT 'South Korea', 'Asia', 1799, 0.029, 0.025, 0.057, 0.029, -6.1, 42.6, 3.5, 51.74
-UNION ALL
-SELECT 'Russia', 'Europe', 1776, -0.04, 0.08, 0.151, 0.039, 0.8, 18.2, 6.8, 145.55
-UNION ALL
-SELECT 'Brazil', 'South America', 1609, 0.032, 0.1375, 0.1007, 0.091, -4.5, 80.27, -1.8, 213.32`,
-		query
-	)}
-	<DataTable
-		data={countries}
-		totalRow="true"
-		rows="5"
-		wrapTitles
-		groupBy="continent"
-		groupType="section"
-		totalRowColor="#f2f2f2"
-	>
-		<Column
-			id="gdp_growth"
-			totalAgg="weightedMean"
-			weightCol="gdp_usd"
-			fmt="pct1"
-			colGroup="GDP"
-			contentType="delta"
-		/>
-		<Column
-			id="jobless_rate"
-			totalAgg="weightedMean"
-			weightCol="gdp_usd"
-			fmt="pct1"
-			contentType="colorscale"
-			colorScale="red"
-			colGroup="Labour Market"
-		/>
-		<Column
-			id="population"
-			totalAgg="sum"
-			colGroup="Labour Market"
-		/>
-		<Column
-			id="interest_rate"
-			totalAgg="weightedMean"
-			weightCol="gdp_usd"
-			fmt="pct2"
-			wrapTitle="false"
-			colGroup="Other"
-		/>
-		<Column
-			id="inflation_rate"
-			totalAgg="weightedMean"
-			weightCol="gdp_usd"
-			fmt="pct2"
-			colGroup="Other"
-		/>
-		<Column
-			id="gov_budget"
-			totalAgg="weightedMean"
-			weightCol="gdp_usd"
-			contentType="delta"
-			colGroup="Other"
-		/>
-		<Column
-			id="current_account"
-			totalAgg="weightedMean"
-			weightCol="gdp_usd"
-			colGroup="Other"
-		/>
-	</DataTable>
-</Story> -->
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
index 21228bcde2..264e4a17b4 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -31,8 +31,6 @@
 	import { browserDebounce } from '@evidence-dev/sdk/utils';
 	import { getThemeStores } from '../../../themes/themes.js';
 
-	import { onMount } from 'svelte';
-
 	const { resolveColor } = getThemeStores();
 
 	// Set up props store