diff --git a/.changeset/tough-adults-ask.md b/.changeset/tough-adults-ask.md
new file mode 100644
index 0000000000000..cded6119c4ec4
--- /dev/null
+++ b/.changeset/tough-adults-ask.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+feat:Ensure dataframe is not editable when `interactive` is False
diff --git a/js/dataframe/Dataframe.stories.svelte b/js/dataframe/Dataframe.stories.svelte
index 70b82d8d9a1ea..7afed1c768539 100644
--- a/js/dataframe/Dataframe.stories.svelte
+++ b/js/dataframe/Dataframe.stories.svelte
@@ -93,6 +93,26 @@
 		row_count: [3, "dynamic"],
 		editable: false
 	}}
+	play={async ({ canvasElement }) => {
+		// tests that the cell is not editable
+
+		const canvas = within(canvasElement);
+		const cells = canvas.getAllByRole("cell");
+		const initial_value = cells[0].textContent;
+
+		await userEvent.click(cells[0]);
+		await userEvent.keyboard("new value");
+
+		const final_value = cells[0].textContent;
+		if (initial_value !== final_value) {
+			throw new Error("Cell content changed when it should be non-editable");
+		}
+
+		const inputs = canvas.queryAllByRole("textbox");
+		if (inputs.length > 0) {
+			throw new Error("Input field appeared when table should be non-editable");
+		}
+	}}
 />
 
 <Story
diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/shared/Table.svelte
index 1cad6cf33485e..ac5ecd37c2944 100644
--- a/js/dataframe/shared/Table.svelte
+++ b/js/dataframe/shared/Table.svelte
@@ -614,7 +614,7 @@
 
 		selected_cells = handle_selection([row, col], selected_cells, event);
 
-		if (selected_cells.length === 1) {
+		if (selected_cells.length === 1 && editable) {
 			editing = [row, col];
 			tick().then(() => {
 				const input_el = els[data[row][col].id].input;
@@ -823,6 +823,7 @@
 									edit={false}
 									el={null}
 									{root}
+									{editable}
 								/>
 
 								<div
@@ -858,6 +859,7 @@
 									edit={false}
 									el={null}
 									{root}
+									{editable}
 								/>
 							</div>
 						</td>
@@ -923,6 +925,7 @@
 										on:dblclick={() => edit_header(i)}
 										header
 										{root}
+										{editable}
 									/>
 									<button
 										class:sorted={sort_by === i}