@gradio/dataframe 0.16.5 → 0.17.0

package/dist/shared/utils/table_utils.d.ts

@@ -1,12 +1,13 @@
-import type { Headers, HeadersWithIDs, TableCell, TableData, CountConfig, ElementRefs, DataBinding } from "../types";
+import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
 import type { SortDirection } from "./sort_utils";
 export declare function make_cell_id(row: number, col: number): string;
 export declare function make_header_id(col: number): string;
-export declare function process_data(input_values: (string | number)[][], row_count: CountConfig, col_count: CountConfig, headers: Headers, show_row_numbers: boolean, element_refs: ElementRefs, data_binding: DataBinding): TableData;
-export declare function make_headers(input_headers: Headers, show_row_numbers: boolean, col_count: CountConfig, element_refs: ElementRefs): HeadersWithIDs[];
 export declare function get_max(data: TableData): TableCell[];
-export declare function sort_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, col: number, dir: SortDirection): void;
-export declare function copy_table_data(data: TableData, selected_cells: [number, number][]): Promise<void>;
+export declare function sort_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, sort_columns: {
+    col: number;
+    direction: SortDirection;
+}[]): void;
+export declare function copy_table_data(data: TableData, selected_cells: [number, number][] | null): Promise<void>;
 export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
 export declare function data_uri_to_blob(data_uri: string): Blob;
 export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: (string | number)[][]) => void): void;

package/dist/shared/utils/table_utils.js

@@ -6,58 +6,6 @@ export function make_cell_id(row, col) {
 export function make_header_id(col) {
     return `header-${col}`;
 }
-export function process_data(input_values, row_count, col_count, headers, show_row_numbers, element_refs, data_binding) {
-    const data_row_length = input_values.length;
-    return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length)
-        .fill(0)
-        .map((_, row) => {
-        return Array(col_count[1] === "fixed"
-            ? col_count[0]
-            : data_row_length > 0
-                ? input_values[0].length
-                : headers.length)
-            .fill(0)
-            .map((_, col) => {
-            const cell_id = make_cell_id(row, col);
-            element_refs[cell_id] = element_refs[cell_id] || {
-                input: null,
-                cell: null
-            };
-            const cell_obj = {
-                value: input_values?.[row]?.[col] ?? "",
-                id: cell_id
-            };
-            data_binding[cell_id] = cell_obj;
-            return cell_obj;
-        });
-    });
-}
-export function make_headers(input_headers, show_row_numbers, col_count, element_refs) {
-    let header_list = input_headers || [];
-    if (show_row_numbers) {
-        header_list = ["", ...header_list];
-    }
-    if (col_count[1] === "fixed" && header_list.length < col_count[0]) {
-        const fill_headers = Array(col_count[0] - header_list.length)
-            .fill("")
-            .map((_, i) => `${i + header_list.length}`);
-        header_list = header_list.concat(fill_headers);
-    }
-    if (!header_list || header_list.length === 0) {
-        return Array(col_count[0])
-            .fill(0)
-            .map((_, col) => {
-            const header_id = make_header_id(col);
-            element_refs[header_id] = { cell: null, input: null };
-            return { id: header_id, value: JSON.stringify(col + 1) };
-        });
-    }
-    return header_list.map((header, col) => {
-        const header_id = make_header_id(col);
-        element_refs[header_id] = { cell: null, input: null };
-        return { id: header_id, value: header ?? "" };
-    });
-}
 export function get_max(data) {
     if (!data || !data.length)
         return [];
@@ -71,8 +19,12 @@ export function get_max(data) {
     }
     return max;
 }
-export function sort_table_data(data, display_value, styling, col, dir) {
-    const indices = sort_data(data, col, dir);
+export function sort_table_data(data, display_value, styling, sort_columns) {
+    if (!sort_columns.length)
+        return;
+    if (!data || !data.length)
+        return;
+    const indices = sort_data(data, sort_columns);
     const new_data = indices.map((i) => data[i]);
     data.splice(0, data.length, ...new_data);
     if (display_value) {
@@ -85,7 +37,11 @@ export function sort_table_data(data, display_value, styling, col, dir) {
     }
 }
 export async function copy_table_data(data, selected_cells) {
-    const csv = selected_cells.reduce((acc, [row, col]) => {
+    if (!data || !data.length)
+        return;
+    const cells_to_copy = selected_cells ||
+        data.flatMap((row, r) => row.map((_, c) => [r, c]));
+    const csv = cells_to_copy.reduce((acc, [row, col]) => {
         acc[row] = acc[row] || {};
         const value = String(data[row][col].value);
         acc[row][col] =
@@ -95,6 +51,8 @@ export async function copy_table_data(data, selected_cells) {
         return acc;
     }, {});
     const rows = Object.keys(csv).sort((a, b) => +a - +b);
+    if (!rows.length)
+        return;
     const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
     const text = rows
         .map((r) => cols.map((c) => csv[r][c] || "").join(","))
@@ -103,7 +61,6 @@ export async function copy_table_data(data, selected_cells) {
         await navigator.clipboard.writeText(text);
     }
     catch (err) {
-        console.error("Copy failed:", err);
         throw new Error("Failed to copy to clipboard: " + err.message);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.16.5",
+  "version": "0.17.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.13.3",
-    "@gradio/button": "^0.4.9",
+    "@gradio/atoms": "^0.14.0",
+    "@gradio/button": "^0.4.10",
+    "@gradio/markdown-code": "^0.4.1",
     "@gradio/client": "^1.13.1",
-    "@gradio/icons": "^0.10.0",
-    "@gradio/markdown-code": "^0.4.0",
-    "@gradio/statustracker": "^0.10.4",
-    "@gradio/upload": "^0.15.4",
-    "@gradio/utils": "^0.10.1"
+    "@gradio/statustracker": "^0.10.5",
+    "@gradio/upload": "^0.15.5",
+    "@gradio/utils": "^0.10.1",
+    "@gradio/icons": "^0.10.0"
   },
   "exports": {
     ".": {

package/shared/CellMenu.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from "svelte";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { I18nFormatter } from "js/utils/src";
+	import type { SortDirection } from "./context/table_context";
 
 	export let x: number;
 	export let y: number;
@@ -16,6 +17,10 @@
 	export let on_delete_col: () => void;
 	export let can_delete_rows: boolean;
 	export let can_delete_cols: boolean;
+	export let on_sort: (direction: SortDirection) => void = () => {};
+	export let on_clear_sort: () => void = () => {};
+	export let sort_direction: SortDirection | null = null;
+	export let sort_priority: number | null = null;
 
 	export let i18n: I18nFormatter;
 	let menu_element: HTMLDivElement;
@@ -52,6 +57,33 @@
 </script>
 
 <div bind:this={menu_element} class="cell-menu">
+	{#if is_header}
+		<button
+			on:click={() => on_sort("asc")}
+			class:active={sort_direction === "asc"}
+		>
+			<CellMenuIcons icon="sort-asc" />
+			{i18n("dataframe.sort_ascending")}
+			{#if sort_direction === "asc" && sort_priority !== null}
+				<span class="priority">{sort_priority}</span>
+			{/if}
+		</button>
+		<button
+			on:click={() => on_sort("desc")}
+			class:active={sort_direction === "desc"}
+		>
+			<CellMenuIcons icon="sort-desc" />
+			{i18n("dataframe.sort_descending")}
+			{#if sort_direction === "desc" && sort_priority !== null}
+				<span class="priority">{sort_priority}</span>
+			{/if}
+		</button>
+		<button on:click={on_clear_sort}>
+			<CellMenuIcons icon="clear-sort" />
+			{i18n("dataframe.clear_sort")}
+		</button>
+	{/if}
+
 	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
 			<CellMenuIcons icon="add-row-above" />
@@ -89,7 +121,7 @@
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: var(--layer-4);
+		z-index: 9;
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);
@@ -99,6 +131,7 @@
 		gap: var(--size-1);
 		box-shadow: var(--shadow-drop-lg);
 		min-width: 150px;
+		z-index: var(--layer-1);
 	}
 
 	.cell-menu button {
@@ -116,6 +149,11 @@
 		display: flex;
 		align-items: center;
 		gap: var(--size-2);
+		position: relative;
+	}
+
+	.cell-menu button.active {
+		background-color: var(--background-fill-secondary);
 	}
 
 	.cell-menu button:hover {
@@ -126,4 +164,17 @@
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
+
+	.priority {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		font-size: var(--size-2);
+		background-color: var(--button-secondary-background-fill);
+		color: var(--body-text-color);
+		border-radius: var(--radius-sm);
+		width: var(--size-2-5);
+		height: var(--size-2-5);
+	}
 </style>

package/shared/CellMenuButton.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let on_click: (event: MouseEvent) => void;
+</script>
+
+<button
+	aria-label="Open cell menu"
+	class="cell-menu-button"
+	on:click={on_click}
+	on:touchstart={(event) => {
+		event.preventDefault();
+		const touch = event.touches[0];
+		const mouseEvent = new MouseEvent("click", {
+			clientX: touch.clientX,
+			clientY: touch.clientY,
+			bubbles: true,
+			cancelable: true,
+			view: window
+		});
+		on_click(mouseEvent);
+	}}
+>
+	&#8942;
+</button>
+
+<style>
+	.cell-menu-button {
+		flex-shrink: 0;
+		display: none;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--block-radius);
+		width: var(--size-5);
+		height: var(--size-5);
+		min-width: var(--size-5);
+		padding: 0;
+		margin-right: var(--spacing-sm);
+		z-index: 2;
+		position: absolute;
+		right: var(--size-1);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+</style>

package/shared/CellMenuIcons.svelte

@@ -110,4 +110,83 @@
 			stroke-linecap="round"
 		/>
 	</svg>
+{:else if icon == "sort-asc"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M8 16L12 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 12V19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 7H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "sort-desc"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M8 12L12 16L16 12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 16V9"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "clear-sort"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 9H15"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 13H11"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 17H7"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M17 17L21 21M21 17L17 21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
 {/if}

package/shared/EditableCell.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { MarkdownCode } from "@gradio/markdown-code";
-
+	import type { I18nFormatter } from "@gradio/utils";
+	import SelectionButtons from "./icons/SelectionButtons.svelte";
 	export let edit: boolean;
 	export let value: string | number = "";
 	export let display_value: string | null = null;
@@ -13,7 +14,8 @@
 		| "html"
 		| "number"
 		| "bool"
-		| "date" = "str";
+		| "date"
+		| "image" = "str";
 	export let latex_delimiters: {
 		left: string;
 		right: string;
@@ -22,10 +24,23 @@
 	export let clear_on_focus = false;
 	export let line_breaks = true;
 	export let editable = true;
+	export let is_static = false;
 	export let root: string;
 	export let max_chars: number | null = null;
+	export let components: Record<string, any> = {};
+	export let i18n: I18nFormatter;
+	export let is_dragging = false;
+
+	export let show_selection_buttons = false;
+	export let coords: [number, number] | null = null;
+	export let on_select_column: ((col: number) => void) | null = null;
+	export let on_select_row: ((row: number) => void) | null = null;
+
+	const dispatch = createEventDispatcher<{
+		blur: void;
+		keydown: KeyboardEvent;
+	}>();
 
-	const dispatch = createEventDispatcher();
 	let is_expanded = false;
 
 	export let el: HTMLInputElement | null;
@@ -33,16 +48,28 @@
 
 	function truncate_text(
 		text: string | number,
-		max_length: number | null = null
+		max_length: number | null = null,
+		is_image = false
 	): string {
+		if (is_image) return String(text);
 		const str = String(text);
-		if (!max_length || str.length <= max_length) return str;
+		if (!max_length || max_length <= 0) return str;
+		if (str.length <= max_length) return str;
 		return str.slice(0, max_length) + "...";
 	}
 
-	$: display_text = is_expanded
+	$: should_truncate =
+		!edit && !is_expanded && max_chars !== null && max_chars > 0;
+
+	$: display_content = editable
 		? value
-		: truncate_text(display_value || value, max_chars);
+		: display_value !== null
+			? display_value
+			: value;
+
+	$: display_text = should_truncate
+		? truncate_text(display_content, max_chars, datatype === "image")
+		: display_content;
 
 	function use_focus(node: HTMLInputElement): any {
 		if (clear_on_focus) {
@@ -86,7 +113,10 @@
 
 {#if edit}
 	<input
+		readonly={is_static}
+		aria-readonly={is_static}
 		role="textbox"
+		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
 		bind:value={_value}
 		class:header
@@ -101,6 +131,7 @@
 {/if}
 
 <span
+	class:dragging={is_dragging}
 	on:click={handle_click}
 	on:keydown={handle_keydown}
 	tabindex="0"
@@ -111,9 +142,22 @@
 	on:focus|preventDefault
 	style={styling}
 	data-editable={editable}
+	data-max-chars={max_chars}
+	data-expanded={is_expanded}
 	placeholder=" "
+	class:text={datatype === "str"}
 >
-	{#if datatype === "html"}
+	{#if datatype === "image" && components.image}
+		<svelte:component
+			this={components.image}
+			value={{ url: display_text }}
+			show_label={false}
+			label="cell-image"
+			show_download_button={false}
+			{i18n}
+			gradio={{ dispatch: () => {} }}
+		/>
+	{:else if datatype === "html"}
 		{@html display_text}
 	{:else if datatype === "markdown"}
 		<MarkdownCode
@@ -124,23 +168,36 @@
 			{root}
 		/>
 	{:else}
-		{editable ? display_text : display_value || display_text}
+		{display_text}
 	{/if}
 </span>
+{#if show_selection_buttons && coords && on_select_column && on_select_row}
+	<SelectionButtons
+		position="column"
+		{coords}
+		on_click={() => on_select_column(coords[1])}
+	/>
+	<SelectionButtons
+		position="row"
+		{coords}
+		on_click={() => on_select_row(coords[0])}
+	/>
+{/if}
 
 <style>
+	.dragging {
+		cursor: crosshair !important;
+	}
+
 	input {
 		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		bottom: var(--size-2);
-		left: var(--size-2);
 		flex: 1 1 0%;
 		transform: translateX(-0.1px);
 		outline: none;
 		border: none;
 		background: transparent;
 		cursor: text;
+		width: calc(100% - var(--size-2));
 	}
 
 	span {
@@ -155,25 +212,37 @@
 		cursor: text;
 		width: 100%;
 		height: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	span.expanded {
+	span.text:not(.expanded) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	span.text.expanded {
 		height: auto;
 		min-height: 100%;
 		white-space: pre-wrap;
 		word-break: break-word;
-		white-space: normal;
+		overflow: visible;
 	}
 
 	.multiline {
-		white-space: pre-line;
+		white-space: pre;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.header {
 		transform: translateX(0);
 		font-weight: var(--weight-bold);
-		white-space: normal;
-		word-break: break-word;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		margin-left: var(--size-1);
 	}
 
@@ -181,4 +250,14 @@
 		opacity: 0;
 		pointer-events: none;
 	}
+
+	span :global(img) {
+		max-height: 100px;
+		width: auto;
+		object-fit: contain;
+	}
+
+	input:read-only {
+		cursor: not-allowed;
+	}
 </style>

package/shared/EmptyRowButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let on_click: () => void;
+</script>
+
+<button class="add-row-button" on:click={on_click} aria-label="Add row">
+	+
+</button>
+
+<style>
+	.add-row-button {
+		width: 100%;
+		padding: var(--size-1);
+		background: transparent;
+		border: 1px dashed var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		cursor: pointer;
+		transition: all 150ms;
+		margin-top: var(--size-2);
+		z-index: 10;
+		position: relative;
+		pointer-events: auto;
+	}
+
+	.add-row-button:hover {
+		background: var(--background-fill-secondary);
+		border-style: solid;
+	}
+</style>

package/shared/RowNumber.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let index: number | null = null;
+	export let is_header = false;
+</script>
+
+{#if is_header}
+	<th tabindex="-1" class="row-number">
+		<div class="cell-wrap">
+			<div class="header-content">
+				<div class="header-text"></div>
+			</div>
+		</div>
+	</th>
+{:else}
+	<td class="row-number" tabindex="-1" data-row={index} data-col="row-number">
+		{index !== null ? index + 1 : ""}
+	</td>
+{/if}
+
+<style>
+	.row-number {
+		text-align: center;
+		padding: var(--size-1);
+		min-width: var(--size-12);
+		width: var(--size-12);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: var(--weight-semibold);
+		background: var(--table-even-background-fill);
+		border-right: 1px solid var(--border-color-primary);
+	}
+
+	:global(tr:nth-child(odd)) .row-number {
+		background: var(--table-odd-background-fill);
+	}
+
+	:global(tr:nth-child(even)) .row-number {
+		background: var(--table-even-background-fill);
+	}
+</style>