Remove fixed layouts from dataframe (#10786)

* remove fixed layout

* add changeset

* tweak

* - remove css widths on change

* tweak

* allow % widths

* add story

* dataframe

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

Author: 3 people

.changeset/cold-paws-cheer.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:Remove fixed layouts from dataframe

gradio/components/dataframe.py

@@ -129,7 +129,7 @@ def __init__(
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             wrap: If True, the text in table cells will wrap when appropriate. If False and the `column_width` parameter is not set, the column widths will expand based on the cell contents and the table may need to be horizontally scrolled. If `column_width` is set, then any overflow text will be hidden.
             line_breaks: If True (default), will enable Github-flavored Markdown line breaks in chatbot messages. If False, single new lines will be ignored. Only applies for columns of type "markdown."
-            column_widths: An optional list representing the width of each column. The elements of the list should be in the format "100px" (ints are also accepted and converted to pixel values) or "10%". If not provided, the column widths will be automatically determined based on the content of the cells. Setting this parameter will cause the browser to try to fit the table within the page width.
+            column_widths: An optional list representing the width of each column. The elements of the list should be in the format "100px" (ints are also accepted and converted to pixel values) or "10%". The percentage width is calculated based on the viewport width of the table. If not provided, the column widths will be automatically determined based on the content of the cells.
             show_fullscreen_button: If True, will show a button to view the values in the table in fullscreen mode.
             show_copy_button: If True, will show a button to copy the table data to the clipboard.
             show_row_numbers: If True, will display row numbers in a separate column.
@@ -174,7 +174,11 @@ def __init__(
         self.max_height = max_height
         self.line_breaks = line_breaks
         self.column_widths = [
-            w if isinstance(w, str) else f"{w}px" for w in (column_widths or [])
+            w
+            if isinstance(w, str)
+            and (w.endswith("px") or w.endswith("%") or w == "auto")
+            else f"{w}px"
+            for w in (column_widths or [])
         ]
         self.show_fullscreen_button = show_fullscreen_button
         self.show_copy_button = show_copy_button

js/dataframe/Dataframe.stories.svelte

@@ -585,6 +585,20 @@
 	}}
 />
 
+<Story
+	name="Dataframe with pixel and percentage column widths set"
+	args={{
+		values: [
+			[1, 2, 3, 4, 5],
+			[6, 7, 8, 9, 10]
+		],
+		headers: ["10%", "50%", "40%", "100px", "100px"],
+		col_count: [5, "dynamic"],
+		row_count: [2, "dynamic"],
+		column_widths: ["10%", "50%", "40%", "100px", "100px"]
+	}}
+/>
+
 <Story
 	name="Dataframe with drag selection"
 	args={{

js/dataframe/shared/EditableCell.svelte

@@ -216,17 +216,18 @@
 	}
 
 	.multiline {
-		white-space: pre-line;
-		overflow: visible;
+		white-space: pre;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.header {
 		transform: translateX(0);
 		font-weight: var(--weight-bold);
-		white-space: normal;
-		word-break: break-word;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		margin-left: var(--size-1);
-		overflow: visible;
 	}
 
 	.edit {

js/dataframe/shared/Table.svelte

@@ -172,6 +172,11 @@
 	}[][] = [[]];
 
 	$: if (!dequal(values, old_val)) {
+		if (parent) {
+			for (let i = 0; i < 50; i++) {
+				parent.style.removeProperty(`--cell-width-${i}`);
+			}
+		}
 		// only reset sort state when values are changed
 		const is_reset =
 			values.length === 0 || (values.length === 1 && values[0].length === 0);
@@ -198,6 +203,10 @@
 		if ($df_state.current_search_query) {
 			df_actions.handle_search(null);
 		}
+
+		if (parent && cells.length > 0) {
+			set_cell_widths();
+		}
 	}
 
 	$: if ($df_state.current_search_query !== undefined) {
@@ -365,20 +374,29 @@
 		if (show_row_numbers) {
 			parent.style.setProperty(`--cell-width-row-number`, `${widths[0]}px`);
 		}
+
+		for (let i = 0; i < 50; i++) {
+			if (!column_widths[i]) {
+				parent.style.removeProperty(`--cell-width-${i}`);
+			} else if (column_widths[i].endsWith("%")) {
+				const percentage = parseFloat(column_widths[i]);
+				const pixel_width = Math.floor((percentage / 100) * parent.clientWidth);
+				parent.style.setProperty(`--cell-width-${i}`, `${pixel_width}px`);
+			} else {
+				parent.style.setProperty(`--cell-width-${i}`, column_widths[i]);
+			}
+		}
+
 		widths.forEach((width, i) => {
 			if (!column_widths[i]) {
-				parent.style.setProperty(
-					`--cell-width-${i}`,
-					`${width - scrollbar_width / widths.length}px`
-				);
+				const calculated_width = `${Math.max(width, 45)}px`;
+				parent.style.setProperty(`--cell-width-${i}`, calculated_width);
 			}
 		});
 	}
 
 	function get_cell_width(index: number): string {
-		return column_widths[index]
-			? `${column_widths[index]}`
-			: `var(--cell-width-${index})`;
+		return `var(--cell-width-${index})`;
 	}
 
 	let table_height: number =
@@ -725,7 +743,7 @@
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:this={table} class:fixed-layout={column_widths.length != 0}>
+		<table bind:this={table}>
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
@@ -1021,10 +1039,6 @@
 		border-collapse: separate;
 	}
 
-	table.fixed-layout {
-		table-layout: fixed;
-	}
-
 	thead {
 		position: sticky;
 		top: 0;

js/dataframe/shared/TableHeader.svelte

@@ -79,6 +79,7 @@
 		event.preventDefault();
 		event.stopPropagation();
 	}}
+	title={value}
 >
 	<div class="cell-wrap">
 		<div class="header-content">
@@ -89,6 +90,7 @@
 					event.preventDefault();
 					event.stopPropagation();
 				}}
+				title={value}
 			>
 				<EditableCell
 					{max_chars}
@@ -209,8 +211,11 @@
 	}
 
 	.header-button {
+		display: flex;
 		text-align: left;
 		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		display: flex;
 		align-items: center;
 		position: relative;