@gradio/dataframe 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @gradio/dataframe
 
+## 0.16.0
+
+### Features
+
+- [#10561](https://github.com/gradio-app/gradio/pull/10561) [`26494ce`](https://github.com/gradio-app/gradio/commit/26494cea570ffe0ead1f8b7a7135ab5a89c6bcbd) - Allow freezing columns in `gr.Dataframe`.  Thanks @hannahblair!
+- [#10554](https://github.com/gradio-app/gradio/pull/10554) [`b8ff5d6`](https://github.com/gradio-app/gradio/commit/b8ff5d6bfe1a9f3379580754b1e23857e2f0c96b) - Add optional search bar to `gr.Dataframe`'s toolbar.  Thanks @hannahblair!
+- [#10529](https://github.com/gradio-app/gradio/pull/10529) [`196b600`](https://github.com/gradio-app/gradio/commit/196b600b3962b85781b53c512e17708644b86f6f) - Select entire row or column in dataframe.  Thanks @hannahblair!
+- [#10558](https://github.com/gradio-app/gradio/pull/10558) [`1113002`](https://github.com/gradio-app/gradio/commit/111300242fdf135724a304920a93fc34a8037f7d) - Fix spacing issue with `gr.Dataframe` in Safari.  Thanks @hannahblair!
+- [#10553](https://github.com/gradio-app/gradio/pull/10553) [`4c08b9f`](https://github.com/gradio-app/gradio/commit/4c08b9f3c0bcafb0edc56330d8d81e78a6e3763b) - Prevent scrolling when the dataframe cell menu is open.  Thanks @hannahblair!
+- [#10541](https://github.com/gradio-app/gradio/pull/10541) [`e505fab`](https://github.com/gradio-app/gradio/commit/e505fabecb17c50e073483ed7d6aab2e04c9fcf2) - Add copy button feedback to `gr.Dataframe`.  Thanks @hannahblair!
+- [#10540](https://github.com/gradio-app/gradio/pull/10540) [`deeebfb`](https://github.com/gradio-app/gradio/commit/deeebfba46f15bb3641b86e25156215d2d727087) - Revert editable text changes.  Thanks @hannahblair!
+
+### Fixes
+
+- [#10490](https://github.com/gradio-app/gradio/pull/10490) [`178311b`](https://github.com/gradio-app/gradio/commit/178311b72d72a3c5f4a67bee5e0098be4232e68c) - Ensure row numbers functionality in dataframe works as expected.  Thanks @hannahblair!
+- [#10535](https://github.com/gradio-app/gradio/pull/10535) [`d909868`](https://github.com/gradio-app/gradio/commit/d9098681f8883686a617c8f98b22c77057febed1) - Ensure `max_height` is applied in `gr.Dataframe`.  Thanks @hannahblair!
+- [#10521](https://github.com/gradio-app/gradio/pull/10521) [`79937fd`](https://github.com/gradio-app/gradio/commit/79937fd76021b31abdbc3f8f2c32ef123fd676aa) - Change word-break prop in dataframe headers.  Thanks @hannahblair!
+- [#10520](https://github.com/gradio-app/gradio/pull/10520) [`2a1fc2a`](https://github.com/gradio-app/gradio/commit/2a1fc2a92888f622579e4b2daf86be487c73004d) - Ensure links work as expected in dataframe.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.3
+- @gradio/atoms@0.13.2
+- @gradio/utils@0.10.1
+- @gradio/client@1.12.0
+- @gradio/markdown-code@0.4.0
+- @gradio/upload@0.15.1
+- @gradio/button@0.4.6
+
 ## 0.15.0
 
 ### Features

package/Dataframe.stories.svelte

@@ -204,6 +204,18 @@
 	}}
 />
 
+<Story
+	name="Dataframe with link"
+	args={{
+		values: [['<a href="https://www.google.com/">google</a>']],
+		headers: ["link"],
+		datatype: ["markdown"],
+		interactive: false,
+		col_count: [1, "dynamic"],
+		row_count: [1, "dynamic"]
+	}}
+/>
+
 <Story
 	name="Dataframe with dialog interactions"
 	args={{
@@ -236,7 +248,7 @@
 />
 
 <Story
-	name="Dataframe with fullscreen button"
+	name="Dataframe with fullscreen button and label and search"
 	args={{
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],
@@ -245,7 +257,11 @@
 			[800, 100, 400],
 			[200, 800, 700]
 		],
-		show_fullscreen_button: true
+		show_fullscreen_button: true,
+		show_label: true,
+		show_copy_button: true,
+		show_search: "search",
+		label: "Test scores"
 	}}
 />
 
@@ -319,6 +335,25 @@
 	}}
 />
 
+<Story
+	name="Dataframe with row numbers"
+	args={{
+		values: [
+			[95, 92, 88],
+			[89, 90, 85],
+			[92, 88, 91],
+			[87, 85, 89],
+			[91, 93, 90]
+		],
+		headers: ["Model A", "Model B", "Model C"],
+		label: "Model Performance",
+		col_count: [3, "dynamic"],
+		row_count: [5, "dynamic"],
+		show_row_numbers: true,
+		editable: false
+	}}
+/>
+
 <Story
 	name="Dataframe with truncated text"
 	args={{
@@ -366,3 +401,134 @@
 		editable: false
 	}}
 />
+
+<Story
+	name="Dataframe with row and column selection"
+	args={{
+		values: [
+			[1, 2, 3, 4],
+			[5, 6, 7, 8],
+			[9, 10, 11, 12],
+			[13, 14, 15, 16]
+		],
+		col_count: [4, "dynamic"],
+		row_count: [4, "dynamic"],
+		headers: ["A", "B", "C", "D"],
+		editable: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		const grid = canvas.getByRole("grid");
+		await user.click(grid);
+
+		const cells = canvas.getAllByRole("cell");
+		await user.click(cells[5]); // Click cell with value 6
+
+		const row_button = await canvas.findByRole("button", {
+			name: "Select row"
+		});
+		await user.click(row_button);
+
+		await user.click(cells[6]);
+
+		const col_button = await canvas.findByRole("button", {
+			name: "Select column"
+		});
+		await user.click(col_button);
+
+		await user.keyboard("{Delete}");
+	}}
+/>
+
+<Story
+	name="Dataframe with lots of values"
+	args={{
+		values: [
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+		],
+		col_count: [10, "dynamic"],
+		row_count: [10, "dynamic"],
+		max_height: 700
+	}}
+/>
+
+<Story
+	name="Dataframe with search and filter"
+	args={{
+		values: [
+			["Cat", 5, "Pet"],
+			["Horse", 3, "Farm"],
+			["Snake", 1, "Pet"],
+			["Cow", 4, "Farm"],
+			["Dog", 6, "Pet"]
+		],
+		headers: ["Animal", "Count", "Type"],
+		col_count: [3, "dynamic"],
+		row_count: [5, "dynamic"],
+		show_search: "filter",
+		editable: false
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		const search_input = canvas.getByPlaceholderText("Search...");
+		await user.type(search_input, "Pet");
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		const filter_button = canvas.getByLabelText(
+			"Apply filter and update dataframe values"
+		);
+		await user.click(filter_button);
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+	}}
+/>
+
+<Story
+	name="Dataframe with frozen columns"
+	args={{
+		values: [
+			["ID", "Name", "Age", "City", "Country", "Score"],
+			["1", "John", "25", "New York", "USA", "95"],
+			["2", "Emma", "30", "London", "UK", "88"],
+			["3", "Luis", "28", "Madrid", "Spain", "92"],
+			["4", "Anna", "35", "Paris", "France", "90"],
+			["5", "Chen", "27", "Beijing", "China", "94"]
+		],
+		headers: ["ID", "Name", "Age", "City", "Country", "Score"],
+		label: "User Data",
+		col_count: [6, "dynamic"],
+		row_count: [6, "dynamic"],
+		pinned_columns: 2,
+		show_row_numbers: true,
+		editable: false
+	}}
+/>

package/Index.svelte

@@ -51,9 +51,22 @@
 	export let show_fullscreen_button = false;
 	export let max_chars: number | undefined = undefined;
 	export let show_copy_button = false;
+	export let show_row_numbers = false;
+	export let show_search: "none" | "search" | "filter" = "none";
+
+	let search_query: string | null = null;
+	$: filtered_cell_values = search_query
+		? value.data?.filter((row) =>
+				row.some(
+					(cell) =>
+						search_query &&
+						String(cell).toLowerCase().includes(search_query.toLowerCase())
+				)
+			)
+		: null;
+	export let pinned_columns = 0;
 
 	$: _headers = [...(value.headers || headers)];
-	$: cell_values = value.data ? [...value.data] : [];
 	$: display_value = value?.metadata?.display_value
 		? [...value?.metadata?.display_value]
 		: null;
@@ -71,7 +84,7 @@
 	container={false}
 	{scale}
 	{min_width}
-	allow_overflow={false}
+	overflow_behavior="visible"
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -85,7 +98,7 @@
 		{show_label}
 		{row_count}
 		{col_count}
-		values={cell_values}
+		values={filtered_cell_values || value.data}
 		{display_value}
 		{styling}
 		headers={_headers}
@@ -95,6 +108,7 @@
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:search={(e) => (search_query = e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
@@ -109,5 +123,8 @@
 		{show_fullscreen_button}
 		{max_chars}
 		{show_copy_button}
+		{show_row_numbers}
+		{show_search}
+		{pinned_columns}
 	/>
 </Block>

package/dist/Index.svelte

@@ -36,10 +36,18 @@ export let interactive;
 export let show_fullscreen_button = false;
 export let max_chars = void 0;
 export let show_copy_button = false;
+export let show_row_numbers = false;
+export let show_search = "none";
+let search_query = null;
 $:
-  _headers = [...value.headers || headers];
+  filtered_cell_values = search_query ? value.data?.filter(
+    (row) => row.some(
+      (cell) => search_query && String(cell).toLowerCase().includes(search_query.toLowerCase())
+    )
+  ) : null;
+export let pinned_columns = 0;
 $:
-  cell_values = value.data ? [...value.data] : [];
+  _headers = [...value.headers || headers];
 $:
   display_value = value?.metadata?.display_value ? [...value?.metadata?.display_value] : null;
 $:
@@ -54,7 +62,7 @@ $:
 	container={false}
 	{scale}
 	{min_width}
-	allow_overflow={false}
+	overflow_behavior="visible"
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -68,7 +76,7 @@ $:
 		{show_label}
 		{row_count}
 		{col_count}
-		values={cell_values}
+		values={filtered_cell_values || value.data}
 		{display_value}
 		{styling}
 		headers={_headers}
@@ -78,6 +86,7 @@ $:
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:search={(e) => (search_query = e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
@@ -92,5 +101,8 @@ $:
 		{show_fullscreen_button}
 		{max_chars}
 		{show_copy_button}
+		{show_row_numbers}
+		{show_search}
+		{pinned_columns}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -40,6 +40,9 @@ declare const __propDef: {
         show_fullscreen_button?: boolean | undefined;
         max_chars?: number | undefined;
         show_copy_button?: boolean | undefined;
+        show_row_numbers?: boolean | undefined;
+        show_search?: ("none" | "search" | "filter") | undefined;
+        pinned_columns?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -143,4 +146,13 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_copy_button(): boolean | undefined;
     /**accessor*/
     set show_copy_button(_: boolean | undefined);
+    get show_row_numbers(): boolean | undefined;
+    /**accessor*/
+    set show_row_numbers(_: boolean | undefined);
+    get show_search(): "filter" | "none" | "search" | undefined;
+    /**accessor*/
+    set show_search(_: "filter" | "none" | "search" | undefined);
+    get pinned_columns(): number | undefined;
+    /**accessor*/
+    set pinned_columns(_: number | undefined);
 }

package/dist/shared/EditableCell.svelte

@@ -124,6 +124,7 @@ function handle_click() {
 		display: inline-block;
 		outline: none;
 		padding: var(--size-2);
+		padding-right: 0;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
@@ -133,10 +134,6 @@ function handle_click() {
 		height: 100%;
 	}
 
-	input:where(:not(.header), [data-editable="true"]) {
-		width: calc(100% - var(--size-10));
-	}
-
 	span.expanded {
 		height: auto;
 		min-height: 100%;