Better handling of empty dataframe in gr.DataFrame (#5256)

* better handling of empty dataframe

* add changeset

* hide comments

* add changeset

* remove

* lint

* null case

* add stories

* stories

* lint

---------

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

.changeset/khaki-otters-wear.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:Better handling of empty dataframe in `gr.DataFrame`

js/dataframe/Dataframe.stories.svelte

@@ -0,0 +1,63 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Table from "./shared/Table.svelte";
+</script>
+
+<Meta
+	title="Components/DataFrame"
+	component={Table}
+	argTypes={{
+		editable: {
+			control: [true, false],
+			description: "Whether the DataFrame is editable",
+			name: "interactive",
+			value: true
+		}
+	}}
+/>
+
+<Template let:args>
+	<Table {...args} />
+</Template>
+
+<Story
+	name="Interactive dataframe"
+	args={{
+		values: [
+			["Cat", 5],
+			["Horse", 3],
+			["Snake", 1]
+		],
+		headers: ["Animal", "Votes"],
+		label: "Animals",
+		col_count: [2, "dynamic"],
+		row_count: [3, "dynamic"]
+	}}
+/>
+
+<Story
+	name="Static dataframe"
+	args={{
+		values: [
+			["Cat", 5],
+			["Horse", 3],
+			["Snake", 1]
+		],
+		headers: ["Animal", "Votes"],
+		label: "Animals",
+		col_count: [2, "dynamic"],
+		row_count: [3, "dynamic"],
+		editable: false
+	}}
+/>
+
+<Story
+	name="Empty dataframe"
+	args={{
+		values: [[]],
+		headers: ["Animal", "Votes"],
+		label: "Animals",
+		col_count: [2, "dynamic"],
+		row_count: [0, "dynamic"]
+	}}
+/>

js/dataframe/shared/Table.svelte

@@ -28,13 +28,10 @@
 	$: {
 		if (values && !Array.isArray(values)) {
 			headers = values.headers;
-			values =
-				values.data.length === 0
-					? [Array(headers.length).fill("")]
-					: values.data;
+			values = values.data;
 			selected = false;
 		} else if (values === null) {
-			values = [Array(headers.length).fill("")];
+			values = [];
 			selected = false;
 		}
 	}
@@ -94,8 +91,7 @@
 		value: string | number;
 		id: string;
 	}[][] {
-		const data_row_length = _values.length > 0 ? _values.length : row_count[0];
-
+		const data_row_length = _values.length;
 		return Array(
 			row_count[1] === "fixed"
 				? row_count[0]
@@ -105,7 +101,13 @@
 		)
 			.fill(0)
 			.map((_, i) =>
-				Array(col_count[1] === "fixed" ? col_count[0] : _values[0].length)
+				Array(
+					col_count[1] === "fixed"
+						? col_count[0]
+						: data_row_length > 0
+						? _values[0].length
+						: headers.length
+				)
 					.fill(0)
 					.map((_, j) => {
 						const id = `${i}-${j}`;
@@ -321,7 +323,6 @@
 
 		if (type === "select" && typeof id == "string") {
 			const { cell } = els[id];
-			// cell?.setAttribute("tabindex", "0");
 			await tick();
 			cell?.focus();
 		}
@@ -396,6 +397,10 @@
 
 	function add_row(index?: number): void {
 		if (row_count[1] !== "dynamic") return;
+		if (data.length === 0) {
+			values = [Array(headers.length).fill("")];
+			return;
+		}
 		data.splice(
 			index ? index + 1 : data.length,
 			0,

js/dropdown/Dropdown.stories.svelte

@@ -21,8 +21,23 @@
 </Template>
 
 <Story
-	name="Default"
-	args={{ value: "swim", choices: ["run", "swim", "jump"], label: "Dropdown" }}
+	name="Single-select"
+	args={{
+		value: "swim",
+		choices: ["run", "swim", "jump"],
+		multiselect: false,
+		label: "Single-select Dropdown"
+	}}
+/>
+<Story
+	name="Single-select Static"
+	args={{
+		value: "swim",
+		choices: ["run", "swim", "jump"],
+		multiselect: false,
+		disabled: true,
+		label: "Single-select Dropdown"
+	}}
 />
 <Story
 	name="Multiselect"