@gradio/dataframe 0.14.0 → 0.16.0

package/dist/shared/Table.svelte.d.ts

@@ -30,6 +30,9 @@ declare const __propDef: {
         show_fullscreen_button?: boolean | undefined;
         show_copy_button?: boolean | undefined;
         value_is_output?: boolean | undefined;
+        max_chars?: number | undefined;
+        show_search?: ("none" | "search" | "filter") | undefined;
+        pinned_columns?: number | undefined;
         display_value?: (string[][] | null) | undefined;
         styling?: (string[][] | null) | undefined;
     };
@@ -37,6 +40,7 @@ declare const __propDef: {
         change: CustomEvent<DataframeValue>;
         input: CustomEvent<undefined>;
         select: CustomEvent<SelectData>;
+        search: CustomEvent<string | null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/Toolbar.svelte

@@ -1,11 +1,19 @@
-<script>import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+<script>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";
 export let is_fullscreen = false;
 export let on_copy;
+export let on_commit_filter;
+const dispatch = createEventDispatcher();
 let copied = false;
 let timer;
+export let current_search_query = null;
+$:
+  dispatch("search", current_search_query);
 function copy_feedback() {
   copied = true;
   if (timer)
@@ -25,41 +33,70 @@ onDestroy(() => {
 </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 {
@@ -86,4 +123,59 @@ onDestroy(() => {
 		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/dist/shared/Toolbar.svelte.d.ts

@@ -3,11 +3,15 @@ declare const __propDef: {
     props: {
         show_fullscreen_button?: boolean | undefined;
         show_copy_button?: boolean | undefined;
+        show_search?: ("none" | "search" | "filter") | undefined;
         is_fullscreen?: boolean | undefined;
         on_copy: () => Promise<void>;
+        on_commit_filter: () => void;
+        current_search_query?: (string | null) | undefined;
     };
     events: {
         click: MouseEvent;
+        search: CustomEvent<string | null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/VirtualTable.svelte

@@ -7,6 +7,7 @@ export let table_scrollbar_width;
 export let start = 0;
 export let end = 20;
 export let selected;
+export let disable_scroll = false;
 let height = "100%";
 let average_height = 30;
 let bottom = 0;
@@ -32,6 +33,8 @@ async function refresh_height_map(_items) {
   if (viewport_height === 0) {
     return;
   }
+  head_height = viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
+  await tick();
   const { scrollTop } = viewport;
   table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
   content_height = top - (scrollTop - head_height);
@@ -202,29 +205,32 @@ onMount(() => {
 </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>
@@ -233,7 +239,7 @@ onMount(() => {
 		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;
@@ -281,11 +287,49 @@ onMount(() => {
 		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/dist/shared/VirtualTable.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         start?: number | undefined;
         end?: number | undefined;
         selected: number | false;
+        disable_scroll?: boolean | undefined;
         scroll_to_index?: ((index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>) | undefined;
     };
     events: {

package/dist/shared/icons/FilterIcon.svelte

@@ -0,0 +1,11 @@
+<script></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/dist/shared/icons/FilterIcon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FilterIconProps = typeof __propDef.props;
+export type FilterIconEvents = typeof __propDef.events;
+export type FilterIconSlots = typeof __propDef.slots;
+export default class FilterIcon extends SvelteComponent<FilterIconProps, FilterIconEvents, FilterIconSlots> {
+}
+export {};

package/dist/shared/icons/SortIcon.svelte

@@ -0,0 +1,90 @@
+<script>import { createEventDispatcher } from "svelte";
+export let direction = null;
+export let i18n;
+const dispatch = createEventDispatcher();
+</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/dist/shared/icons/SortIcon.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        direction?: (("asc" | "des") | null) | undefined;
+        i18n: I18nFormatter;
+    };
+    events: {
+        sort: CustomEvent<"asc" | "des">;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SortIconProps = typeof __propDef.props;
+export type SortIconEvents = typeof __propDef.events;
+export type SortIconSlots = typeof __propDef.slots;
+export default class SortIcon extends SvelteComponent<SortIconProps, SortIconEvents, SortIconSlots> {
+}
+export {};

package/dist/shared/selection_utils.d.ts

@@ -0,0 +1,30 @@
+import type { CellCoordinate, EditingState } from "./types";
+export type CellData = {
+    id: string;
+    value: string | number;
+};
+export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
+export declare function get_range_selection(start: CellCoordinate, end: CellCoordinate): CellCoordinate[];
+export declare function handle_selection(current: CellCoordinate, selected_cells: CellCoordinate[], event: {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+}): CellCoordinate[];
+export declare function handle_delete_key(data: CellData[][], selected_cells: CellCoordinate[]): CellData[][];
+export declare function handle_editing_state(current: CellCoordinate, editing: EditingState, selected_cells: CellCoordinate[], editable: boolean): EditingState;
+export declare function should_show_cell_menu(cell: CellCoordinate, selected_cells: CellCoordinate[], editable: boolean): boolean;
+export declare function get_next_cell_coordinates(current: CellCoordinate, data: CellData[][], shift_key: boolean): CellCoordinate | false;
+export declare function move_cursor(key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp", current_coords: CellCoordinate, data: CellData[][]): CellCoordinate | false;
+export declare function get_current_indices(id: string, data: CellData[][]): [number, number];
+export declare function handle_click_outside(event: Event, parent: HTMLElement): boolean;
+export declare function select_column(data: any[][], col: number): CellCoordinate[];
+export declare function select_row(data: any[][], row: number): CellCoordinate[];
+export declare 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;
+};

package/dist/shared/selection_utils.js

@@ -0,0 +1,139 @@
+export function is_cell_selected(cell, selected_cells) {
+    const [row, col] = cell;
+    if (!selected_cells.some(([r, c]) => r === row && c === col))
+        return "";
+    const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
+    const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+    const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
+    const right = selected_cells.some(([r, c]) => r === row && c === col + 1);
+    return `cell-selected${up ? " no-top" : ""}${down ? " no-bottom" : ""}${left ? " no-left" : ""}${right ? " no-right" : ""}`;
+}
+export function get_range_selection(start, end) {
+    const [start_row, start_col] = start;
+    const [end_row, end_col] = end;
+    const min_row = Math.min(start_row, end_row);
+    const max_row = Math.max(start_row, end_row);
+    const min_col = Math.min(start_col, end_col);
+    const max_col = Math.max(start_col, end_col);
+    const cells = [];
+    for (let i = min_row; i <= max_row; i++) {
+        for (let j = min_col; j <= max_col; j++) {
+            cells.push([i, j]);
+        }
+    }
+    return cells;
+}
+export function handle_selection(current, selected_cells, event) {
+    if (event.shiftKey && selected_cells.length > 0) {
+        return get_range_selection(selected_cells[selected_cells.length - 1], current);
+    }
+    if (event.metaKey || event.ctrlKey) {
+        const is_cell_match = ([r, c]) => 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];
+}
+export function handle_delete_key(data, selected_cells) {
+    const new_data = data.map((row) => [...row]);
+    selected_cells.forEach(([row, col]) => {
+        if (new_data[row] && new_data[row][col]) {
+            new_data[row][col] = { ...new_data[row][col], value: "" };
+        }
+    });
+    return new_data;
+}
+export function handle_editing_state(current, editing, selected_cells, editable) {
+    const [row, col] = current;
+    if (!editable)
+        return false;
+    if (editing && editing[0] === row && editing[1] === col)
+        return editing;
+    if (selected_cells.length === 1 &&
+        selected_cells[0][0] === row &&
+        selected_cells[0][1] === col) {
+        return [row, col];
+    }
+    return false;
+}
+export function should_show_cell_menu(cell, selected_cells, editable) {
+    const [row, col] = cell;
+    return (editable &&
+        selected_cells.length === 1 &&
+        selected_cells[0][0] === row &&
+        selected_cells[0][1] === col);
+}
+export function get_next_cell_coordinates(current, data, shift_key) {
+    const [row, col] = current;
+    const direction = shift_key ? -1 : 1;
+    if (data[row]?.[col + direction]) {
+        return [row, col + direction];
+    }
+    const next_row = row + (direction > 0 ? 1 : 0);
+    const prev_row = row + (direction < 0 ? -1 : 0);
+    if (direction > 0 && data[next_row]?.[0]) {
+        return [next_row, 0];
+    }
+    if (direction < 0 && data[prev_row]?.[data[0].length - 1]) {
+        return [prev_row, data[0].length - 1];
+    }
+    return false;
+}
+export function move_cursor(key, current_coords, data) {
+    const dir = {
+        ArrowRight: [0, 1],
+        ArrowLeft: [0, -1],
+        ArrowDown: [1, 0],
+        ArrowUp: [-1, 0]
+    }[key];
+    const i = current_coords[0] + dir[0];
+    const j = current_coords[1] + dir[1];
+    if (i < 0 && j <= 0) {
+        return false;
+    }
+    const is_data = data[i]?.[j];
+    if (is_data) {
+        return [i, j];
+    }
+    return false;
+}
+export function get_current_indices(id, data) {
+    return data.reduce((acc, arr, i) => {
+        const j = arr.reduce((_acc, _data, k) => (id === _data.id ? k : _acc), -1);
+        return j === -1 ? acc : [i, j];
+    }, [-1, -1]);
+}
+export function handle_click_outside(event, parent) {
+    const [trigger] = event.composedPath();
+    return !parent.contains(trigger);
+}
+export function select_column(data, col) {
+    return Array.from({ length: data.length }, (_, i) => [i, col]);
+}
+export function select_row(data, row) {
+    return Array.from({ length: data[0].length }, (_, i) => [row, i]);
+}
+export function calculate_selection_positions(selected, data, els, parent, table) {
+    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/dist/shared/types.d.ts

@@ -0,0 +1,18 @@
+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>;