ensure gr.Dataframe updates as expected (#6290)

* ensure Dataframe updates as expected

* add changeset

* add changeset

* ensure Dataframe updates as expected

---------

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

.changeset/twelve-dolls-lay.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:ensure `gr.Dataframe` updates as expected

demo/dataframe_component/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr \n", "\n", "with gr.Blocks() as demo:\n", "    gr.Dataframe(interactive=True)\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Dataframe(interactive=True)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/dataframe_component/run.py

@@ -1,6 +1,6 @@
-import gradio as gr 
+import gradio as gr
 
 with gr.Blocks() as demo:
     gr.Dataframe(interactive=True)
 
-demo.launch()
+demo.launch()

js/dataframe/Index.svelte

@@ -99,6 +99,7 @@
 		{col_count}
 		{value}
 		{headers}
+		on:change={(e) => (value = e.detail)}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		{wrap}
 		{datatype}

js/dataframe/shared/EditableCell.svelte

@@ -44,7 +44,7 @@
 
 	function handle_blur({
 		currentTarget
-	}: {
+	}: Event & {
 		currentTarget: HTMLInputElement;
 	}): void {
 		value = currentTarget.value;