Fix width and height issues that would cut off content in `gr.DataFra…

…me` (#5616)

* fix dataframe height

* fix widths

* add changeset

* fixes

* format

* case

* add changeset

* dataframe docstring

* format

* fix ts

* test components

---------

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

.changeset/honest-phones-divide.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:Fix width and height issues that would cut off content in `gr.DataFrame`

gradio/components/dataframe.py

@@ -53,9 +53,9 @@ def __init__(
         overflow_row_behaviour: Literal["paginate", "show_ends"] = "paginate",
         latex_delimiters: list[dict[str, str | bool]] | None = None,
         label: str | None = None,
-        every: float | None = None,
         show_label: bool | None = None,
-        height: int | float | None = None,
+        every: float | None = None,
+        height: int = 500,
         scale: int | None = None,
         min_width: int = 160,
         interactive: bool | None = None,
@@ -74,14 +74,14 @@ def __init__(
             datatype: Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", "date", and "markdown".
             type: Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array.
             label: component name in interface.
-            max_rows: Maximum number of rows to display at once. Set to None for infinite.
-            max_cols: Maximum number of columns to display at once. Set to None for infinite.
-            overflow_row_behaviour: If set to "paginate", will create pages for overflow rows. If set to "show_ends", will show initial and final rows and truncate middle rows.
+            max_rows: Deprecated and has no effect. Use `row_count` instead.
+            max_cols: Deprecated and has no effect. Use `col_count` instead.
+            overflow_row_behaviour: Deprecated and has no effect.
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$", "right": "$", "display": False }]`, so only expressions enclosed in $ delimiters will be rendered as LaTeX, and in the same line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html). Only applies to columns whose datatype is "markdown".
             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.
+            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.
+            height: The maximum height of the dataframe, in pixels. If more rows are created 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.
@@ -165,7 +165,7 @@ def update(
         latex_delimiters: list[dict[str, str | bool]] | None = None,
         scale: int | None = None,
         min_width: int | None = None,
-        height: int | float | None = None,
+        height: int | None = None,
         interactive: bool | None = None,
         visible: bool | None = None,
     ):

js/dataframe/interactive/InteractiveDataframe.svelte

@@ -24,7 +24,7 @@
 		right: string;
 		display: boolean;
 	}[];
-	export let height: number | undefined = undefined;
+	export let height = 500;
 
 	let old_value: string = JSON.stringify(value);
 	export let value_is_output = false;

js/dataframe/shared/Table.svelte

@@ -28,7 +28,7 @@
 
 	export let editable = true;
 	export let wrap = false;
-	export let height: number | undefined;
+	export let height = 500;
 	let selected: false | [number, number] = false;
 
 	$: {
@@ -526,19 +526,23 @@
 	$: cells[0] && set_cell_widths();
 	let cells: HTMLTableCellElement[] = [];
 	let parent: HTMLDivElement;
+	let table: HTMLTableElement;
 
 	function set_cell_widths(): void {
 		const widths = cells.map((el, i) => {
 			return el?.clientWidth || 0;
 		});
-
 		if (widths.length === 0) return;
 		for (let i = 0; i < widths.length; i++) {
-			parent.style.setProperty(`--cell-width-${i}`, `${widths[i]}px`);
+			parent.style.setProperty(
+				`--cell-width-${i}`,
+				`${widths[i] - scrollbar_width / widths.length}px`
+			);
 		}
 	}
 
-	let table_height: number = height || 500;
+	let table_height: number = height;
+	let scrollbar_width = 0;
 
 	function sort_data(
 		_data: typeof data,
@@ -610,7 +614,7 @@
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:clientWidth={t_width}>
+		<table bind:clientWidth={t_width} bind:this={table}>
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
@@ -679,8 +683,9 @@
 			<VirtualTable
 				bind:items={data}
 				table_width={t_width}
-				max_height={height || 500}
+				max_height={height}
 				bind:actual_height={table_height}
+				bind:table_scrollbar_width={scrollbar_width}
 				selected={selected_index}
 			>
 				{#if label && label.length !== 0}

js/dataframe/shared/VirtualTable.svelte

@@ -7,6 +7,7 @@
 	export let table_width: number;
 	export let max_height: number;
 	export let actual_height: number;
+	export let table_scrollbar_width: number;
 	export let start = 0;
 	export let end = 0;
 	export let selected: number | false;
@@ -33,6 +34,7 @@
 			return;
 		}
 		const { scrollTop } = viewport;
+		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
 		content_height = top - (scrollTop - head_height);
 		let i = start;
@@ -56,14 +58,18 @@
 		end = i;
 		const remaining = _items.length - end;
 
+		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
+		if (scrollbar_height > 0) {
+			content_height += scrollbar_height;
+		}
+
 		let filtered_height_map = height_map.filter((v) => typeof v === "number");
 		average_height =
 			filtered_height_map.reduce((a, b) => a + b, 0) /
 			filtered_height_map.length;
 
 		bottom = remaining * average_height;
 		height_map.length = _items.length;
-
 		await tick();
 		if (!max_height) {
 			actual_height = content_height + 1;
@@ -206,6 +212,12 @@
 		if (align_end) {
 			distance = distance - viewport_height + _itemHeight + head_height;
 		}
+
+		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
+		if (scrollbar_height > 0) {
+			distance += scrollbar_height;
+		}
+
 		const _opts = {
 			top: distance,
 			behavior: "smooth" as ScrollBehavior,

test/test_components.py

@@ -1221,7 +1221,7 @@ def test_component_functions(self):
             "wrap": False,
             "root_url": None,
             "name": "dataframe",
-            "height": None,
+            "height": 500,
             "latex_delimiters": [{"display": False, "left": "$", "right": "$"}],
         }
         dataframe_input = gr.Dataframe()
@@ -1253,7 +1253,7 @@ def test_component_functions(self):
             "wrap": False,
             "root_url": None,
             "name": "dataframe",
-            "height": None,
+            "height": 500,
             "latex_delimiters": [{"display": False, "left": "$", "right": "$"}],
         }