@gradio/dataframe 0.19.3 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/dataframe
 
+## 0.20.0
+
+### Features
+
+- [#11959](https://github.com/gradio-app/gradio/pull/11959) [`cb16ca5`](https://github.com/gradio-app/gradio/commit/cb16ca5123030beebcb24ddc287fcf958bd3fbe2) - Ensure interactivity works as expected in standalone dataframe.  Thanks @hannahblair!
+
+## 0.19.4
+
+### Fixes
+
+- [#11648](https://github.com/gradio-app/gradio/pull/11648) [`57d8d65`](https://github.com/gradio-app/gradio/commit/57d8d6598645e438337c78c1c8e0759f876fb193) - Dataframe Edit Event.  Thanks @deckar01!
+
+### Dependency updates
+
+- @gradio/markdown-code@0.5.2
+
 ## 0.19.3
 
 ### Features

package/Index.svelte

@@ -41,6 +41,7 @@
 		input: never;
 		clear_status: LoadingStatus;
 		search: string | null;
+		edit: SelectData;
 	}>;
 	export let latex_delimiters: {
 		left: string;
@@ -95,6 +96,7 @@
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:edit={(e) => gradio.dispatch("edit", e.detail)}
 		on:fullscreen={({ detail }) => {
 			fullscreen = detail;
 		}}

package/dist/Index.svelte

@@ -78,6 +78,7 @@ export let fullscreen = false;
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:edit={(e) => gradio.dispatch("edit", e.detail)}
 		on:fullscreen={({ detail }) => {
 			fullscreen = detail;
 		}}

package/dist/Index.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
             input: never;
             clear_status: LoadingStatus;
             search: string | null;
+            edit: SelectData;
         }>;
         latex_delimiters: {
             left: string;
@@ -111,6 +112,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         input: never;
         clear_status: LoadingStatus;
         search: string | null;
+        edit: SelectData;
     }>;
     /**accessor*/
     set gradio(_: Gradio<{
@@ -119,6 +121,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         input: never;
         clear_status: LoadingStatus;
         search: string | null;
+        edit: SelectData;
     }>);
     get latex_delimiters(): {
         left: string;

package/dist/shared/BooleanCell.svelte

@@ -2,7 +2,6 @@
 export let value = false;
 export let editable = true;
 export let on_change;
-$: bool_value = typeof value === "string" ? value.toLowerCase() === "true" : !!value;
 function handle_change(event) {
   if (editable) {
     on_change(event.detail);
@@ -12,7 +11,7 @@ function handle_change(event) {
 
 <div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
-		bind:value={bool_value}
+		bind:value
 		label=""
 		interactive={editable}
 		on:change={handle_change}

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: boolean | string;
+        value?: boolean;
         editable?: boolean;
         on_change: (value: boolean) => void;
     };

package/dist/shared/EditableCell.svelte

@@ -48,18 +48,11 @@ function handle_blur(event) {
 function handle_keydown(event) {
   dispatch("keydown", event);
 }
-function handle_bool_change(new_value) {
-  value = new_value.toString();
-  dispatch("blur", {
-    blur_event: {
-      target: {
-        type: "checkbox",
-        checked: new_value,
-        value: new_value.toString()
-      }
-    },
-    coords
-  });
+function commit_change(checked) {
+  handle_blur({ target: { value } });
+}
+$: if (!edit) {
+  handle_blur({ target: { value } });
 }
 </script>
 
@@ -80,12 +73,8 @@ function handle_bool_change(new_value) {
 	/>
 {/if}
 
-{#if datatype === "bool"}
-	<BooleanCell
-		value={String(display_content)}
-		{editable}
-		on_change={handle_bool_change}
-	/>
+{#if datatype === "bool" && typeof value === "boolean"}
+	<BooleanCell bind:value {editable} on_change={commit_change} />
 {:else}
 	<span
 		class:dragging={is_dragging}

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
+import type { CellValue } from "./types";
 declare const __propDef: {
     props: {
         edit: boolean;
-        value?: string | number;
+        value?: CellValue;
         display_value?: string | null;
         styling?: string;
         header?: boolean;

package/dist/shared/Table.svelte

@@ -28,7 +28,6 @@ import {
   handle_file_upload
 } from "./utils/table_utils";
 import { make_headers, process_data } from "./utils/data_processing";
-import { cast_value_to_type } from "./utils/utils";
 import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 import {
   create_drag_handlers
@@ -180,7 +179,8 @@ $: if (!dequal(values, old_val)) {
     els,
     data_binding,
     make_id,
-    display_value
+    display_value,
+    datatype
   );
   old_val = JSON.parse(JSON.stringify(values));
   if (is_reset || is_different_structure) {
@@ -235,26 +235,18 @@ $: if ($df_state.current_search_query !== void 0) {
   filtered_to_original_map = [];
 }
 let previous_headers = _headers.map((h) => h.value);
-let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+let previous_data = data.map((row) => row.map((cell) => cell.value));
 $: {
   if (data || _headers) {
     df_actions.trigger_change(
-      data.map(
-        (row, rowIdx) => row.map((cell, colIdx) => {
-          const dtype = Array.isArray(datatype) ? datatype[colIdx] : datatype;
-          return {
-            ...cell,
-            value: cast_value_to_type(cell.value, dtype)
-          };
-        })
-      ),
+      data,
       _headers,
       previous_data,
       previous_headers,
       value_is_output,
       dispatch
     );
-    previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+    previous_data = data.map((row) => row.map((cell) => cell.value));
     previous_headers = _headers.map((h) => h.value);
   }
 }

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

@@ -2,14 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import { type Client } from "@gradio/client";
-import type { Headers, DataframeValue, Datatype } from "./utils/utils";
+import type { Headers, DataframeValue, Datatype, EditData } from "./utils/utils";
+import type { CellValue } from "./types";
 declare const __propDef: {
     props: {
         datatype: Datatype | Datatype[];
         label?: string | null;
         show_label?: boolean;
         headers?: Headers;
-        values?: (string | number)[][];
+        values?: CellValue[][];
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
         latex_delimiters: {
@@ -46,6 +47,7 @@ declare const __propDef: {
         input: CustomEvent<undefined>;
         select: CustomEvent<SelectData>;
         search: CustomEvent<string | null>;
+        edit: CustomEvent<EditData>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import type { Datatype } from "./utils/utils";
+import type { CellValue } from "./types";
 declare const __propDef: {
     props: {
-        value: string | number;
+        value: CellValue;
         index: number;
         j: number;
         actual_pinned_columns: number;

package/dist/shared/context/dataframe_context.d.ts

@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
+import type { CellValue } from "../types";
 import { get_next_cell_coordinates, get_range_selection, move_cursor } from "../utils/selection_utils";
 export declare const DATAFRAME_KEY: unique symbol;
 export type SortDirection = "asc" | "desc";
@@ -18,7 +19,7 @@ interface DataFrameState {
         max_height: number;
         column_widths: string[];
         max_chars?: number;
-        static_columns?: (string | number)[];
+        static_columns?: CellValue[];
     };
     current_search_query: string | null;
     sort_state: {
@@ -30,7 +31,7 @@ interface DataFrameState {
         initial_data: {
             data: {
                 id: string;
-                value: string | number;
+                value: CellValue;
             }[][];
             display_value: string[][] | null;
             styling: string[][] | null;
@@ -46,7 +47,7 @@ interface DataFrameState {
         initial_data: {
             data: {
                 id: string;
-                value: string | number;
+                value: CellValue;
             }[][];
             display_value: string[][] | null;
             styling: string[][] | null;
@@ -105,7 +106,7 @@ interface DataFrameActions {
         data: any[][];
         headers: string[];
     };
-    trigger_change: (data: any[][], headers: any[], previous_data: string[][], previous_headers: string[], value_is_output: boolean, dispatch: (e: "change" | "input", detail?: any) => void) => Promise<void>;
+    trigger_change: (data: any[][], headers: any[], previous_data: any[][], previous_headers: string[], value_is_output: boolean, dispatch: (e: "change" | "input" | "edit", detail?: any) => void) => Promise<void>;
     reset_sort_state: () => void;
     reset_filter_state: () => void;
     set_active_cell_menu: (menu: {
@@ -169,10 +170,10 @@ export interface DataFrameContext {
         input: HTMLTextAreaElement | null;
     }>;
     parent_element?: HTMLElement;
-    get_data_at?: (row: number, col: number) => string | number;
-    get_column?: (col: number) => (string | number)[];
-    get_row?: (row: number) => (string | number)[];
-    dispatch?: (e: "change" | "select" | "search", detail?: any) => void;
+    get_data_at?: (row: number, col: number) => CellValue;
+    get_column?: (col: number) => CellValue[];
+    get_row?: (row: number) => CellValue[];
+    dispatch?: (e: "change" | "select" | "search" | "edit", detail?: any) => void;
 }
 export declare function create_dataframe_context(config: DataFrameState["config"]): DataFrameContext;
 export declare function get_dataframe_context(): DataFrameContext;

package/dist/shared/context/dataframe_context.js

@@ -152,7 +152,7 @@ function create_actions(state, context) {
             if (s.current_search_query)
                 return;
             const current_headers = headers.map((h) => h.value);
-            const current_data = data.map((row) => row.map((cell) => String(cell.value)));
+            const current_data = data.map((row) => row.map((cell) => cell.value));
             if (!dequal(current_data, previous_data) ||
                 !dequal(current_headers, previous_headers)) {
                 if (!dequal(current_headers, previous_headers)) {
@@ -166,6 +166,14 @@ function create_actions(state, context) {
                     headers: current_headers,
                     metadata: null
                 });
+                const index = s.ui_state.selected;
+                if (index) {
+                    dispatch("edit", {
+                        index,
+                        value: data[index[0]][index[1]].value,
+                        previous_value: previous_data[index[0]][index[1]]
+                    });
+                }
                 if (!value_is_output)
                     dispatch("input");
             }

package/dist/shared/types.d.ts

@@ -5,9 +5,10 @@ export interface HeadersWithIDs {
     id: string;
     value: string;
 }
+export type CellValue = string | number | boolean;
 export interface TableCell {
     id: string;
-    value: string | number;
+    value: CellValue;
 }
 export type TableData = TableCell[][];
 export type CountConfig = [number, "fixed" | "dynamic"];

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

@@ -1,13 +1,14 @@
-import type { Headers, HeadersWithIDs } from "./utils";
+import type { Datatype, Headers, HeadersWithIDs } from "./utils";
+import type { CellValue } from "../types";
 export declare function make_headers(_head: Headers, col_count: [number, "fixed" | "dynamic"], els: Record<string, {
     cell: null | HTMLTableCellElement;
     input: null | HTMLTextAreaElement;
 }>, make_id: () => string): HeadersWithIDs;
-export declare function process_data(values: (string | number)[][], els: Record<string, {
+export declare function process_data(values: CellValue[][], els: Record<string, {
     cell: null | HTMLTableCellElement;
     input: null | HTMLTextAreaElement;
-}>, data_binding: Record<string, any>, make_id: () => string, display_value?: string[][] | null): {
+}>, data_binding: Record<string, any>, make_id: () => string, display_value: (string[][] | null) | undefined, datatype: Datatype | Datatype[]): {
     id: string;
-    value: string | number;
+    value: CellValue;
     display_value?: string;
 }[][];

package/dist/shared/utils/data_processing.js

@@ -1,3 +1,4 @@
+import { cast_value_to_type } from "./utils";
 export function make_headers(_head, col_count, els, make_id) {
     let _h = _head || [];
     if (col_count[1] === "fixed" && _h.length < col_count[0]) {
@@ -21,7 +22,7 @@ export function make_headers(_head, col_count, els, make_id) {
         return { id: _id, value: h ?? "" };
     });
 }
-export function process_data(values, els, data_binding, make_id, display_value = null) {
+export function process_data(values, els, data_binding, make_id, display_value = null, datatype) {
     if (!values || values.length === 0) {
         return [];
     }
@@ -34,9 +35,10 @@ export function process_data(values, els, data_binding, make_id, display_value =
             if (display === undefined) {
                 display = String(value);
             }
+            const dtype = Array.isArray(datatype) ? datatype[j] : datatype;
             return {
                 id: _id,
-                value,
+                value: cast_value_to_type(value, dtype),
                 display_value: display
             };
         });

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

@@ -1,7 +1,8 @@
+import type { CellValue } from "../types";
 export type FilterDatatype = "string" | "number";
 export declare function filter_data(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], filter_columns: {
     col: number;
     datatype: FilterDatatype;
@@ -10,7 +11,7 @@ export declare function filter_data(data: {
 }[]): number[];
 export declare function filter_data_and_preserve_selection(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], display_value: string[][] | null, styling: string[][] | null, filter_columns: {
     col: number;
     datatype: FilterDatatype;
@@ -18,10 +19,10 @@ export declare function filter_data_and_preserve_selection(data: {
     value: string;
 }[], selected: [number, number] | false, get_current_indices: (id: string, data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][]) => [number, number], original_data?: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], original_display_value?: string[][] | null, original_styling?: string[][] | null): {
     data: typeof data;
     selected: [number, number] | false;

package/dist/shared/utils/keyboard_utils.js

@@ -26,7 +26,7 @@ export async function handle_cell_blur(event, ctx, coords) {
     const input_el = event.target;
     if (!input_el || input_el.value === undefined)
         return;
-    await save_cell_value(input_el.type === "checkbox" ? String(input_el.checked) : input_el.value, ctx, coords[0], coords[1]);
+    await save_cell_value(input_el.value, ctx, coords[0], coords[1]);
 }
 function handle_header_navigation(event, ctx) {
     const state = get(ctx.state);

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

@@ -1,7 +1,7 @@
-import type { CellCoordinate } from "./../types";
+import type { CellCoordinate, CellValue } from "./../types";
 export type CellData = {
     id: string;
-    value: string | number;
+    value: CellValue;
 };
 export declare function is_cell_in_selection(coords: [number, number], selected_cells: [number, number][]): boolean;
 export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
@@ -21,7 +21,7 @@ export declare function select_column(data: any[][], col: number): CellCoordinat
 export declare function select_row(data: any[][], row: number): CellCoordinate[];
 export declare function calculate_selection_positions(selected: CellCoordinate, data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], els: Record<string, {
     cell: HTMLTableCellElement | null;
 }>, parent: HTMLElement, table: HTMLElement): {

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

@@ -1,4 +1,4 @@
-import type { Headers } from "../types";
+import type { Headers, CellValue } from "../types";
 export type SortDirection = "asc" | "desc";
 export declare function get_sort_status(name: string, sort_columns: {
     col: number;
@@ -6,20 +6,20 @@ export declare function get_sort_status(name: string, sort_columns: {
 }[], headers: Headers): "none" | "asc" | "desc";
 export declare function sort_data(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], sort_columns: {
     col: number;
     direction: SortDirection;
 }[]): number[];
 export declare function sort_data_and_preserve_selection(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], display_value: string[][] | null, styling: string[][] | null, sort_columns: {
     col: number;
     direction: SortDirection;
 }[], selected: [number, number] | false, get_current_indices: (id: string, data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][]) => [number, number]): {
     data: typeof data;
     selected: [number, number] | false;

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

@@ -1,4 +1,4 @@
-import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
+import type { CellValue, Headers, HeadersWithIDs, TableCell, TableData } from "../types";
 import type { SortDirection } from "./sort_utils";
 import type { FilterDatatype } from "./filter_utils";
 export declare function make_cell_id(row: number, col: number): string;
@@ -17,4 +17,4 @@ export declare function filter_table_data(data: TableData, display_value: string
 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;
+export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: CellValue[][]) => void): void;

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

@@ -1,5 +1,6 @@
+import type { CellValue } from "../types";
 export type Headers = string[];
-export type Data = (string | number)[][];
+export type Data = CellValue[][];
 export type Datatype = "str" | "number" | "bool" | "date" | "markdown" | "html" | "image";
 export type Metadata = {
     [key: string]: string[][] | null;
@@ -19,4 +20,9 @@ export type DataframeValue = {
  * @param t - The type to coerce to.
  * @returns The coerced value.
  */
-export declare function cast_value_to_type(v: any, t: Datatype): string | number | boolean;
+export declare function cast_value_to_type(v: any, t: Datatype): CellValue;
+export interface EditData {
+    index: number | [number, number];
+    value: string;
+    previous_value: string;
+}

package/dist/standalone/Index.svelte

@@ -15,7 +15,7 @@ export let value = {
   metadata: null
 };
 export let datatype = "str";
-export let editable = true;
+export let interactive = true;
 export let show_row_numbers = false;
 export let max_height = 500;
 export let show_search = "none";
@@ -68,7 +68,7 @@ onMount(() => {
 		display_value={value?.metadata?.display_value}
 		styling={value?.metadata?.styling}
 		{datatype}
-		{editable}
+		editable={interactive}
 		{show_row_numbers}
 		{max_height}
 		{show_search}

package/dist/standalone/Index.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         i18n?: I18nFormatter | undefined;
         value?: DataframeValue;
         datatype?: Datatype | Datatype[];
-        editable?: boolean;
+        interactive?: boolean;
         show_row_numbers?: boolean;
         max_height?: number;
         show_search?: "none" | "search" | "filter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.19.3",
+  "version": "0.20.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "@gradio/atoms": "^0.18.0",
     "@gradio/button": "^0.5.13",
     "@gradio/icons": "^0.14.0",
-    "@gradio/statustracker": "^0.11.1",
+    "@gradio/markdown-code": "^0.5.2",
     "@gradio/checkbox": "^0.4.30",
-    "@gradio/markdown-code": "^0.5.1",
+    "@gradio/statustracker": "^0.11.1",
     "@gradio/upload": "^0.17.0",
-    "@gradio/client": "^1.19.0",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/utils": "^0.10.2",
+    "@gradio/client": "^1.19.0"
   },
   "exports": {
     ".": {

package/shared/BooleanCell.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { BaseCheckbox } from "@gradio/checkbox";
 
-	export let value: boolean | string = false;
+	export let value = false;
 	export let editable = true;
 	export let on_change: (value: boolean) => void;
 
-	$: bool_value =
-		typeof value === "string" ? value.toLowerCase() === "true" : !!value;
-
 	function handle_change(event: CustomEvent<boolean>): void {
 		if (editable) {
 			on_change(event.detail);
@@ -17,7 +14,7 @@
 
 <div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
-		bind:value={bool_value}
+		bind:value
 		label=""
 		interactive={editable}
 		on:change={handle_change}

package/shared/EditableCell.svelte

@@ -2,11 +2,12 @@
 	import { createEventDispatcher } from "svelte";
 	import { MarkdownCode } from "@gradio/markdown-code";
 	import type { I18nFormatter } from "@gradio/utils";
+	import type { CellValue } from "./types";
 	import SelectionButtons from "./icons/SelectionButtons.svelte";
 	import BooleanCell from "./BooleanCell.svelte";
 
 	export let edit: boolean;
-	export let value: string | number = "";
+	export let value: CellValue = "";
 	export let display_value: string | null = null;
 	export let styling = "";
 	export let header = false;
@@ -44,7 +45,7 @@
 	}>();
 
 	function truncate_text(
-		text: string | number,
+		text: CellValue,
 		max_length: number | null = null,
 		is_image = false
 	): string {
@@ -86,18 +87,13 @@
 		dispatch("keydown", event);
 	}
 
-	function handle_bool_change(new_value: boolean): void {
-		value = new_value.toString();
-		dispatch("blur", {
-			blur_event: {
-				target: {
-					type: "checkbox",
-					checked: new_value,
-					value: new_value.toString()
-				}
-			} as unknown as FocusEvent,
-			coords: coords
-		});
+	function commit_change(checked: boolean): void {
+		handle_blur({ target: { value } } as unknown as FocusEvent);
+	}
+
+	$: if (!edit) {
+		// Shim blur on removal for Safari and Firefox
+		handle_blur({ target: { value } } as unknown as FocusEvent);
 	}
 </script>
 
@@ -118,12 +114,8 @@
 	/>
 {/if}
 
-{#if datatype === "bool"}
-	<BooleanCell
-		value={String(display_content)}
-		{editable}
-		on_change={handle_bool_change}
-	/>
+{#if datatype === "bool" && typeof value === "boolean"}
+	<BooleanCell bind:value {editable} on_change={commit_change} />
 {:else}
 	<span
 		class:dragging={is_dragging}

package/shared/Table.svelte

@@ -20,10 +20,15 @@
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
-	import type { Headers, DataframeValue, Datatype } from "./utils/utils";
+	import type {
+		Headers,
+		DataframeValue,
+		Datatype,
+		EditData
+	} from "./utils/utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
-	import type { CellCoordinate } from "./types";
+	import type { CellCoordinate, CellValue } from "./types";
 	import {
 		is_cell_selected,
 		should_show_cell_menu,
@@ -37,7 +42,6 @@
 		handle_file_upload
 	} from "./utils/table_utils";
 	import { make_headers, process_data } from "./utils/data_processing";
-	import { cast_value_to_type } from "./utils/utils";
 	import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 	import {
 		create_drag_handlers,
@@ -51,7 +55,7 @@
 	export let label: string | null = null;
 	export let show_label = true;
 	export let headers: Headers = [];
-	export let values: (string | number)[][] = [];
+	export let values: CellValue[][] = [];
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
 	export let latex_delimiters: {
@@ -163,6 +167,7 @@
 		input: undefined;
 		select: SelectData;
 		search: string | null;
+		edit: EditData;
 	}>();
 
 	let els: Record<
@@ -172,12 +177,11 @@
 	let data_binding: Record<string, (typeof data)[0][0]> = {};
 	let _headers = make_headers(headers, col_count, els, make_id);
 	let old_headers: string[] = headers;
-	let data: { id: string; value: string | number; display_value?: string }[][] =
-		[[]];
-	let old_val: undefined | (string | number)[][] = undefined;
+	let data: { id: string; value: CellValue; display_value?: string }[][] = [[]];
+	let old_val: undefined | CellValue[][] = undefined;
 	let search_results: {
 		id: string;
-		value: string | number;
+		value: CellValue;
 		display_value?: string;
 		styling?: string;
 	}[][] = [[]];
@@ -196,13 +200,13 @@
 		);
 	});
 
-	const get_data_at = (row: number, col: number): string | number =>
+	const get_data_at = (row: number, col: number): CellValue =>
 		data?.[row]?.[col]?.value;
 
-	const get_column = (col: number): (string | number)[] =>
+	const get_column = (col: number): CellValue[] =>
 		data?.map((row) => row[col]?.value) ?? [];
 
-	const get_row = (row: number): (string | number)[] =>
+	const get_row = (row: number): CellValue[] =>
 		data?.[row]?.map((cell) => cell.value) ?? [];
 
 	$: {
@@ -248,13 +252,14 @@
 				(values[0] && old_val[0] && values[0].length !== old_val[0].length));
 
 		data = process_data(
-			values as (string | number)[][],
+			values as CellValue[][],
 			els,
 			data_binding,
 			make_id,
-			display_value
+			display_value,
+			datatype
 		);
-		old_val = JSON.parse(JSON.stringify(values)) as (string | number)[][];
+		old_val = JSON.parse(JSON.stringify(values)) as CellValue[][];
 
 		if (is_reset || is_different_structure) {
 			df_actions.reset_sort_state();
@@ -326,27 +331,19 @@
 	}
 
 	let previous_headers = _headers.map((h) => h.value);
-	let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+	let previous_data = data.map((row) => row.map((cell) => cell.value));
 
 	$: {
 		if (data || _headers) {
 			df_actions.trigger_change(
-				data.map((row, rowIdx) =>
-					row.map((cell, colIdx) => {
-						const dtype = Array.isArray(datatype) ? datatype[colIdx] : datatype;
-						return {
-							...cell,
-							value: cast_value_to_type(cell.value, dtype)
-						};
-					})
-				),
+				data,
 				_headers,
 				previous_data,
 				previous_headers,
 				value_is_output,
 				dispatch
 			);
-			previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+			previous_data = data.map((row) => row.map((cell) => cell.value));
 			previous_headers = _headers.map((h) => h.value);
 		}
 	}
@@ -675,12 +672,12 @@
 
 	function commit_filter(): void {
 		if ($df_state.current_search_query && show_search === "filter") {
-			const filtered_data: (string | number)[][] = [];
+			const filtered_data: CellValue[][] = [];
 			const filtered_display_values: string[][] = [];
 			const filtered_styling: string[][] = [];
 
 			search_results.forEach((row) => {
-				const data_row: (string | number)[] = [];
+				const data_row: CellValue[] = [];
 				const display_row: string[] = [];
 				const styling_row: string[] = [];
 

package/shared/TableCell.svelte

@@ -3,9 +3,10 @@
 	import CellMenuButton from "./CellMenuButton.svelte";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { Datatype } from "./utils/utils";
+	import type { CellValue } from "./types";
 	import { is_cell_in_selection } from "./utils/selection_utils";
 
-	export let value: string | number;
+	export let value: CellValue;
 	export let index: number;
 	export let j: number;
 	export let actual_pinned_columns: number;

package/shared/context/dataframe_context.ts

@@ -2,6 +2,7 @@ import { getContext, setContext } from "svelte";
 import { dequal } from "dequal";
 import { writable, get } from "svelte/store";
 import { sort_table_data } from "../utils/table_utils";
+import type { CellValue } from "../types";
 import { tick } from "svelte";
 import {
 	handle_selection,
@@ -30,14 +31,14 @@ interface DataFrameState {
 		max_height: number;
 		column_widths: string[];
 		max_chars?: number;
-		static_columns?: (string | number)[];
+		static_columns?: CellValue[];
 	};
 	current_search_query: string | null;
 	sort_state: {
 		sort_columns: { col: number; direction: SortDirection }[];
 		row_order: number[];
 		initial_data: {
-			data: { id: string; value: string | number }[][];
+			data: { id: string; value: CellValue }[][];
 			display_value: string[][] | null;
 			styling: string[][] | null;
 		} | null;
@@ -50,7 +51,7 @@ interface DataFrameState {
 			value: string;
 		}[];
 		initial_data: {
-			data: { id: string; value: string | number }[][];
+			data: { id: string; value: CellValue }[][];
 			display_value: string[][] | null;
 			styling: string[][] | null;
 		} | null;
@@ -124,10 +125,10 @@ interface DataFrameActions {
 	trigger_change: (
 		data: any[][],
 		headers: any[],
-		previous_data: string[][],
+		previous_data: any[][],
 		previous_headers: string[],
 		value_is_output: boolean,
-		dispatch: (e: "change" | "input", detail?: any) => void
+		dispatch: (e: "change" | "input" | "edit", detail?: any) => void
 	) => Promise<void>;
 	reset_sort_state: () => void;
 	reset_filter_state: () => void;
@@ -183,10 +184,10 @@ export interface DataFrameContext {
 		{ cell: HTMLTableCellElement | null; input: HTMLTextAreaElement | null }
 	>;
 	parent_element?: HTMLElement;
-	get_data_at?: (row: number, col: number) => string | number;
-	get_column?: (col: number) => (string | number)[];
-	get_row?: (row: number) => (string | number)[];
-	dispatch?: (e: "change" | "select" | "search", detail?: any) => void;
+	get_data_at?: (row: number, col: number) => CellValue;
+	get_column?: (col: number) => CellValue[];
+	get_row?: (row: number) => CellValue[];
+	dispatch?: (e: "change" | "select" | "search" | "edit", detail?: any) => void;
 }
 
 function create_actions(
@@ -230,7 +231,7 @@ function create_actions(
 	};
 
 	const update_array = (
-		source: { id: string; value: string | number }[][] | string[][] | null,
+		source: { id: string; value: CellValue }[][] | string[][] | null,
 		target: any[] | null | undefined
 	): void => {
 		if (source && target) {
@@ -397,9 +398,7 @@ function create_actions(
 			if (s.current_search_query) return;
 
 			const current_headers = headers.map((h) => h.value);
-			const current_data = data.map((row) =>
-				row.map((cell) => String(cell.value))
-			);
+			const current_data = data.map((row) => row.map((cell) => cell.value));
 
 			if (
 				!dequal(current_data, previous_data) ||
@@ -416,6 +415,14 @@ function create_actions(
 					headers: current_headers,
 					metadata: null
 				});
+				const index = s.ui_state.selected;
+				if (index) {
+					dispatch("edit", {
+						index,
+						value: data[index[0]][index[1]].value,
+						previous_value: previous_data[index[0]][index[1]]
+					});
+				}
 				if (!value_is_output) dispatch("input");
 			}
 		},

package/shared/types.ts

@@ -9,9 +9,11 @@ export interface HeadersWithIDs {
 }
 [];
 
+export type CellValue = string | number | boolean;
+
 export interface TableCell {
 	id: string;
-	value: string | number;
+	value: CellValue;
 }
 
 export type TableData = TableCell[][];

package/shared/utils/data_processing.ts

@@ -1,4 +1,6 @@
-import type { Headers, HeadersWithIDs } from "./utils";
+import type { Datatype, Headers, HeadersWithIDs } from "./utils";
+import type { CellValue } from "../types";
+import { cast_value_to_type } from "./utils";
 
 export function make_headers(
 	_head: Headers,
@@ -35,15 +37,16 @@ export function make_headers(
 }
 
 export function process_data(
-	values: (string | number)[][],
+	values: CellValue[][],
 	els: Record<
 		string,
 		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	>,
 	data_binding: Record<string, any>,
 	make_id: () => string,
-	display_value: string[][] | null = null
-): { id: string; value: string | number; display_value?: string }[][] {
+	display_value: string[][] | null = null,
+	datatype: Datatype | Datatype[]
+): { id: string; value: CellValue; display_value?: string }[][] {
 	if (!values || values.length === 0) {
 		return [];
 	}
@@ -60,9 +63,11 @@ export function process_data(
 				display = String(value);
 			}
 
+			const dtype = Array.isArray(datatype) ? datatype[j] : datatype;
+
 			return {
 				id: _id,
-				value,
+				value: cast_value_to_type(value, dtype),
 				display_value: display
 			};
 		});

package/shared/utils/filter_utils.ts

@@ -1,9 +1,10 @@
 import { filter_table_data } from "./table_utils";
+import type { CellValue } from "../types";
 
 export type FilterDatatype = "string" | "number";
 
 export function filter_data(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	filter_columns: {
 		col: number;
 		datatype: FilterDatatype;
@@ -164,7 +165,7 @@ export function filter_data(
 }
 
 export function filter_data_and_preserve_selection(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	display_value: string[][] | null,
 	styling: string[][] | null,
 	filter_columns: {
@@ -176,9 +177,9 @@ export function filter_data_and_preserve_selection(
 	selected: [number, number] | false,
 	get_current_indices: (
 		id: string,
-		data: { id: string; value: string | number }[][]
+		data: { id: string; value: CellValue }[][]
 	) => [number, number],
-	original_data?: { id: string; value: string | number }[][],
+	original_data?: { id: string; value: CellValue }[][],
 	original_display_value?: string[][] | null,
 	original_styling?: string[][] | null
 ): { data: typeof data; selected: [number, number] | false } {

package/shared/utils/keyboard_utils.ts

@@ -40,12 +40,7 @@ export async function handle_cell_blur(
 	const input_el = event.target as HTMLInputElement;
 	if (!input_el || input_el.value === undefined) return;
 
-	await save_cell_value(
-		input_el.type === "checkbox" ? String(input_el.checked) : input_el.value,
-		ctx,
-		coords[0],
-		coords[1]
-	);
+	await save_cell_value(input_el.value, ctx, coords[0], coords[1]);
 }
 
 function handle_header_navigation(

package/shared/utils/selection_utils.ts

@@ -1,6 +1,6 @@
-import type { CellCoordinate } from "./../types";
+import type { CellCoordinate, CellValue } from "./../types";
 
-export type CellData = { id: string; value: string | number };
+export type CellData = { id: string; value: CellValue };
 
 export function is_cell_in_selection(
 	coords: [number, number],
@@ -208,7 +208,7 @@ export function select_row(data: any[][], row: number): CellCoordinate[] {
 
 export function calculate_selection_positions(
 	selected: CellCoordinate,
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	els: Record<string, { cell: HTMLTableCellElement | null }>,
 	parent: HTMLElement,
 	table: HTMLElement

package/shared/utils/sort_utils.ts

@@ -1,4 +1,4 @@
-import type { Headers } from "../types";
+import type { Headers, CellValue } from "../types";
 import { sort_table_data } from "./table_utils";
 
 export type SortDirection = "asc" | "desc";
@@ -21,7 +21,7 @@ export function get_sort_status(
 }
 
 export function sort_data(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	sort_columns: { col: number; direction: SortDirection }[]
 ): number[] {
 	if (!data || !data.length || !data[0]) {
@@ -64,14 +64,14 @@ export function sort_data(
 }
 
 export function sort_data_and_preserve_selection(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	display_value: string[][] | null,
 	styling: string[][] | null,
 	sort_columns: { col: number; direction: SortDirection }[],
 	selected: [number, number] | false,
 	get_current_indices: (
 		id: string,
-		data: { id: string; value: string | number }[][]
+		data: { id: string; value: CellValue }[][]
 	) => [number, number]
 ): { data: typeof data; selected: [number, number] | false } {
 	let id = null;

package/shared/utils/table_utils.ts

@@ -1,4 +1,10 @@
-import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
+import type {
+	CellValue,
+	Headers,
+	HeadersWithIDs,
+	TableCell,
+	TableData
+} from "../types";
 import { sort_data } from "./sort_utils";
 import { filter_data } from "./filter_utils";
 import type { SortDirection } from "./sort_utils";
@@ -173,7 +179,7 @@ export function data_uri_to_blob(data_uri: string): Blob {
 export function handle_file_upload(
 	data_uri: string,
 	update_headers: (headers: Headers) => HeadersWithIDs[],
-	update_values: (values: (string | number)[][]) => void
+	update_values: (values: CellValue[][]) => void
 ): void {
 	const blob = data_uri_to_blob(data_uri);
 	const reader = new FileReader();

package/shared/utils/utils.ts

@@ -1,5 +1,7 @@
+import type { CellValue } from "../types";
+
 export type Headers = string[];
-export type Data = (string | number)[][];
+export type Data = CellValue[][];
 
 export type Datatype =
 	| "str"
@@ -26,10 +28,7 @@ export type DataframeValue = {
  * @param t - The type to coerce to.
  * @returns The coerced value.
  */
-export function cast_value_to_type(
-	v: any,
-	t: Datatype
-): string | number | boolean {
+export function cast_value_to_type(v: any, t: Datatype): CellValue {
 	if (t === "number") {
 		const n = Number(v);
 		return isNaN(n) ? v : n;
@@ -48,3 +47,9 @@ export function cast_value_to_type(
 	}
 	return v;
 }
+
+export interface EditData {
+	index: number | [number, number];
+	value: string;
+	previous_value: string;
+}

package/standalone/Index.svelte

@@ -20,7 +20,7 @@
 		metadata: null
 	};
 	export let datatype: Datatype | Datatype[] = "str";
-	export let editable = true;
+	export let interactive = true;
 	export let show_row_numbers = false;
 	export let max_height = 500;
 	export let show_search: "none" | "search" | "filter" = "none";
@@ -96,7 +96,7 @@
 		display_value={value?.metadata?.display_value}
 		styling={value?.metadata?.styling}
 		{datatype}
-		{editable}
+		editable={interactive}
 		{show_row_numbers}
 		{max_height}
 		{show_search}