@gradio/dataframe 0.15.0 → 0.16.1

package/shared/Toolbar.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
-	import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+	import { Maximize, Minimize, Copy } from "@gradio/icons";
 	import { onDestroy } from "svelte";
+	import { createEventDispatcher } from "svelte";
+	import FilterIcon from "./icons/FilterIcon.svelte";
 
 	export let show_fullscreen_button = false;
 	export let show_copy_button = false;
+	export let show_search: "none" | "search" | "filter" = "none";
 	export let is_fullscreen = false;
 	export let on_copy: () => Promise<void>;
+	export let on_commit_filter: () => void;
+
+	const dispatch = createEventDispatcher<{
+		search: string | null;
+	}>();
 
 	let copied = false;
 	let timer: ReturnType<typeof setTimeout>;
+	export let current_search_query: string | null = null;
+
+	$: dispatch("search", current_search_query);
 
 	function copy_feedback(): void {
 		copied = true;
@@ -29,41 +40,70 @@
 </script>
 
 <div class="toolbar" role="toolbar" aria-label="Table actions">
-	{#if show_copy_button}
-		<button
-			class="toolbar-button"
-			on:click={handle_copy}
-			aria-label={copied ? "Copied to clipboard" : "Copy table data"}
-			title={copied ? "Copied to clipboard" : "Copy table data"}
-		>
-			{#if copied}
-				<Check />
-			{:else}
-				<Copy />
-			{/if}
-		</button>
-	{/if}
-	{#if show_fullscreen_button}
-		<button
-			class="toolbar-button"
-			on:click
-			aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-			title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-		>
-			{#if is_fullscreen}
-				<Minimize />
-			{:else}
-				<Maximize />
-			{/if}
-		</button>
-	{/if}
+	<div class="toolbar-buttons">
+		{#if show_search !== "none"}
+			<div class="search-container">
+				<input
+					type="text"
+					bind:value={current_search_query}
+					placeholder="Search..."
+					class="search-input"
+				/>
+				{#if current_search_query && show_search === "filter"}
+					<button
+						class="toolbar-button check-button"
+						on:click={on_commit_filter}
+						aria-label="Apply filter and update dataframe values"
+						title="Apply filter and update dataframe values"
+					>
+						<FilterIcon />
+					</button>
+				{/if}
+			</div>
+		{/if}
+		{#if show_copy_button}
+			<button
+				class="toolbar-button"
+				on:click={handle_copy}
+				aria-label={copied ? "Copied to clipboard" : "Copy table data"}
+				title={copied ? "Copied to clipboard" : "Copy table data"}
+			>
+				{#if copied}
+					<FilterIcon />
+				{:else}
+					<Copy />
+				{/if}
+			</button>
+		{/if}
+		{#if show_fullscreen_button}
+			<button
+				class="toolbar-button"
+				on:click
+				aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+				title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+			>
+				{#if is_fullscreen}
+					<Minimize />
+				{:else}
+					<Maximize />
+				{/if}
+			</button>
+		{/if}
+	</div>
 </div>
 
 <style>
 	.toolbar {
 		display: flex;
-		justify-content: flex-end;
+		align-items: center;
+		gap: var(--size-2);
+		flex: 0 0 auto;
+	}
+
+	.toolbar-buttons {
+		display: flex;
 		gap: var(--size-1);
+		flex-wrap: nowrap;
 	}
 
 	.toolbar-button {
@@ -90,4 +130,59 @@
 		width: var(--size-4);
 		height: var(--size-4);
 	}
+
+	.search-container {
+		position: relative;
+	}
+
+	.search-input {
+		width: var(--size-full);
+		height: var(--size-6);
+		padding: var(--size-2);
+		padding-right: var(--size-8);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		background: var(--background-fill-secondary);
+		transition: all 0.2s ease;
+	}
+
+	.search-input:hover {
+		border-color: var(--border-color-secondary);
+		background: var(--background-fill-primary);
+	}
+
+	.search-input:focus {
+		outline: none;
+		border-color: var(--color-accent);
+		background: var(--background-fill-primary);
+		box-shadow: 0 0 0 1px var(--color-accent);
+	}
+
+	.check-button {
+		position: absolute;
+		right: var(--size-1);
+		top: 50%;
+		transform: translateY(-50%);
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		width: var(--size-4);
+		height: var(--size-4);
+		border-radius: var(--radius-sm);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--size-1);
+	}
+
+	.check-button :global(svg) {
+		width: var(--size-3);
+		height: var(--size-3);
+	}
+
+	.check-button:hover {
+		background: var(--color-accent-soft);
+	}
 </style>

package/shared/VirtualTable.svelte

@@ -10,6 +10,7 @@
 	export let start = 0;
 	export let end = 20;
 	export let selected: number | false;
+	export let disable_scroll = false;
 	let height = "100%";
 
 	let average_height = 30;
@@ -41,6 +42,11 @@
 			return;
 		}
 
+		// force header height calculation first
+		head_height =
+			viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
+		await tick();
+
 		const { scrollTop } = viewport;
 		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
@@ -256,29 +262,32 @@
 </script>
 
 <svelte-virtual-table-viewport>
-	<table
-		class="table"
-		bind:this={viewport}
-		bind:contentRect={viewport_box}
-		on:scroll={handle_scroll}
-		style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px"
-	>
-		<thead class="thead" bind:offsetHeight={head_height}>
-			<slot name="thead" />
-		</thead>
-		<tbody bind:this={contents} class="tbody">
-			{#if visible.length && visible[0].data.length}
-				{#each visible as item (item.data[0].id)}
-					<slot name="tbody" item={item.data} index={item.index}>
-						Missing Table Row
-					</slot>
-				{/each}
-			{/if}
-		</tbody>
-		<tfoot class="tfoot" bind:offsetHeight={foot_height}>
-			<slot name="tfoot" />
-		</tfoot>
-	</table>
+	<div>
+		<table
+			class="table"
+			class:disable-scroll={disable_scroll}
+			bind:this={viewport}
+			bind:contentRect={viewport_box}
+			on:scroll={handle_scroll}
+			style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px; --max-height: {max_height}px"
+		>
+			<thead class="thead" bind:offsetHeight={head_height}>
+				<slot name="thead" />
+			</thead>
+			<tbody bind:this={contents} class="tbody">
+				{#if visible.length && visible[0].data.length}
+					{#each visible as item (item.data[0].id)}
+						<slot name="tbody" item={item.data} index={item.index}>
+							Missing Table Row
+						</slot>
+					{/each}
+				{/if}
+			</tbody>
+			<tfoot class="tfoot" bind:offsetHeight={foot_height}>
+				<slot name="tfoot" />
+			</tfoot>
+		</table>
+	</div>
 </svelte-virtual-table-viewport>
 
 <style type="text/css">
@@ -287,7 +296,7 @@
 		overflow-y: scroll;
 		overflow-x: scroll;
 		-webkit-overflow-scrolling: touch;
-		max-height: 100vh;
+		max-height: var(--max-height);
 		box-sizing: border-box;
 		display: block;
 		padding: 0;
@@ -335,11 +344,49 @@
 		background: var(--table-even-background-fill);
 	}
 
+	tbody :global(td.frozen-column) {
+		position: sticky;
+		z-index: var(--layer-2);
+	}
+
+	tbody :global(tr:nth-child(odd)) :global(td.frozen-column) {
+		background: var(--table-odd-background-fill);
+	}
+
+	tbody :global(tr:nth-child(even)) :global(td.frozen-column) {
+		background: var(--table-even-background-fill);
+	}
+
+	tbody :global(td.always-frozen) {
+		z-index: var(--layer-3);
+	}
+
+	tbody :global(td.last-frozen) {
+		border-right: 2px solid var(--border-color-primary);
+	}
+
 	thead {
 		position: sticky;
 		top: 0;
 		left: 0;
-		z-index: var(--layer-1);
-		overflow: hidden;
+		z-index: var(--layer-3);
+		background: var(--background-fill-primary);
+	}
+
+	thead :global(th) {
+		background: var(--table-even-background-fill) !important;
+	}
+
+	thead :global(th.frozen-column) {
+		position: sticky;
+		z-index: var(--layer-4);
+	}
+
+	thead :global(th.always-frozen) {
+		z-index: var(--layer-5);
+	}
+
+	.table.disable-scroll {
+		overflow: hidden !important;
 	}
 </style>

package/shared/icons/FilterIcon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M4 4h16v2.67l-6.67 6.67v8L9.33 19v-5.66L2.67 6.67V4h1.33z"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/shared/icons/SortIcon.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	type SortDirection = "asc" | "des";
+	export let direction: SortDirection | null = null;
+	export let i18n: I18nFormatter;
+
+	const dispatch = createEventDispatcher<{ sort: SortDirection }>();
+</script>
+
+<div class="sort-icons" role="group" aria-label={i18n("dataframe.sort_column")}>
+	<button
+		class="sort-button up"
+		class:active={direction === "asc"}
+		on:click={() => dispatch("sort", "asc")}
+		aria-label={i18n("dataframe.sort_ascending")}
+		aria-pressed={direction === "asc"}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path
+				d="M7 14l5-5 5 5"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</button>
+	<button
+		class="sort-button down"
+		class:active={direction === "des"}
+		on:click={() => dispatch("sort", "des")}
+		aria-label={i18n("dataframe.sort_descending")}
+		aria-pressed={direction === "des"}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path
+				d="M7 10l5 5 5-5"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.sort-icons {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		margin-right: var(--spacing-md);
+	}
+
+	.sort-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		opacity: 0.5;
+		transition: opacity 150ms;
+	}
+
+	.sort-button:hover {
+		opacity: 0.8;
+	}
+
+	.sort-button.active {
+		opacity: 1;
+		color: var(--color-accent);
+	}
+
+	svg {
+		width: var(--size-3);
+		height: var(--size-3);
+		display: block;
+	}
+</style>

package/shared/selection_utils.ts

@@ -1,6 +1,6 @@
-export type CellCoordinate = [number, number];
+import type { CellCoordinate, EditingState } from "./types";
+
 export type CellData = { id: string; value: string | number };
-export type EditingState = false | CellCoordinate;
 
 export function is_cell_selected(
 	cell: CellCoordinate,
@@ -50,13 +50,12 @@ export function handle_selection(
 	}
 
 	if (event.metaKey || event.ctrlKey) {
-		const index = selected_cells.findIndex(
-			([r, c]) => r === current[0] && c === current[1]
-		);
-		if (index === -1) {
-			return [...selected_cells, current];
-		}
-		return selected_cells.filter((_, i) => i !== index);
+		const is_cell_match = ([r, c]: CellCoordinate): boolean =>
+			r === current[0] && c === current[1];
+		const index = selected_cells.findIndex(is_cell_match);
+		return index === -1
+			? [...selected_cells, current]
+			: selected_cells.filter((_, i) => i !== index);
 	}
 
 	return [current];
@@ -186,3 +185,46 @@ export function handle_click_outside(
 	const [trigger] = event.composedPath() as HTMLElement[];
 	return !parent.contains(trigger);
 }
+
+export function select_column(data: any[][], col: number): CellCoordinate[] {
+	return Array.from({ length: data.length }, (_, i) => [i, col]);
+}
+
+export function select_row(data: any[][], row: number): CellCoordinate[] {
+	return Array.from({ length: data[0].length }, (_, i) => [row, i]);
+}
+
+export function calculate_selection_positions(
+	selected: CellCoordinate,
+	data: { id: string; value: string | number }[][],
+	els: Record<string, { cell: HTMLTableCellElement | null }>,
+	parent: HTMLElement,
+	table: HTMLElement
+): { col_pos: string; row_pos: string | undefined } {
+	const [row, col] = selected;
+	if (!data[row]?.[col]) {
+		return { col_pos: "0px", row_pos: undefined };
+	}
+
+	let offset = 0;
+	for (let i = 0; i < col; i++) {
+		offset += parseFloat(
+			getComputedStyle(parent).getPropertyValue(`--cell-width-${i}`)
+		);
+	}
+
+	const cell_id = data[row][col].id;
+	const cell_el = els[cell_id]?.cell;
+
+	if (!cell_el) {
+		// if we cant get the row position, just return the column position which is static
+		return { col_pos: "0px", row_pos: undefined };
+	}
+
+	const cell_rect = cell_el.getBoundingClientRect();
+	const table_rect = table.getBoundingClientRect();
+	const col_pos = `${cell_rect.left - table_rect.left + cell_rect.width / 2}px`;
+	const relative_top = cell_rect.top - table_rect.top;
+	const row_pos = `${relative_top + cell_rect.height / 2}px`;
+	return { col_pos, row_pos };
+}

package/shared/types.ts

@@ -1,2 +1,29 @@
 export type CellCoordinate = [number, number];
 export type EditingState = CellCoordinate | false;
+
+export type Headers = (string | null)[];
+
+export interface HeadersWithIDs {
+	id: string;
+	value: string;
+}
+[];
+
+export interface TableCell {
+	id: string;
+	value: string | number;
+}
+
+export type TableData = TableCell[][];
+
+export type CountConfig = [number, "fixed" | "dynamic"];
+
+export type ElementRefs = Record<
+	string,
+	{
+		cell: null | HTMLTableCellElement;
+		input: null | HTMLInputElement;
+	}
+>;
+
+export type DataBinding = Record<string, TableCell>;

package/shared/utils/menu_utils.ts

@@ -0,0 +1,115 @@
+export function toggle_header_menu(
+	event: MouseEvent,
+	col: number,
+	active_header_menu: { col: number; x: number; y: number } | null,
+	set_active_header_menu: (
+		menu: { col: number; x: number; y: number } | null
+	) => void
+): void {
+	event.stopPropagation();
+	if (active_header_menu && active_header_menu.col === col) {
+		set_active_header_menu(null);
+	} else {
+		const header = (event.target as HTMLElement).closest("th");
+		if (header) {
+			const rect = header.getBoundingClientRect();
+			set_active_header_menu({ col, x: rect.right, y: rect.bottom });
+		}
+	}
+}
+
+export function toggle_cell_menu(
+	event: MouseEvent,
+	row: number,
+	col: number,
+	active_cell_menu: { row: number; col: number; x: number; y: number } | null,
+	set_active_cell_menu: (
+		menu: { row: number; col: number; x: number; y: number } | null
+	) => void
+): void {
+	event.stopPropagation();
+	if (
+		active_cell_menu &&
+		active_cell_menu.row === row &&
+		active_cell_menu.col === col
+	) {
+		set_active_cell_menu(null);
+	} else {
+		const cell = (event.target as HTMLElement).closest("td");
+		if (cell) {
+			const rect = cell.getBoundingClientRect();
+			set_active_cell_menu({ row, col, x: rect.right, y: rect.bottom });
+		}
+	}
+}
+
+export function add_row_at(
+	index: number,
+	position: "above" | "below",
+	add_row: (index?: number) => void,
+	clear_menus: () => void
+): void {
+	const row_index = position === "above" ? index : index + 1;
+	add_row(row_index);
+	clear_menus();
+}
+
+export function add_col_at(
+	index: number,
+	position: "left" | "right",
+	add_col: (index?: number) => void,
+	clear_menus: () => void
+): void {
+	const col_index = position === "left" ? index : index + 1;
+	add_col(col_index);
+	clear_menus();
+}
+
+export function delete_row_at(
+	index: number,
+	delete_row: (index: number) => void,
+	clear_menus: () => void
+): void {
+	delete_row(index);
+	clear_menus();
+}
+
+export function delete_col_at(
+	index: number,
+	delete_col: (index: number) => void,
+	clear_menus: () => void
+): void {
+	delete_col(index);
+	clear_menus();
+}
+
+export function toggle_header_button(
+	col: number,
+	active_button: { type: "header" | "cell"; row?: number; col: number } | null,
+	set_active_button: (
+		button: { type: "header" | "cell"; row?: number; col: number } | null
+	) => void
+): void {
+	set_active_button(
+		active_button?.type === "header" && active_button.col === col
+			? null
+			: { type: "header", col }
+	);
+}
+
+export function toggle_cell_button(
+	row: number,
+	col: number,
+	active_button: { type: "header" | "cell"; row?: number; col: number } | null,
+	set_active_button: (
+		button: { type: "header" | "cell"; row?: number; col: number } | null
+	) => void
+): void {
+	set_active_button(
+		active_button?.type === "cell" &&
+			active_button.row === row &&
+			active_button.col === col
+			? null
+			: { type: "cell", row, col }
+	);
+}