From a74605572dd0d6bb41df6b38b120d656370dd67d Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 22 Aug 2023 14:42:02 -0700 Subject: [PATCH] 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 --- .changeset/wide-worlds-yawn.md | 6 ++++++ gradio/components/dataframe.py | 6 ++++++ js/dataframe/interactive/InteractiveDataframe.svelte | 2 ++ js/dataframe/shared/Table.svelte | 7 ++++--- js/dataframe/static/StaticDataframe.svelte | 2 ++ test/test_components.py | 2 ++ 6 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 .changeset/wide-worlds-yawn.md diff --git a/.changeset/wide-worlds-yawn.md b/.changeset/wide-worlds-yawn.md new file mode 100644 index 000000000000..10a267d73832 --- /dev/null +++ b/.changeset/wide-worlds-yawn.md @@ -0,0 +1,6 @@ +--- +"@gradio/dataframe": minor +"gradio": minor +--- + +feat:Add height parameter and scrolling to `gr.Dataframe` diff --git a/gradio/components/dataframe.py b/gradio/components/dataframe.py index 91da7f80f1ac..0cbde2b43b20 100644 --- a/gradio/components/dataframe.py +++ b/gradio/components/dataframe.py @@ -54,6 +54,7 @@ def __init__( 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 @@ def __init__( 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 @@ def __init__( 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 @@ def get_config(self): "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 @@ 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, interactive: bool | None = None, visible: bool | None = None, ): @@ -186,6 +191,7 @@ def update( "show_label": show_label, "scale": scale, "min_width": min_width, + "height": height, "interactive": interactive, "visible": visible, "value": value, diff --git a/js/dataframe/interactive/InteractiveDataframe.svelte b/js/dataframe/interactive/InteractiveDataframe.svelte index bfbc4ae1a0d1..351ed1dbc0d0 100644 --- a/js/dataframe/interactive/InteractiveDataframe.svelte +++ b/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} /> diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/shared/Table.svelte index f1306744b6bb..a0969fac3c28 100644 --- a/js/dataframe/shared/Table.svelte +++ b/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}

{/if} -
+
diff --git a/test/test_components.py b/test/test_components.py index d08ec05e397e..d780ccc5c1af 100644 --- a/test/test_components.py +++ b/test/test_components.py @@ -1140,6 +1140,7 @@ def test_component_functions(self): "interactive": None, "root_url": None, "wrap": False, + "height": None, "latex_delimiters": [{"display": False, "left": "$", "right": "$"}], } dataframe_input = gr.Dataframe() @@ -1175,6 +1176,7 @@ def test_component_functions(self): "interactive": None, "root_url": None, "wrap": False, + "height": None, "latex_delimiters": [{"display": False, "left": "$", "right": "$"}], }