@gradio/dataframe 0.17.2 → 0.17.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/dataframe
 
+## 0.17.3
+
+### Fixes
+
+- [#10900](https://github.com/gradio-app/gradio/pull/10900) [`a018a46`](https://github.com/gradio-app/gradio/commit/a018a46a7fae0f7db25baca7e1c08e6fd5912ed2) - Fix wrap behaviour in dataframe.  Thanks @hannahblair!
+
 ## 0.17.2
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -23,6 +23,16 @@
 			description: "Whether the DataFrame is editable",
 			name: "interactive",
 			value: true
+		},
+		wrap: {
+			control: "boolean",
+			description: "Whether text should wrap or truncate with ellipsis",
+			defaultValue: false
+		},
+		column_widths: {
+			control: "object",
+			description: "Width of each column (px, %, or auto)",
+			defaultValue: ["200px", "200px", "200px"]
 		}
 	}}
 />
@@ -238,7 +248,7 @@
 		values: [['<a href="https://www.google.com/">google</a>']],
 		headers: ["link"],
 		datatype: ["markdown"],
-		interactive: false,
+		editable: false,
 		col_count: [1, "dynamic"],
 		row_count: [1, "dynamic"]
 	}}
@@ -446,7 +456,7 @@
 		label: "Pokemon Cards",
 		col_count: [5, "fixed"],
 		row_count: [1, "dynamic"],
-		interactive: true,
+		editable: true,
 		editable: true,
 		components: {
 			image: Image
@@ -740,3 +750,63 @@
 		await userEvent.click(canvas.getByText("Clear sort"));
 	}}
 />
+
+<Story
+	name="Dataframe with text wrapping, no max chars"
+	args={{
+		values: [
+			[
+				"This is a very long text that should wrap to multiple lines when wrap is enabled",
+				"Short text",
+				"Another very long text that demonstrates wrapping behavior in the table cells"
+			],
+			[
+				"Short",
+				"This text is also quite long and should demonstrate the wrapping behavior when enabled",
+				"Medium length text here"
+			],
+			[
+				"Medium text",
+				"Brief",
+				"When wrap is disabled, this text should be truncated with an ellipsis instead of wrapping to multiple lines"
+			]
+		],
+		headers: ["Column A", "Column B", "Column C"],
+		label: "Text Wrapping Example",
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"],
+		wrap: true,
+		column_widths: ["33%", "33%", "33%"]
+	}}
+/>
+
+<Story
+	name="Dataframe text truncation and wrapping"
+	args={{
+		values: [
+			[
+				"This is a very long text that should be truncated with an ellipsis when wrap is false",
+				"Short text",
+				"Another very long text that should also be truncated with an ellipsis"
+			],
+			[
+				"Short",
+				"This text is also quite long and should be truncated with an ellipsis",
+				"Medium length text here"
+			],
+			[
+				"Medium text",
+				"Brief",
+				"When wrap is false this text should definitely be truncated with an ellipsis"
+			]
+		],
+		headers: ["Column A", "Column B", "Column C"],
+		label: "Text Truncation Example",
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"],
+		wrap: true,
+		max_chars: 50,
+		editable: false,
+		column_widths: ["200px", "200px", "200px"]
+	}}
+/>

package/dist/shared/EditableCell.svelte

@@ -17,6 +17,7 @@ export let max_chars = null;
 export let components = {};
 export let i18n;
 export let is_dragging = false;
+export let wrap_text = false;
 export let show_selection_buttons = false;
 export let coords = null;
 export let on_select_column = null;
@@ -110,6 +111,7 @@ function handle_click() {
 	data-expanded={is_expanded}
 	placeholder=" "
 	class:text={datatype === "str"}
+	class:wrap={wrap_text}
 >
 	{#if datatype === "image" && components.image}
 		<svelte:component
@@ -177,14 +179,6 @@ function handle_click() {
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	span.text:not(.expanded) {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 	}
 
 	span.text.expanded {
@@ -224,4 +218,12 @@ function handle_click() {
 	input:read-only {
 		cursor: not-allowed;
 	}
+
+	.wrap,
+	.wrap.expanded {
+		white-space: normal;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		word-wrap: break-word;
+	}
 </style>

package/dist/shared/EditableCell.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         components?: Record<string, any> | undefined;
         i18n: I18nFormatter;
         is_dragging?: boolean | undefined;
+        wrap_text?: boolean | undefined;
         show_selection_buttons?: boolean | undefined;
         coords?: ([number, number] | null) | undefined;
         on_select_column?: (((col: number) => void) | null) | undefined;

package/dist/shared/Table.svelte

@@ -826,6 +826,7 @@ $:
 								{handle_select_row}
 								bind:el={els[id]}
 								{is_dragging}
+								{wrap}
 							/>
 						{/each}
 					</tr>

package/dist/shared/TableCell.svelte

@@ -29,6 +29,7 @@ export let el;
 export let handle_select_column;
 export let handle_select_row;
 export let is_dragging;
+export let wrap = false;
 function get_cell_position(col_index) {
   if (col_index >= actual_pinned_columns) {
     return "auto";
@@ -111,6 +112,7 @@ $:
 			on_select_column={handle_select_column}
 			on_select_row={handle_select_row}
 			{is_dragging}
+			wrap_text={wrap}
 		/>
 		{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
 			<CellMenuButton on_click={(event) => toggle_cell_menu(event, index, j)} />

package/dist/shared/TableCell.svelte.d.ts

@@ -43,6 +43,7 @@ declare const __propDef: {
         handle_select_column: (col: number) => void;
         handle_select_row: (row: number) => void;
         is_dragging: boolean;
+        wrap?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -18,12 +18,12 @@
     "katex": "^0.16.7",
     "marked": "^12.0.0",
     "@gradio/atoms": "^0.14.1",
-    "@gradio/button": "^0.4.11",
     "@gradio/client": "^1.14.0",
-    "@gradio/upload": "^0.15.6",
-    "@gradio/statustracker": "^0.10.6",
+    "@gradio/button": "^0.4.11",
     "@gradio/markdown-code": "^0.4.2",
+    "@gradio/statustracker": "^0.10.6",
     "@gradio/icons": "^0.10.0",
+    "@gradio/upload": "^0.15.6",
     "@gradio/utils": "^0.10.1"
   },
   "exports": {

package/shared/EditableCell.svelte

@@ -30,6 +30,7 @@
 	export let components: Record<string, any> = {};
 	export let i18n: I18nFormatter;
 	export let is_dragging = false;
+	export let wrap_text = false;
 
 	export let show_selection_buttons = false;
 	export let coords: [number, number] | null = null;
@@ -146,6 +147,7 @@
 	data-expanded={is_expanded}
 	placeholder=" "
 	class:text={datatype === "str"}
+	class:wrap={wrap_text}
 >
 	{#if datatype === "image" && components.image}
 		<svelte:component
@@ -213,14 +215,6 @@
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	span.text:not(.expanded) {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 	}
 
 	span.text.expanded {
@@ -260,4 +254,12 @@
 	input:read-only {
 		cursor: not-allowed;
 	}
+
+	.wrap,
+	.wrap.expanded {
+		white-space: normal;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		word-wrap: break-word;
+	}
 </style>

package/shared/Table.svelte

@@ -952,6 +952,7 @@
 								{handle_select_row}
 								bind:el={els[id]}
 								{is_dragging}
+								{wrap}
 							/>
 						{/each}
 					</tr>

package/shared/TableCell.svelte

@@ -60,6 +60,7 @@
 	export let handle_select_column: (col: number) => void;
 	export let handle_select_row: (row: number) => void;
 	export let is_dragging: boolean;
+	export let wrap = false;
 
 	function get_cell_position(col_index: number): string {
 		if (col_index >= actual_pinned_columns) {
@@ -144,6 +145,7 @@
 			on_select_column={handle_select_column}
 			on_select_row={handle_select_row}
 			{is_dragging}
+			wrap_text={wrap}
 		/>
 		{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
 			<CellMenuButton on_click={(event) => toggle_cell_menu(event, index, j)} />