Adds column_widths to gr.Dataframe and hide overflowing text when wrap=False (#5894)

* changes

* added prop

* add changeset

* table

* null case

* fix tests

* add story

* format

* lint

* add changeset

* Update js/dataframe/shared/Table.svelte

Co-authored-by: aliabid94 <aabid94@gmail.com>

* add support for ints

* added test

* docstring

* format

---------

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

.changeset/wise-beans-itch.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Adds `column_widths` to `gr.Dataframe` and hide overflowing text when `wrap=False`

gradio/components/dataframe.py

@@ -78,6 +78,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
         elem_classes: list[str] | str | None = None,
         wrap: bool = False,
         line_breaks: bool = True,
+        column_widths: list[str | int] | None = None,
         **kwargs,
     ):
         """
@@ -103,8 +104,9 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
-            wrap: if True text in table cells will wrap when appropriate, if False the table will scroll horizontally. Defaults to False.
+            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.
         """
 
         self.wrap = wrap
@@ -150,6 +152,9 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
         self.latex_delimiters = latex_delimiters
         self.height = height
         self.line_breaks = line_breaks
+        self.column_widths = [
+            w if isinstance(w, str) else f"{w}px" for w in (column_widths or [])
+        ]
 
         self.select: EventListenerMethod
         """

js/dataframe/Dataframe.stories.svelte

@@ -127,3 +127,21 @@
 		editable: false
 	}}
 />
+
+<Story
+	name="Dataframe with column widths"
+	args={{
+		value: {
+			data: [
+				[800, 100, 800],
+				[200, 800, 700]
+			],
+			headers: ["Narrow", "Wide", "Half"]
+		},
+		label: "Test scores",
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		column_widths: ["20%", "30%", "50%"],
+		editable: false
+	}}
+/>

js/dataframe/interactive/InteractiveDataframe.svelte

@@ -34,6 +34,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let line_breaks = true;
+	export let column_widths: string[] = [];
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;
@@ -100,5 +101,6 @@
 		{latex_delimiters}
 		{height}
 		{line_breaks}
+		{column_widths}
 	/>
 </Block>

js/dataframe/shared/Table.svelte

@@ -34,6 +34,8 @@
 	export let wrap = false;
 	export let height = 500;
 	export let line_breaks = true;
+	export let column_widths: string[] = [];
+
 	let selected: false | [number, number] = false;
 	let display_value: string[][] | null = value?.metadata?.display_value ?? null;
 	let styling: string[][] | null = value?.metadata?.styling ?? null;
@@ -653,7 +655,11 @@
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:clientWidth={t_width} bind:this={table}>
+		<table
+			bind:clientWidth={t_width}
+			bind:this={table}
+			class:fixed-layout={column_widths.length != 0}
+		>
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
@@ -663,6 +669,7 @@
 						<th
 							class:editing={header_edit === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
+							style:width={column_widths.length ? column_widths[i] : undefined}
 						>
 							<div class="cell-wrap">
 								<EditableCell
@@ -917,6 +924,18 @@
 		border-spacing: 0;
 	}
 
+	div:not(.no-wrap) td {
+		overflow-wrap: anywhere;
+	}
+
+	div.no-wrap td {
+		overflow-x: hidden;
+	}
+
+	table.fixed-layout {
+		table-layout: fixed;
+	}
+
 	thead {
 		position: sticky;
 		top: 0;

js/dataframe/static/StaticDataframe.svelte

@@ -25,6 +25,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let line_breaks = true;
+	export let column_widths: string[] = [];
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;
@@ -92,5 +93,6 @@
 		editable={false}
 		{height}
 		{line_breaks}
+		{column_widths}
 	/>
 </Block>

test/test_components.py

@@ -1247,6 +1247,7 @@ class TestDataframe:
             "height": 500,
             "latex_delimiters": [{"display": False, "left": "$", "right": "$"}],
             "line_breaks": True,
+            "column_widths": [],
         }
         dataframe_input = gr.Dataframe()
         output = dataframe_input.preprocess(x_data)
@@ -1280,8 +1281,16 @@ class TestDataframe:
             "height": 500,
             "latex_delimiters": [{"display": False, "left": "$", "right": "$"}],
             "line_breaks": True,
+            "column_widths": [],
         }
 
+        dataframe_input = gr.Dataframe(column_widths=["100px", 200, "50%"])
+        assert dataframe_input.get_config()["column_widths"] == [
+            "100px",
+            "200px",
+            "50%",
+        ]
+
     def test_postprocess(self):
         """
         postprocess