Ensure dataframe is not editable when interactive is False (#10494)

* fix editing logic

* add story

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/tough-adults-ask.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+feat:Ensure dataframe is not editable when `interactive` is False

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

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}