@gradio/dataframe 0.21.7 → 0.23.0

package/dist/types.d.ts

@@ -0,0 +1,32 @@
+import type { SelectData } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { DataframeValue, Datatype, EditData } from "./shared/utils/utils";
+export interface DataframeEvents {
+    change: DataframeValue;
+    input: never;
+    select: SelectData;
+    edit: EditData;
+    clear_status: LoadingStatus;
+}
+export interface DataframeProps {
+    value: DataframeValue;
+    col_count: [number, "fixed" | "dynamic"];
+    row_count: [number, "fixed" | "dynamic"];
+    wrap: boolean;
+    datatype: Datatype | Datatype[];
+    line_breaks: boolean;
+    column_widths: string[];
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    max_height: number;
+    buttons: string[] | null;
+    max_chars: number | undefined;
+    show_row_numbers: boolean;
+    show_search: "none" | "search" | "filter";
+    pinned_columns: number;
+    static_columns: (string | number)[];
+    fullscreen: boolean;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.21.7",
+  "version": "0.23.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,15 +13,17 @@
     "@types/katex": "^0.16.7",
     "d3-dsv": "^3.0.1",
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.22.2",
-    "@gradio/button": "^0.6.5",
-    "@gradio/icons": "^0.15.1",
+    "@tanstack/table-core": "^8.21.3",
+    "@tanstack/virtual-core": "^3.13.6",
+    "@gradio/atoms": "^0.23.0",
+    "@gradio/button": "^0.6.6",
+    "@gradio/checkbox": "^0.6.6",
     "@gradio/client": "^2.1.0",
-    "@gradio/markdown-code": "^0.6.1",
-    "@gradio/statustracker": "^0.12.5",
-    "@gradio/upload": "^0.17.7",
-    "@gradio/utils": "^0.12.0",
-    "@gradio/checkbox": "^0.6.4"
+    "@gradio/icons": "^0.15.1",
+    "@gradio/statustracker": "^0.13.1",
+    "@gradio/upload": "^0.17.8",
+    "@gradio/utils": "^0.12.2",
+    "@gradio/markdown-code": "^0.6.1"
   },
   "exports": {
     ".": {
@@ -40,8 +42,7 @@
     "svelte": ">=5.0.0"
   },
   "devDependencies": {
-    "@gradio/dataframe-interim": "^0.21.0",
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.2"
   },
   "repository": {
     "type": "git",

package/shared/BooleanCell.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
 	import { BaseCheckbox } from "@gradio/checkbox";
 
-	export let value = false;
-	export let editable = true;
-	export let on_change: (value: boolean) => void;
+	let {
+		value = $bindable(false),
+		editable = true,
+		on_change
+	}: {
+		value?: boolean;
+		editable?: boolean;
+		on_change: (value: boolean) => void;
+	} = $props();
 
-	function handle_change(event: CustomEvent<boolean>): void {
+	function handle_change(val: boolean): void {
 		if (editable) {
-			on_change(event.detail);
+			on_change(val);
 		}
 	}
 </script>
@@ -17,7 +23,7 @@
 		bind:value
 		label=""
 		interactive={editable}
-		on:change={handle_change}
+		on_change={handle_change}
 	/>
 </div>
 

package/shared/CellMenu.svelte

@@ -3,44 +3,66 @@
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import FilterMenu from "./FilterMenu.svelte";
 	import type { I18nFormatter } from "@gradio/utils";
-	import type {
-		SortDirection,
-		FilterDatatype
-	} from "./context/dataframe_context";
-
-	export let x: number;
-	export let y: number;
-	export let on_add_row_above: () => void;
-	export let on_add_row_below: () => void;
-	export let on_add_column_left: () => void;
-	export let on_add_column_right: () => void;
-	export let row: number;
-	export let col_count: [number, "fixed" | "dynamic"];
-	export let row_count: [number, "fixed" | "dynamic"];
-	export let on_delete_row: () => void;
-	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 on_filter: (
-		datatype: FilterDatatype,
-		selected_filter: string,
-		value: string
-	) => void = () => {};
-	export let on_clear_filter: () => void = () => {};
-	export let filter_active: boolean | null = null;
-	export let editable = true;
-
-	export let i18n: I18nFormatter;
+	import type { SortDirection, FilterDatatype } from "./types";
+
+	let {
+		x,
+		y,
+		on_add_row_above,
+		on_add_row_below,
+		on_add_column_left,
+		on_add_column_right,
+		row,
+		col_count,
+		row_count,
+		on_delete_row,
+		on_delete_col,
+		can_delete_rows,
+		can_delete_cols,
+		on_sort = () => {},
+		on_clear_sort = () => {},
+		sort_direction = null,
+		sort_priority = null,
+		on_filter = () => {},
+		on_clear_filter = () => {},
+		filter_active = null,
+		editable = true,
+		i18n
+	}: {
+		x: number;
+		y: number;
+		on_add_row_above: () => void;
+		on_add_row_below: () => void;
+		on_add_column_left: () => void;
+		on_add_column_right: () => void;
+		row: number;
+		col_count: [number, "fixed" | "dynamic"];
+		row_count: [number, "fixed" | "dynamic"];
+		on_delete_row: () => void;
+		on_delete_col: () => void;
+		can_delete_rows: boolean;
+		can_delete_cols: boolean;
+		on_sort?: (direction: SortDirection) => void;
+		on_clear_sort?: () => void;
+		sort_direction?: SortDirection | null;
+		sort_priority?: number | null;
+		on_filter?: (
+			datatype: FilterDatatype,
+			selected_filter: string,
+			value: string
+		) => void;
+		on_clear_filter?: () => void;
+		filter_active?: boolean | null;
+		editable?: boolean;
+		i18n: I18nFormatter;
+	} = $props();
+
 	let menu_element: HTMLDivElement;
-	let active_filter_menu: { x: number; y: number } | null = null;
+	let active_filter_menu: { x: number; y: number } | null = $state(null);
 
-	$: is_header = row === -1;
-	$: can_add_rows = editable && row_count[1] === "dynamic";
-	$: can_add_columns = editable && col_count[1] === "dynamic";
+	let is_header = $derived(row === -1);
+	let can_add_rows = $derived(editable && row_count[1] === "dynamic");
+	let can_add_columns = $derived(editable && col_count[1] === "dynamic");
 
 	onMount(() => {
 		position_menu();
@@ -86,7 +108,7 @@
 	{#if is_header}
 		<button
 			role="menuitem"
-			on:click={() => on_sort("asc")}
+			onclick={() => on_sort("asc")}
 			class:active={sort_direction === "asc"}
 		>
 			<CellMenuIcons icon="sort-asc" />
@@ -97,7 +119,7 @@
 		</button>
 		<button
 			role="menuitem"
-			on:click={() => on_sort("desc")}
+			onclick={() => on_sort("desc")}
 			class:active={sort_direction === "desc"}
 		>
 			<CellMenuIcons icon="sort-desc" />
@@ -106,13 +128,16 @@
 				<span class="priority">{sort_priority}</span>
 			{/if}
 		</button>
-		<button role="menuitem" on:click={on_clear_sort}>
+		<button role="menuitem" onclick={on_clear_sort}>
 			<CellMenuIcons icon="clear-sort" />
 			{i18n("dataframe.clear_sort")}
 		</button>
 		<button
 			role="menuitem"
-			on:click|stopPropagation={toggle_filter_menu}
+			onclick={(e) => {
+				e.stopPropagation();
+				toggle_filter_menu();
+			}}
 			class:active={filter_active || active_filter_menu}
 		>
 			<CellMenuIcons icon="filter" />
@@ -121,7 +146,7 @@
 				<span class="priority">1</span>
 			{/if}
 		</button>
-		<button role="menuitem" on:click={on_clear_filter}>
+		<button role="menuitem" onclick={on_clear_filter}>
 			<CellMenuIcons icon="clear-filter" />
 			{i18n("dataframe.clear_filter")}
 		</button>
@@ -130,7 +155,7 @@
 	{#if !is_header && can_add_rows}
 		<button
 			role="menuitem"
-			on:click={() => on_add_row_above()}
+			onclick={() => on_add_row_above()}
 			aria-label="Add row above"
 		>
 			<CellMenuIcons icon="add-row-above" />
@@ -138,7 +163,7 @@
 		</button>
 		<button
 			role="menuitem"
-			on:click={() => on_add_row_below()}
+			onclick={() => on_add_row_below()}
 			aria-label="Add row below"
 		>
 			<CellMenuIcons icon="add-row-below" />
@@ -147,7 +172,7 @@
 		{#if can_delete_rows}
 			<button
 				role="menuitem"
-				on:click={on_delete_row}
+				onclick={on_delete_row}
 				class="delete"
 				aria-label="Delete row"
 			>
@@ -159,7 +184,7 @@
 	{#if can_add_columns}
 		<button
 			role="menuitem"
-			on:click={() => on_add_column_left()}
+			onclick={() => on_add_column_left()}
 			aria-label="Add column to the left"
 		>
 			<CellMenuIcons icon="add-column-left" />
@@ -167,7 +192,7 @@
 		</button>
 		<button
 			role="menuitem"
-			on:click={() => on_add_column_right()}
+			onclick={() => on_add_column_right()}
 			aria-label="Add column to the right"
 		>
 			<CellMenuIcons icon="add-column-right" />
@@ -176,7 +201,7 @@
 		{#if can_delete_cols}
 			<button
 				role="menuitem"
-				on:click={on_delete_col}
+				onclick={on_delete_col}
 				class="delete"
 				aria-label="Delete column"
 			>
@@ -194,7 +219,7 @@
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: 9;
+		z-index: var(--layer-1);
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);
@@ -204,7 +229,7 @@
 		gap: var(--size-1);
 		box-shadow: var(--shadow-drop-lg);
 		min-width: 150px;
-		z-index: var(--layer-1);
+		width: max-content;
 	}
 
 	.cell-menu button {

package/shared/CellMenuButton.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let on_click: (event: MouseEvent) => void;
+	let { on_click }: { on_click: (event: MouseEvent) => void } = $props();
 </script>
 
 <button
 	aria-label="Open cell menu"
 	class="cell-menu-button"
 	aria-haspopup="menu"
-	on:click={on_click}
-	on:touchstart={(event) => {
+	onclick={on_click}
+	ontouchstart={(event) => {
 		event.preventDefault();
 		const touch = event.touches[0];
 		const mouseEvent = new MouseEvent("click", {

package/shared/CellMenuIcons.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let icon: string;
+	let { icon }: { icon: string } = $props();
 </script>
 
 {#if icon == "add-column-right"}

package/shared/DataCell.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { CellValue } from "./types";
+	import type { Datatype } from "./utils/utils";
+
+	let {
+		value,
+		display_value = null,
+		datatype = "str",
+		row_idx,
+		col_idx,
+		col_style = "",
+		cell_style = "",
+		selection_classes = "",
+		is_editing = false,
+		is_flash = false,
+		is_static = false,
+		show_menu_button = false,
+		show_selection_buttons = false,
+		is_first_column = false,
+		latex_delimiters,
+		line_breaks = true,
+		editable = true,
+		max_chars = undefined,
+		i18n,
+		components = {},
+		is_dragging = false,
+		wrap_text = false,
+		onmousedown,
+		ondblclick,
+		oncontextmenu,
+		onblur,
+		on_menu_click,
+		on_select_column,
+		on_select_row
+	}: {
+		value: CellValue;
+		display_value?: string | null;
+		datatype?: Datatype;
+		row_idx: number;
+		col_idx: number;
+		col_style?: string;
+		cell_style?: string;
+		selection_classes?: string;
+		is_editing?: boolean;
+		is_flash?: boolean;
+		is_static?: boolean;
+		show_menu_button?: boolean;
+		show_selection_buttons?: boolean;
+		is_first_column?: boolean;
+		latex_delimiters: { left: string; right: string; display: boolean }[];
+		line_breaks?: boolean;
+		editable?: boolean;
+		max_chars?: number | undefined;
+		i18n: I18nFormatter;
+		components?: Record<string, any>;
+		is_dragging?: boolean;
+		wrap_text?: boolean;
+		onmousedown: (event: MouseEvent) => void;
+		ondblclick: (event: MouseEvent) => void;
+		oncontextmenu: (event: MouseEvent) => void;
+		onblur: (detail: {
+			blur_event: FocusEvent;
+			coords: [number, number];
+		}) => void;
+		on_menu_click: (event: MouseEvent) => void;
+		on_select_column: (col: number) => void;
+		on_select_row: (row: number) => void;
+	} = $props();
+
+	let is_selected = $derived(selection_classes !== "");
+</script>
+
+<div
+	class="body-cell {selection_classes}"
+	class:flash={is_flash}
+	class:first-column={is_first_column}
+	data-row={row_idx}
+	data-col={col_idx}
+	data-testid={`cell-${row_idx}-${col_idx}`}
+	{onmousedown}
+	{ondblclick}
+	{oncontextmenu}
+	style="{col_style} {cell_style}"
+>
+	<div class="cell-wrap">
+		<EditableCell
+			{value}
+			{display_value}
+			{latex_delimiters}
+			{line_breaks}
+			{editable}
+			{is_static}
+			edit={is_editing}
+			{datatype}
+			{onblur}
+			{max_chars}
+			{i18n}
+			{components}
+			{show_selection_buttons}
+			coords={[row_idx, col_idx]}
+			{on_select_column}
+			{on_select_row}
+			{is_dragging}
+			{wrap_text}
+		/>
+		{#if show_menu_button}
+			<CellMenuButton on_click={on_menu_click} />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.body-cell {
+		--ring-color: transparent;
+		outline: none;
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		overflow: visible;
+		box-sizing: border-box;
+	}
+
+	.body-cell.first-column {
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+	}
+
+	.body-cell:hover :global(.cell-menu-button),
+	.body-cell.cell-selected :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.body-cell.cell-selected {
+		--ring-color: var(--color-accent);
+		--sel-top: inset 0 2px 0 0 var(--ring-color);
+		--sel-bottom: inset 0 -2px 0 0 var(--ring-color);
+		--sel-left: inset 2px 0 0 0 var(--ring-color);
+		--sel-right: inset -2px 0 0 0 var(--ring-color);
+		box-shadow:
+			var(--sel-top), var(--sel-bottom), var(--sel-left), var(--sel-right);
+		z-index: 2;
+		position: relative;
+	}
+
+	.body-cell.cell-selected.no-top {
+		--sel-top: inset 0 0 0 0 transparent;
+	}
+	.body-cell.cell-selected.no-bottom {
+		--sel-bottom: inset 0 0 0 0 transparent;
+	}
+	.body-cell.cell-selected.no-left {
+		--sel-left: inset 0 0 0 0 transparent;
+	}
+	.body-cell.cell-selected.no-right {
+		--sel-right: inset 0 0 0 0 transparent;
+	}
+
+	.body-cell.flash.cell-selected {
+		animation: flash-color 700ms ease-out;
+	}
+
+	@keyframes flash-color {
+		0%,
+		30% {
+			background: var(--color-accent-copied);
+		}
+		100% {
+			background: transparent;
+		}
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		height: 100%;
+	}
+</style>