@gradio/dataframe 0.16.5 → 0.17.1

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

@@ -17,6 +17,7 @@ declare const __propDef: {
             right: string;
             display: boolean;
         }[];
+        components?: Record<string, any> | undefined;
         editable?: boolean | undefined;
         wrap?: boolean | undefined;
         root: string;
@@ -33,8 +34,10 @@ declare const __propDef: {
         max_chars?: number | undefined;
         show_search?: ("none" | "search" | "filter") | undefined;
         pinned_columns?: number | undefined;
+        static_columns?: (string | number)[] | undefined;
         display_value?: (string[][] | null) | undefined;
         styling?: (string[][] | null) | undefined;
+        reset_sort_state?: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<DataframeValue>;
@@ -50,5 +53,6 @@ export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
 export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+    get reset_sort_state(): () => void;
 }
 export {};

package/dist/shared/TableCell.svelte

@@ -0,0 +1,291 @@
+<script>import EditableCell from "./EditableCell.svelte";
+import CellMenuButton from "./CellMenuButton.svelte";
+import { is_cell_in_selection } from "./selection_utils";
+export let value;
+export let index;
+export let j;
+export let actual_pinned_columns;
+export let get_cell_width;
+export let handle_cell_click;
+export let toggle_cell_menu;
+export let is_cell_selected;
+export let should_show_cell_menu;
+export let selected_cells;
+export let copy_flash;
+export let active_cell_menu;
+export let styling;
+export let latex_delimiters;
+export let line_breaks;
+export let datatype;
+export let editing;
+export let clear_on_focus;
+export let max_chars;
+export let root;
+export let editable;
+export let is_static = false;
+export let i18n;
+export let components = {};
+export let el;
+export let handle_select_column;
+export let handle_select_row;
+export let is_dragging;
+function get_cell_position(col_index) {
+  if (col_index >= actual_pinned_columns) {
+    return "auto";
+  }
+  if (col_index === 0) {
+    return "0";
+  }
+  const previous_widths = Array(col_index).fill(0).map((_, idx) => {
+    return get_cell_width(idx);
+  }).join(" + ");
+  return `calc(${previous_widths})`;
+}
+$:
+  cell_classes = is_cell_selected([index, j], selected_cells || []);
+$:
+  is_in_selection = is_cell_in_selection([index, j], selected_cells);
+$:
+  has_no_top = cell_classes.includes("no-top");
+$:
+  has_no_bottom = cell_classes.includes("no-bottom");
+$:
+  has_no_left = cell_classes.includes("no-left");
+$:
+  has_no_right = cell_classes.includes("no-right");
+</script>
+
+<td
+	class:pinned-column={j < actual_pinned_columns}
+	class:last-pinned={j === actual_pinned_columns - 1}
+	tabindex={j < actual_pinned_columns ? -1 : 0}
+	bind:this={el.cell}
+	data-row={index}
+	data-col={j}
+	data-testid={`cell-${index}-${j}`}
+	on:mousedown={(e) => handle_cell_click(e, index, j)}
+	on:contextmenu|preventDefault={(e) => toggle_cell_menu(e, index, j)}
+	style="width: {get_cell_width(j)}; left: {get_cell_position(j)}; {styling ||
+		''}"
+	class:flash={copy_flash && is_in_selection}
+	class:cell-selected={is_in_selection}
+	class:no-top={has_no_top}
+	class:no-bottom={has_no_bottom}
+	class:no-left={has_no_left}
+	class:no-right={has_no_right}
+	class:menu-active={active_cell_menu &&
+		active_cell_menu.row === index &&
+		active_cell_menu.col === j}
+	class:dragging={is_dragging}
+>
+	<div class="cell-wrap">
+		<EditableCell
+			bind:value
+			bind:el={el.input}
+			display_value={String(value)}
+			{latex_delimiters}
+			{line_breaks}
+			{editable}
+			{is_static}
+			edit={editing && editing[0] === index && editing[1] === j}
+			{datatype}
+			on:blur={() => {
+				clear_on_focus = false;
+			}}
+			on:focus={() => {
+				const row = index;
+				const col = j;
+				if (!selected_cells.some(([r, c]) => r === row && c === col)) {
+					selected_cells = [[row, col]];
+				}
+			}}
+			{clear_on_focus}
+			{root}
+			{max_chars}
+			{i18n}
+			{components}
+			show_selection_buttons={selected_cells.length === 1 &&
+				selected_cells[0][0] === index &&
+				selected_cells[0][1] === j}
+			coords={[index, j]}
+			on_select_column={handle_select_column}
+			on_select_row={handle_select_row}
+			{is_dragging}
+		/>
+		{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
+			<CellMenuButton on_click={(event) => toggle_cell_menu(event, index, j)} />
+		{/if}
+	</div>
+</td>
+
+<style>
+	td {
+		--ring-color: transparent;
+		position: relative;
+		outline: none;
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		border-right-width: 0px;
+		border-left-width: 1px;
+		border-style: solid;
+		border-color: var(--border-color-primary);
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		margin: 0;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		border-radius: var(--table-radius);
+	}
+
+	.cell-selected {
+		--ring-color: var(--color-accent);
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+		z-index: 2;
+		position: relative;
+	}
+
+	.cell-selected :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.flash.cell-selected {
+		animation: flash-color 700ms ease-out;
+	}
+
+	@keyframes flash-color {
+		0%,
+		30% {
+			background: var(--color-accent-copied);
+		}
+
+		100% {
+			background: transparent;
+		}
+	}
+
+	.pinned-column {
+		position: sticky;
+		z-index: 3;
+		border-right: none;
+	}
+
+	.pinned-column:nth-child(odd) {
+		background: var(--table-odd-background-fill);
+	}
+
+	.pinned-column:nth-child(even) {
+		background: var(--table-even-background-fill);
+	}
+
+	td:first-child {
+		border-left-width: 0px;
+	}
+
+	:global(tr:last-child) td:first-child {
+		border-bottom-left-radius: var(--table-radius);
+	}
+
+	:global(tr:last-child) td:last-child {
+		border-bottom-right-radius: var(--table-radius);
+	}
+
+	.dragging {
+		cursor: crosshair;
+	}
+
+	/* Add back the cell selection border styles */
+	.cell-selected.no-top {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-right {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset 2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-left {
+		box-shadow:
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-right {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-left {
+		box-shadow:
+			inset -2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-right {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-bottom {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left.no-right {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-left.no-right {
+		box-shadow: inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-left.no-right {
+		box-shadow: inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left.no-top.no-bottom {
+		box-shadow: inset -2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-right.no-top.no-bottom {
+		box-shadow: inset 2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-bottom.no-left.no-right {
+		box-shadow: none;
+	}
+</style>

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

@@ -0,0 +1,57 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "js/core/src/gradio_helper";
+import type { Datatype } from "./utils";
+declare const __propDef: {
+    props: {
+        value: string | number;
+        index: number;
+        j: number;
+        actual_pinned_columns: number;
+        get_cell_width: (index: number) => string;
+        handle_cell_click: (event: MouseEvent, row: number, col: number) => void;
+        toggle_cell_menu: (event: MouseEvent, row: number, col: number) => void;
+        is_cell_selected: (coords: [number, number], selected_cells: [number, number][]) => string;
+        should_show_cell_menu: (coords: [number, number], selected_cells: [number, number][], editable: boolean) => boolean;
+        selected_cells: [number, number][];
+        copy_flash: boolean;
+        active_cell_menu: {
+            row: number;
+            col: number;
+            x: number;
+            y: number;
+        } | null;
+        styling: string | undefined;
+        latex_delimiters: {
+            left: string;
+            right: string;
+            display: boolean;
+        }[];
+        line_breaks: boolean;
+        datatype: Datatype;
+        editing: [number, number] | false;
+        clear_on_focus: boolean;
+        max_chars: number | undefined;
+        root: string;
+        editable: boolean;
+        is_static?: boolean | undefined;
+        i18n: I18nFormatter;
+        components?: Record<string, any> | undefined;
+        el: {
+            cell: HTMLTableCellElement | null;
+            input: HTMLInputElement | null;
+        };
+        handle_select_column: (col: number) => void;
+        handle_select_row: (row: number) => void;
+        is_dragging: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableCellProps = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = typeof __propDef.slots;
+export default class TableCell extends SvelteComponent<TableCellProps, TableCellEvents, TableCellSlots> {
+}
+export {};

package/dist/shared/TableHeader.svelte

@@ -0,0 +1,239 @@
+<script>import EditableCell from "./EditableCell.svelte";
+import CellMenuButton from "./CellMenuButton.svelte";
+import Padlock from "./icons/Padlock.svelte";
+import SortArrowUp from "./icons/SortArrowUp.svelte";
+import SortArrowDown from "./icons/SortArrowDown.svelte";
+export let value;
+export let i;
+export let actual_pinned_columns;
+export let header_edit;
+export let selected_header;
+export let get_sort_status;
+export let headers;
+export let get_cell_width;
+export let handle_header_click;
+export let toggle_header_menu;
+export let end_header_edit;
+export let sort_columns = [];
+export let latex_delimiters;
+export let line_breaks;
+export let max_chars;
+export let root;
+export let editable;
+export let i18n;
+export let el;
+export let is_static;
+export let col_count;
+$:
+  can_add_columns = col_count && col_count[1] === "dynamic";
+$:
+  sort_index = sort_columns.findIndex((item) => item.col === i);
+$:
+  sort_priority = sort_index !== -1 ? sort_index + 1 : null;
+$:
+  current_direction = sort_index !== -1 ? sort_columns[sort_index].direction : null;
+function get_header_position(col_index) {
+  if (col_index >= actual_pinned_columns) {
+    return "auto";
+  }
+  if (col_index === 0) {
+    return "0";
+  }
+  const previous_widths = Array(col_index).fill(0).map((_, idx) => {
+    return get_cell_width(idx);
+  }).join(" + ");
+  return `calc(${previous_widths})`;
+}
+</script>
+
+<th
+	class:pinned-column={i < actual_pinned_columns}
+	class:last-pinned={i === actual_pinned_columns - 1}
+	class:focus={header_edit === i || selected_header === i}
+	class:sorted={sort_index !== -1}
+	aria-sort={get_sort_status(value, headers) === "none"
+		? "none"
+		: get_sort_status(value, headers) === "asc"
+			? "ascending"
+			: "descending"}
+	style="width: {get_cell_width(i)}; left: {get_header_position(i)};"
+	on:click={(event) => handle_header_click(event, i)}
+	on:mousedown={(event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	}}
+	title={value}
+>
+	<div class="cell-wrap">
+		<div class="header-content">
+			<button
+				class="header-button"
+				on:click={(event) => handle_header_click(event, i)}
+				on:mousedown={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}}
+				title={value}
+			>
+				<EditableCell
+					{max_chars}
+					bind:value
+					bind:el
+					{latex_delimiters}
+					{line_breaks}
+					edit={header_edit === i}
+					on:keydown={(event) => {
+						if (
+							event.detail.key === "Enter" ||
+							event.detail.key === "Escape" ||
+							event.detail.key === "Tab"
+						) {
+							end_header_edit(event);
+						}
+					}}
+					header
+					{root}
+					{editable}
+					{is_static}
+					{i18n}
+				/>
+				{#if sort_index !== -1}
+					<div class="sort-indicators">
+						<span class="sort-arrow">
+							{#if current_direction === "asc"}
+								<SortArrowUp size={12} />
+							{:else}
+								<SortArrowDown size={12} />
+							{/if}
+						</span>
+						{#if sort_columns.length > 1}
+							<span class="sort-priority">
+								{sort_priority}
+							</span>
+						{/if}
+					</div>
+				{/if}
+			</button>
+			{#if is_static}
+				<Padlock />
+			{/if}
+		</div>
+		{#if can_add_columns}
+			<CellMenuButton on_click={(event) => toggle_header_menu(event, i)} />
+		{/if}
+	</div>
+</th>
+
+<style>
+	th {
+		--ring-color: transparent;
+		position: relative;
+		outline: none;
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		background: var(--table-even-background-fill);
+		border-right-width: 0px;
+		border-left-width: 1px;
+		border-style: solid;
+		border-color: var(--border-color-primary);
+	}
+
+	th:first-child {
+		border-top-left-radius: var(--table-radius);
+		border-bottom-left-radius: var(--table-radius);
+		border-left-width: 0px;
+	}
+
+	th:last-child {
+		border-top-right-radius: var(--table-radius);
+		border-bottom-right-radius: var(--table-radius);
+	}
+
+	th.focus {
+		--ring-color: var(--color-accent);
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+		z-index: 4;
+	}
+
+	th.focus :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	th:hover :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		margin: 0;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		border-radius: var(--table-radius);
+	}
+
+	.header-content {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		flex-grow: 1;
+		min-width: 0;
+		white-space: normal;
+		overflow-wrap: break-word;
+		word-break: normal;
+		height: 100%;
+		gap: var(--size-1);
+	}
+
+	.header-button {
+		display: flex;
+		text-align: left;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	.sort-indicators {
+		display: flex;
+		align-items: center;
+		margin-left: var(--size-1);
+		gap: var(--size-1);
+	}
+
+	.sort-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--body-text-color);
+	}
+
+	.sort-priority {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		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);
+		padding: var(--size-1-5);
+	}
+
+	.pinned-column {
+		position: sticky;
+		z-index: 5;
+		border-right: none;
+	}
+</style>

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

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "js/core/src/gradio_helper";
+import type { SortDirection } from "./context/table_context";
+declare const __propDef: {
+    props: {
+        value: string;
+        i: number;
+        actual_pinned_columns: number;
+        header_edit: number | false;
+        selected_header: number | false;
+        get_sort_status: (value: string, headers: string[]) => "none" | "asc" | "desc";
+        headers: string[];
+        get_cell_width: (index: number) => string;
+        handle_header_click: (event: MouseEvent, col: number) => void;
+        toggle_header_menu: (event: MouseEvent, col: number) => void;
+        end_header_edit: (event: CustomEvent<KeyboardEvent>) => void;
+        sort_columns?: {
+            col: number;
+            direction: SortDirection;
+        }[] | undefined;
+        latex_delimiters: {
+            left: string;
+            right: string;
+            display: boolean;
+        }[];
+        line_breaks: boolean;
+        max_chars: number | undefined;
+        root: string;
+        editable: boolean;
+        i18n: I18nFormatter;
+        el: HTMLInputElement | null;
+        is_static: boolean;
+        col_count: [number, "fixed" | "dynamic"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableHeaderProps = typeof __propDef.props;
+export type TableHeaderEvents = typeof __propDef.events;
+export type TableHeaderSlots = typeof __propDef.slots;
+export default class TableHeader extends SvelteComponent<TableHeaderProps, TableHeaderEvents, TableHeaderSlots> {
+}
+export {};

package/dist/shared/Toolbar.svelte

@@ -1,7 +1,6 @@
-<script>import { Maximize, Minimize, Copy } from "@gradio/icons";
+<script>import { Maximize, Minimize, Copy, Check } 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";
@@ -12,8 +11,16 @@ const dispatch = createEventDispatcher();
 let copied = false;
 let timer;
 export let current_search_query = null;
-$:
-  dispatch("search", current_search_query);
+let input_value = "";
+function handle_search_input(e) {
+  const target = e.target;
+  input_value = target.value;
+  const new_query = input_value || null;
+  if (current_search_query !== new_query) {
+    current_search_query = new_query;
+    dispatch("search", current_search_query);
+  }
+}
 function copy_feedback() {
   copied = true;
   if (timer)
@@ -38,9 +45,12 @@ onDestroy(() => {
 			<div class="search-container">
 				<input
 					type="text"
-					bind:value={current_search_query}
-					placeholder="Search..."
+					value={current_search_query || ""}
+					on:input={handle_search_input}
+					placeholder={show_search === "filter" ? "Filter..." : "Search..."}
 					class="search-input"
+					class:filter-mode={show_search === "filter"}
+					title={`Enter text to ${show_search} the table`}
 				/>
 				{#if current_search_query && show_search === "filter"}
 					<button
@@ -49,7 +59,7 @@ onDestroy(() => {
 						aria-label="Apply filter and update dataframe values"
 						title="Apply filter and update dataframe values"
 					>
-						<FilterIcon />
+						<Check />
 					</button>
 				{/if}
 			</div>
@@ -62,7 +72,7 @@ onDestroy(() => {
 				title={copied ? "Copied to clipboard" : "Copy table data"}
 			>
 				{#if copied}
-					<FilterIcon />
+					<Check />
 				{:else}
 					<Copy />
 				{/if}