Add height parameter and scrolling to gr.Dataframe (#5283)

* add height and scrolling to dataframe

* add changeset

* fix test

---------

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

.changeset/wide-worlds-yawn.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Add height parameter and scrolling to `gr.Dataframe`

gradio/components/dataframe.py

@@ -54,6 +54,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
         label: str | None = None,
         every: float | None = None,
         show_label: bool | None = None,
+        height: int | float | None = None,
         scale: int | None = None,
         min_width: int = 160,
         interactive: bool | None = None,
@@ -79,6 +80,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
             label: component name in interface.
             every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
             show_label: if True, will display label.
+            height: The maximum height of the file component, in pixels. If more files are uploaded than can fit in the height, a scrollbar will appear.
             scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
             interactive: if True, will allow users to edit the dataframe; if False, can only be used to display data. If not provided, this is inferred based on whether the component is used as an input or output.
@@ -129,6 +131,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$", "right": "$", "display": False}]
         self.latex_delimiters = latex_delimiters
+        self.height = height
 
         self.select: EventListenerMethod
         """
@@ -163,6 +166,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
             "overflow_row_behaviour": self.overflow_row_behaviour,
             "wrap": self.wrap,
             "latex_delimiters": self.latex_delimiters,
+            "height": self.height,
             **IOComponent.get_config(self),
         }
 
@@ -176,6 +180,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
         latex_delimiters: list[dict[str, str | bool]] | None = None,
         scale: int | None = None,
         min_width: int | None = None,
+        height: int | float | None = None,
         interactive: bool | None = None,
         visible: bool | None = None,
     ):
@@ -186,6 +191,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
             "show_label": show_label,
             "scale": scale,
             "min_width": min_width,
+            "height": height,
             "interactive": interactive,
             "visible": visible,
             "value": value,

js/dataframe/interactive/InteractiveDataframe.svelte

@@ -22,6 +22,7 @@
 		right: string;
 		display: boolean;
 	}[];
+	export let height: number | undefined = undefined;
 
 	let old_value: string = JSON.stringify(value);
 	export let value_is_output = false;
@@ -79,5 +80,6 @@
 		{wrap}
 		{datatype}
 		{latex_delimiters}
+		{height}
 	/>
 </Block>

js/dataframe/shared/Table.svelte

@@ -27,6 +27,7 @@
 
 	export let editable = true;
 	export let wrap = false;
+	export let height: number | undefined = undefined;
 
 	let selected: false | string = false;
 
@@ -539,7 +540,7 @@
 			{label}
 		</p>
 	{/if}
-	<div class="table-wrap scroll-hide" class:dragging class:no-wrap={!wrap}>
+	<div class="table-wrap" class:dragging class:no-wrap={!wrap} style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};">
 		<Upload
 			flex={false}
 			center={false}
@@ -703,8 +704,8 @@
 		transition: 150ms;
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--table-radius);
-		overflow-x: scroll;
-		overflow-y: hidden;
+		overflow-x: auto;
+		overflow-y: auto;
 	}
 
 	.dragging {

js/dataframe/static/StaticDataframe.svelte

@@ -31,6 +31,7 @@
 		right: string;
 		display: boolean;
 	}[];
+	export let height: number | undefined = undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -78,5 +79,6 @@
 		{datatype}
 		{latex_delimiters}
 		editable={false}
+		{height}
 	/>
 </Block>

test/test_components.py

@@ -1140,6 +1140,7 @@ class TestDataframe:
             "interactive": None,
             "root_url": None,
             "wrap": False,
+            "height": None,
             "latex_delimiters": [{"display": False, "left": "$", "right": "$"}],
         }
         dataframe_input = gr.Dataframe()
@@ -1175,6 +1176,7 @@ class TestDataframe:
             "interactive": None,
             "root_url": None,
             "wrap": False,
+            "height": None,
             "latex_delimiters": [{"display": False, "left": "$", "right": "$"}],
         }