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 <[email protected]> --------- Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Abubakar Abid <[email protected]>
gradio-app · Jan 17, 2025 · 2b7ba48 · 2b7ba48
1 parent 31cccc3
commit 2b7ba48
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 5 deletions.
diff --git a/.changeset/moody-bats-learn.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
 			<thead>
 				<tr>
+					{#if show_row_numbers}
+						<th class="row-number-header"></th>
+					{/if}
 					{#each _headers as { value, id }, i (id)}
 						<th
 							class:editing={header_edit === i}
@@ -862,6 +866,9 @@
 					<caption class="sr-only">{label}</caption>
 				{/if}
 				<tr slot="thead">
+					{#if show_row_numbers}
+						<th class="row-number-header"></th>
+					{/if}
 					{#each _headers as { value, id }, i (id)}
 						<th
 							class:focus={header_edit === i || selected_header === i}
@@ -884,13 +891,10 @@
 										header
 										{root}
 									/>
-									<!-- TODO: fix -->
-									<!-- svelte-ignore a11y-click-events-have-key-events -->
-									<div
+									<button
 										class:sorted={sort_by === i}
 										class:des={sort_by === i && sort_direction === "des"}
 										class="sort-button {sort_direction}"
-										role="button"
 										tabindex="0"
 										on:click={(event) => {
 											event.stopPropagation();
@@ -906,7 +910,7 @@
 										>
 											<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
 										</svg>
-									</div>
+									</button>
 								</div>
 
 								{#if editable}
@@ -923,6 +927,9 @@
 				</tr>
 
 				<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
+					{#if show_row_numbers}
+						<td class="row-number" title={`Row ${index + 1}`}>{index + 1}</td>
+					{/if}
 					{#each item as { value, id }, j (id)}
 						<td
 							tabindex="0"
@@ -1241,4 +1248,33 @@
 		overflow-wrap: break-word;
 		word-break: break-word;
 	}
+
+	.row-number,
+	.row-number-header {
+		width: var(--size-7);
+		min-width: var(--size-7);
+		text-align: center;
+		background: var(--table-even-background-fill);
+		position: sticky;
+		left: 0;
+		font-size: var(--input-text-size);
+		color: var(--body-text-color);
+		padding: var(--size-1) var(--size-2);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: var(--weight-semibold);
+	}
+
+	.row-number-header {
+		z-index: var(--layer-2);
+	}
+
+	.row-number {
+		z-index: var(--layer-1);
+	}
+
+	:global(tbody > tr:nth-child(odd)) .row-number {
+		background: var(--table-odd-background-fill);
+	}
 </style>
diff --git 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,