From 2b7ba4801398b6dd6b72496ea50245a0cd6852d6 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 17 Jan 2025 20:16:02 +0000 Subject: [PATCH] Add `show_row_numbers` param to gr.Dataframe (#10376) * add optional row number column * add changeset * weight tweak * test * test * fix test again * Update gradio/components/dataframe.py Co-authored-by: Abubakar Abid --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid --- .changeset/moody-bats-learn.md | 6 ++++ gradio/components/dataframe.py | 3 ++ gradio/templates.py | 6 ++++ js/dataframe/Index.svelte | 2 ++ js/dataframe/shared/EditableCell.svelte | 2 ++ js/dataframe/shared/Table.svelte | 46 ++++++++++++++++++++++--- test/components/test_dataframe.py | 2 ++ 7 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 .changeset/moody-bats-learn.md diff --git a/.changeset/moody-bats-learn.md b/.changeset/moody-bats-learn.md new file mode 100644 index 0000000000000..959dd7b06f731 --- /dev/null +++ b/.changeset/moody-bats-learn.md @@ -0,0 +1,6 @@ +--- +"@gradio/dataframe": minor +"gradio": minor +--- + +feat:Add `show_row_numbers` param to gr.Dataframe diff --git a/gradio/components/dataframe.py b/gradio/components/dataframe.py index 8eb4b3df5616a..4f820abb08bf3 100644 --- a/gradio/components/dataframe.py +++ b/gradio/components/dataframe.py @@ -93,6 +93,7 @@ def __init__( wrap: bool = False, line_breaks: bool = True, column_widths: list[str | int] | None = None, + show_row_numbers: bool = False, ): """ Parameters: @@ -120,6 +121,7 @@ def __init__( 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. + show_row_numbers: If True, will display row numbers in a separate column. """ self.wrap = wrap self.row_count = self.__process_counts(row_count) @@ -171,6 +173,7 @@ def __init__( self.column_widths = [ w if isinstance(w, str) else f"{w}px" for w in (column_widths or []) ] + self.show_row_numbers = show_row_numbers super().__init__( label=label, every=every, diff --git a/gradio/templates.py b/gradio/templates.py index 1fceca0ac17aa..00c3cd6cf497b 100644 --- a/gradio/templates.py +++ b/gradio/templates.py @@ -595,6 +595,7 @@ def __init__( wrap: bool = False, line_breaks: bool = True, column_widths: list[str | int] | None = None, + show_row_numbers: bool = False, ): super().__init__( value=value, @@ -620,6 +621,7 @@ def __init__( scale=scale, latex_delimiters=latex_delimiters, min_width=min_width, + show_row_numbers=show_row_numbers, ) @@ -659,6 +661,7 @@ def __init__( wrap: bool = False, line_breaks: bool = True, column_widths: list[str | int] | None = None, + show_row_numbers: bool = False, ): super().__init__( value=value, @@ -684,6 +687,7 @@ def __init__( scale=scale, latex_delimiters=latex_delimiters, min_width=min_width, + show_row_numbers=show_row_numbers, ) @@ -723,6 +727,7 @@ def __init__( wrap: bool = False, line_breaks: bool = True, column_widths: list[str | int] | None = None, + show_row_numbers: bool = False, ): super().__init__( value=value, @@ -748,6 +753,7 @@ def __init__( scale=scale, latex_delimiters=latex_delimiters, min_width=min_width, + show_row_numbers=show_row_numbers, ) diff --git a/js/dataframe/Index.svelte b/js/dataframe/Index.svelte index 29f0776067693..384085a904f77 100644 --- a/js/dataframe/Index.svelte +++ b/js/dataframe/Index.svelte @@ -48,6 +48,7 @@ export let max_height: number | undefined = undefined; export let loading_status: LoadingStatus; export let interactive: boolean; + export let show_row_numbers = false; $: _headers = [...(value.headers || headers)]; $: cell_values = value.data ? [...value.data] : []; @@ -96,6 +97,7 @@ i18n={gradio.i18n} {line_breaks} {column_widths} + {show_row_numbers} upload={(...args) => gradio.client.upload(...args)} stream_handler={(...args) => gradio.client.stream(...args)} bind:value_is_output diff --git a/js/dataframe/shared/EditableCell.svelte b/js/dataframe/shared/EditableCell.svelte index 80513c6fb46db..fa18654a187be 100644 --- a/js/dataframe/shared/EditableCell.svelte +++ b/js/dataframe/shared/EditableCell.svelte @@ -112,6 +112,7 @@ outline: none; border: none; background: transparent; + cursor: text; } span { @@ -122,6 +123,7 @@ -moz-user-select: text; -ms-user-select: text; user-select: text; + cursor: text; } .header { diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/shared/Table.svelte index d19f515787f01..9eb8f75c2895d 100644 --- a/js/dataframe/shared/Table.svelte +++ b/js/dataframe/shared/Table.svelte @@ -34,6 +34,7 @@ export let max_height = 500; export let line_breaks = true; export let column_widths: string[] = []; + export let show_row_numbers = false; export let upload: Client["upload"]; export let stream_handler: Client["stream"]; export let value_is_output = false; @@ -783,6 +784,9 @@ {/if} + {#if show_row_numbers} + + {/if} {#each _headers as { value, id }, i (id)} {label} {/if} + {#if show_row_numbers} + + {/if} {#each _headers as { value, id }, i (id)} - - -
{ event.stopPropagation(); @@ -906,7 +910,7 @@ > -
+ {#if editable} @@ -923,6 +927,9 @@ + {#if show_row_numbers} + {index + 1} + {/if} {#each item as { value, id }, j (id)} tr:nth-child(odd)) .row-number { + background: var(--table-odd-background-fill); + } diff --git a/test/components/test_dataframe.py b/test/components/test_dataframe.py index cf4a7e01f5297..e5153a0c21beb 100644 --- a/test/components/test_dataframe.py +++ b/test/components/test_dataframe.py @@ -47,6 +47,7 @@ def test_component_functions(self): "visible": True, "elem_id": None, "elem_classes": [], + "show_row_numbers": False, "wrap": False, "proxy_url": None, "name": "dataframe", @@ -85,6 +86,7 @@ def test_component_functions(self): "type": "pandas", "label": None, "show_label": True, + "show_row_numbers": False, "scale": None, "min_width": 160, "interactive": None,