diff --git a/.changeset/late-days-fix.md b/.changeset/late-days-fix.md
new file mode 100644
index 0000000000..f7660a2d4c
--- /dev/null
+++ b/.changeset/late-days-fix.md
@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Enable changing column IDs in DataTable component. 
+See story /story/viz-datatable--reactive-datatable for an example
diff --git a/packages/ui/core-components/sources/faker-demo-source/clients.yaml b/packages/ui/core-components/sources/faker-demo-source/clients.yaml
new file mode 100644
index 0000000000..314c326fa0
--- /dev/null
+++ b/packages/ui/core-components/sources/faker-demo-source/clients.yaml
@@ -0,0 +1,7 @@
+rows: 20
+schema:
+  id:
+    type: id
+  client_name:
+    category: company
+    item: name
\ No newline at end of file
diff --git a/packages/ui/core-components/sources/faker-demo-source/monthly_revenues.yaml b/packages/ui/core-components/sources/faker-demo-source/monthly_revenues.yaml
new file mode 100644
index 0000000000..252ebe538d
--- /dev/null
+++ b/packages/ui/core-components/sources/faker-demo-source/monthly_revenues.yaml
@@ -0,0 +1,25 @@
+rows: 100
+schema:
+  client_id:
+    type: fk
+    withBias: true
+    target:
+      table: clients.yaml
+  year:
+    category: number
+    item: int
+    options:
+      - min: 2022
+        max: 2025
+  month:
+    category: number
+    item: int
+    options:
+      - min: 1
+        max: 12
+  revenue:
+    category: number
+    item: int
+    options:
+      - min: 1000
+        max: 10000
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 c9855a7f1e..0bc0581b73 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,33 @@
 
 <script>
 	const inputStore = getInputContext();
+	let data;
+	$inputStore.year = 2024;
+
+	$: year = $inputStore.year;
+
+	const reactiveQueryFactory = Query.createReactive({
+		callback: (result) => (data = result),
+		execFn: query
+	});
+	$: {
+		let q = `
+        WITH filtered AS (
+        SELECT CONCAT(CAST(CAST(year AS INT) AS VARCHAR), '-',
+        	LPAD(CAST(CAST(month AS INT) AS VARCHAR), 2, '0')) AS year_month,
+        	CAST(client_id AS INT)                             AS client_id,
+        	CAST(revenue AS INT)                               AS revenue
+        FROM monthly_revenues
+        WHERE year = ${year}
+        AND month <= 6
+        )
+				PIVOT filtered
+        		ON year_month
+            USING sum(revenue)
+        		group by client_id
+		`;
+		reactiveQueryFactory(q);
+	}
 </script>
 
 <Story name="Simple Case">
@@ -365,91 +392,19 @@
 	<h3>AreaMap Error</h3>
 	<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codeERROR" />
 </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"
-			scaleColor="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> -->
+<Story
+	name="Reactive Datatable"
+	play={async ({ canvasElement }) => {
+		const screen = within(canvasElement);
+		expect(await screen.findByRole('columnheader', { name: '2024-01' })).toBeInTheDocument();
+		await userEvent.click(await screen.findByRole('button', { name: '2023' }));
+		expect(await screen.findByRole('columnheader', { name: '2023-01' })).toBeInTheDocument();
+	}}
+>
+	<ButtonGroup name="year" title="Select year">
+		<ButtonGroupItem value="2022" valueLabel="2022" />
+		<ButtonGroupItem value="2023" valueLabel="2023" />
+		<ButtonGroupItem value="2024" valueLabel="2024" default />
+	</ButtonGroup>
+	<DataTable {data} totalRow={true} rows="50" />
+</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 00ae99bfa2..73f5f8b266 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
@@ -478,11 +478,24 @@
 	let fullscreen = false;
 	/** @type {number} */
 	let innerHeight;
+
+	let synced = false;
+
+	$: {
+		/*
+		 A temporary solution to fix a synchronization issue with with these 2 pieces of state.
+		 There must be a better way to handle this but it is difficult to reason about the various state updates
+		 of this component due to the large number of props and reactive statements.
+		*/
+		let orderedColumnIds = orderedColumns.map((column) => column.id);
+		let columnSummaryIds = columnSummary.map((column) => column.id);
+		synced = orderedColumnIds.every((id) => columnSummaryIds.includes(id));
+	}
 </script>
 
 <svelte:window bind:innerHeight />
 
-{#if !isFullPage && innerHeight !== undefined}
+{#if !isFullPage && innerHeight !== undefined && synced}
 	<Fullscreen bind:open={fullscreen} {search}>
 		<!-- when compact middle rows are 17.5, middle rows are 23 -->
 		{@const ROW_HEIGHT = compact ? 17.5 : 23}
@@ -508,7 +521,7 @@
 	</Fullscreen>
 {/if}
 
-{#if error === undefined}
+{#if error === undefined && synced}
 	<slot>
 		<!-- default to every column with no customization -->
 		{#each columnSummary as column}
@@ -523,65 +536,84 @@
 		<InvisibleLinks {data} link={column.id} />
 	{/each}
 
-	<div
-		data-testid={isFullPage ? undefined : `DataTable-${data?.id ?? 'no-id'}`}
-		role="none"
-		class="table-container"
-		transition:slide|local
-		style:margin-top={marginTop}
-		style:margin-bottom={marginBottom}
-		style:padding-bottom={paddingBottom}
-		on:mouseenter={() => (hovering = true)}
-		on:mouseleave={() => (hovering = false)}
-	>
-		{#if search}
-			<SearchBar bind:value={searchValue} searchFunction={() => {}} />
-		{/if}
-
-		<div class="scrollbox" style:background-color={backgroundColor}>
-			<table>
-				<TableHeader
-					{rowNumbers}
-					{headerColor}
-					{headerFontColor}
-					{orderedColumns}
-					{columnSummary}
-					{compact}
-					{sortable}
-					{sortClick}
-					{formatColumnTitles}
-					{sortObj}
-					{wrapTitles}
-					{link}
-				/>
-
-				<QueryLoad data={filteredData}>
-					<svelte:fragment slot="skeleton">
-						<tr>
-							<td colspan={filteredData.columns.length} class="h-32">
-								<Skeleton />
-							</td>
-						</tr>
-					</svelte:fragment>
-					{#if groupBy && groupedData && searchValue === ''}
-						{#each sortedGroupNames as groupName}
-							{#if groupType === 'accordion'}
-								<GroupRow
-									{groupName}
-									currentGroupData={groupedData[groupName]}
-									toggled={groupToggleStates[groupName]}
-									on:toggle={handleToggle}
-									{columnSummary}
-									rowColor={accordionRowColor}
-									{rowNumbers}
-									{subtotals}
-									{compact}
-									{orderedColumns}
-								/>
-								{#if groupToggleStates[groupName]}
+	{#key columnSummary}
+		<div
+			data-testid={isFullPage ? undefined : `DataTable-${data?.id ?? 'no-id'}`}
+			role="none"
+			class="table-container"
+			transition:slide|local
+			style:margin-top={marginTop}
+			style:margin-bottom={marginBottom}
+			style:padding-bottom={paddingBottom}
+			on:mouseenter={() => (hovering = true)}
+			on:mouseleave={() => (hovering = false)}
+		>
+			{#if search}
+				<SearchBar bind:value={searchValue} searchFunction={() => {}} />
+			{/if}
+
+			<div class="scrollbox" style:background-color={backgroundColor}>
+				<table>
+					<TableHeader
+						{rowNumbers}
+						{headerColor}
+						{headerFontColor}
+						{orderedColumns}
+						{columnSummary}
+						{compact}
+						{sortable}
+						{sortClick}
+						{formatColumnTitles}
+						{sortObj}
+						{wrapTitles}
+						{link}
+					/>
+
+					<QueryLoad data={filteredData}>
+						<svelte:fragment slot="skeleton">
+							<tr>
+								<td colspan={filteredData.columns.length} class="h-32">
+									<Skeleton />
+								</td>
+							</tr>
+						</svelte:fragment>
+						{#if groupBy && groupedData && searchValue === ''}
+							{#each sortedGroupNames as groupName}
+								{#if groupType === 'accordion'}
+									<GroupRow
+										{groupName}
+										currentGroupData={groupedData[groupName]}
+										toggled={groupToggleStates[groupName]}
+										on:toggle={handleToggle}
+										{columnSummary}
+										rowColor={accordionRowColor}
+										{rowNumbers}
+										{subtotals}
+										{compact}
+										{orderedColumns}
+									/>
+									{#if groupToggleStates[groupName]}
+										<TableRow
+											displayedData={groupedData[groupName]}
+											{groupType}
+											{rowShading}
+											{link}
+											{rowNumbers}
+											{rowLines}
+											{compact}
+											{index}
+											{columnSummary}
+											grouped={true}
+											groupColumn={groupBy}
+											{orderedColumns}
+										/>
+									{/if}
+								{:else if groupType === 'section'}
 									<TableRow
-										displayedData={groupedData[groupName]}
+										groupColumn={groupBy}
 										{groupType}
+										rowSpan={groupedData[groupName].length}
+										displayedData={groupedData[groupName]}
 										{rowShading}
 										{link}
 										{rowNumbers}
@@ -590,159 +622,142 @@
 										{index}
 										{columnSummary}
 										grouped={true}
-										groupColumn={groupBy}
+										{groupNamePosition}
 										{orderedColumns}
 									/>
+									{#if subtotals}
+										<SubtotalRow
+											{groupName}
+											currentGroupData={groupedData[groupName]}
+											{columnSummary}
+											rowColor={subtotalRowColor}
+											fontColor={subtotalFontColor}
+											{groupType}
+											{groupBy}
+											{compact}
+											{orderedColumns}
+										/>
+									{/if}
 								{/if}
-							{:else if groupType === 'section'}
-								<TableRow
-									groupColumn={groupBy}
-									{groupType}
-									rowSpan={groupedData[groupName].length}
-									displayedData={groupedData[groupName]}
-									{rowShading}
-									{link}
-									{rowNumbers}
-									{rowLines}
-									{compact}
-									{index}
-									{columnSummary}
-									grouped={true}
-									{groupNamePosition}
-									{orderedColumns}
-								/>
-								{#if subtotals}
-									<SubtotalRow
-										{groupName}
-										currentGroupData={groupedData[groupName]}
-										{columnSummary}
-										rowColor={subtotalRowColor}
-										fontColor={subtotalFontColor}
-										{groupType}
-										{groupBy}
-										{compact}
-										{orderedColumns}
-									/>
-								{/if}
-							{/if}
-						{/each}
-					{:else}
-						<TableRow
-							{displayedData}
-							{rowShading}
-							{link}
-							{rowNumbers}
-							{rowLines}
-							{compact}
-							{index}
-							{columnSummary}
-							{orderedColumns}
-						/>
-					{/if}
+							{/each}
+						{:else}
+							<TableRow
+								{displayedData}
+								{rowShading}
+								{link}
+								{rowNumbers}
+								{rowLines}
+								{compact}
+								{index}
+								{columnSummary}
+								{orderedColumns}
+							/>
+						{/if}
+
+						{#if totalRow && searchValue === ''}
+							<TotalRow
+								{data}
+								{rowNumbers}
+								{columnSummary}
+								rowColor={totalRowColor}
+								fontColor={totalFontColor}
+								{groupType}
+								{compact}
+								{orderedColumns}
+							/>
+						{/if}
+					</QueryLoad>
+				</table>
+			</div>
 
-					{#if totalRow && searchValue === ''}
-						<TotalRow
-							{data}
-							{rowNumbers}
-							{columnSummary}
-							rowColor={totalRowColor}
-							fontColor={totalFontColor}
-							{groupType}
-							{compact}
-							{orderedColumns}
-						/>
-					{/if}
-				</QueryLoad>
-			</table>
-		</div>
+			<div class="noresults" class:shownoresults={showNoResults}>No Results</div>
 
-		<div class="noresults" class:shownoresults={showNoResults}>No Results</div>
-
-		{#if paginated && pageCount > 1}
-			<div class="pagination">
-				<div class="page-labels mr-auto">
-					<button
-						aria-label="first-page"
-						class="page-changer"
-						class:hovering
-						disabled={currentPage === 1}
-						on:click={() => goToPage(0)}
-					>
-						<div class="page-icon flex items-center">
-							<Icon src={ChevronsLeft} />
-						</div>
-					</button>
-					<button
-						aria-label="previous-page"
-						class="page-changer"
-						class:hovering
-						disabled={currentPage === 1}
-						on:click={() => goToPage(currentPage - 2)}
-					>
-						<div class="page-icon h-[0.83em] flex items-center">
-							<Icon src={ChevronLeft} class="h-[0.83em]" />
-						</div>
-					</button>
-					<span class="page-count">
-						Page
-						<input
-							class="page-input"
+			{#if paginated && pageCount > 1}
+				<div class="pagination">
+					<div class="page-labels mr-auto">
+						<button
+							aria-label="first-page"
+							class="page-changer"
+							class:hovering
+							disabled={currentPage === 1}
+							on:click={() => goToPage(0)}
+						>
+							<div class="page-icon flex items-center">
+								<Icon src={ChevronsLeft} />
+							</div>
+						</button>
+						<button
+							aria-label="previous-page"
+							class="page-changer"
+							class:hovering
+							disabled={currentPage === 1}
+							on:click={() => goToPage(currentPage - 2)}
+						>
+							<div class="page-icon h-[0.83em] flex items-center">
+								<Icon src={ChevronLeft} class="h-[0.83em]" />
+							</div>
+						</button>
+						<span class="page-count">
+							Page
+							<input
+								class="page-input"
+								class:hovering
+								class:error={inputPage > pageCount}
+								style="width: {inputPage ? inputPageElWidth : currentPageElWidth};"
+								type="number"
+								bind:value={inputPage}
+								on:keyup={() => goToPage((inputPage ?? 1) - 1)}
+								on:change={() => goToPage((inputPage ?? 1) - 1)}
+								placeholder={currentPage}
+							/>
+							/
+							<span class="page-count ml-1">{pageCount.toLocaleString()}</span>
+						</span>
+						<span class="print-page-count">
+							{displayedPageLength.toLocaleString()} of {totalRows.toLocaleString()} records
+						</span>
+						<button
+							aria-label="next-page"
+							class="page-changer"
+							class:hovering
+							disabled={currentPage === pageCount}
+							on:click={() => goToPage(currentPage)}
+						>
+							<div class="page-icon h-[0.83em] flex items-center">
+								<Icon src={ChevronRight} class="h-[0.83em]" />
+							</div>
+						</button>
+						<button
+							aria-label="last-page"
+							class="page-changer"
 							class:hovering
-							class:error={inputPage > pageCount}
-							style="width: {inputPage ? inputPageElWidth : currentPageElWidth};"
-							type="number"
-							bind:value={inputPage}
-							on:keyup={() => goToPage((inputPage ?? 1) - 1)}
-							on:change={() => goToPage((inputPage ?? 1) - 1)}
-							placeholder={currentPage}
-						/>
-						/
-						<span class="page-count ml-1">{pageCount.toLocaleString()}</span>
-					</span>
-					<span class="print-page-count">
-						{displayedPageLength.toLocaleString()} of {totalRows.toLocaleString()} records
-					</span>
-					<button
-						aria-label="next-page"
-						class="page-changer"
-						class:hovering
-						disabled={currentPage === pageCount}
-						on:click={() => goToPage(currentPage)}
-					>
-						<div class="page-icon h-[0.83em] flex items-center">
-							<Icon src={ChevronRight} class="h-[0.83em]" />
-						</div>
-					</button>
-					<button
-						aria-label="last-page"
-						class="page-changer"
-						class:hovering
-						disabled={currentPage === pageCount}
-						on:click={() => goToPage(pageCount - 1)}
-					>
-						<div class="page-icon flex items-center">
-							<Icon src={ChevronsRight} />
-						</div>
-					</button>
+							disabled={currentPage === pageCount}
+							on:click={() => goToPage(pageCount - 1)}
+						>
+							<div class="page-icon flex items-center">
+								<Icon src={ChevronsRight} />
+							</div>
+						</button>
+					</div>
+					{#if downloadable}
+						<DownloadData class="download-button" data={tableData} {queryID} display={hovering} />
+					{/if}
+					{#if !isFullPage}
+						<EnterFullScreen on:click={() => (fullscreen = true)} display={hovering} />
+					{/if}
 				</div>
-				{#if downloadable}
-					<DownloadData class="download-button" data={tableData} {queryID} display={hovering} />
-				{/if}
-				{#if !isFullPage}
-					<EnterFullScreen on:click={() => (fullscreen = true)} display={hovering} />
-				{/if}
-			</div>
-		{:else}
-			<div class="table-footer">
-				{#if downloadable}
-					<DownloadData class="download-button" data={tableData} {queryID} display={hovering} />
-				{/if}
-				{#if !isFullPage}
-					<EnterFullScreen on:click={() => (fullscreen = true)} display={hovering} />
-				{/if}
-			</div>
-		{/if}
-	</div>
+			{:else}
+				<div class="table-footer">
+					{#if downloadable}
+						<DownloadData class="download-button" data={tableData} {queryID} display={hovering} />
+					{/if}
+					{#if !isFullPage}
+						<EnterFullScreen on:click={() => (fullscreen = true)} display={hovering} />
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/key}
 
 	{#if generateMarkdown}
 		{#if queryID}