@gradio/dataframe 0.13.1 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/dataframe
 
+## 0.14.0
+
+### Features
+
+- [#10461](https://github.com/gradio-app/gradio/pull/10461) [`ca7c47e`](https://github.com/gradio-app/gradio/commit/ca7c47e5e50a309cd637c4f928ab90af6355b01d) - Add copy button to dataframe toolbar.  Thanks @hannahblair!
+- [#10420](https://github.com/gradio-app/gradio/pull/10420) [`a69b8e8`](https://github.com/gradio-app/gradio/commit/a69b8e83ad7c89c627db2bdd5d25b0142731aaac) - Support column/row deletion in `gr.DataFrame`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.14.8
+- @gradio/button@0.4.4
+
 ## 0.13.1
 
 ### Features

package/Dataframe.stories.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	// @ts-nocheck
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Table from "./shared/Table.svelte";
 	import { within } from "@testing-library/dom";
@@ -10,6 +11,11 @@
 <Meta
 	title="Components/DataFrame"
 	component={Table}
+	parameters={{
+		test: {
+			dangerouslyIgnoreUnhandledErrors: true // ignore fullscreen permission error
+		}
+	}}
 	argTypes={{
 		editable: {
 			control: [true, false],
@@ -220,3 +226,33 @@
 		show_fullscreen_button: true
 	}}
 />
+
+<Story
+	name="Dataframe toolbar interactions"
+	args={{
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		headers: ["Math", "Reading", "Writifdsfsng"],
+		values: [
+			[800, 100, 400],
+			[200, 800, 700]
+		],
+		show_fullscreen_button: true,
+		show_copy_button: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const copy_button = canvas.getByRole("button", {
+			name: /copy table data/i
+		});
+		await userEvent.click(copy_button);
+
+		const fullscreen_button = canvas.getByRole("button", {
+			name: /enter fullscreen/i
+		});
+		await userEvent.click(fullscreen_button);
+
+		await userEvent.click(fullscreen_button);
+	}}
+/>

package/Index.svelte

@@ -49,6 +49,7 @@
 	export let loading_status: LoadingStatus;
 	export let interactive: boolean;
 	export let show_fullscreen_button = false;
+	export let show_copy_button = false;
 
 	$: _headers = [...(value.headers || headers)];
 	$: cell_values = value.data ? [...value.data] : [];
@@ -105,5 +106,6 @@
 		stream_handler={(...args) => gradio.client.stream(...args)}
 		bind:value_is_output
 		{show_fullscreen_button}
+		{show_copy_button}
 	/>
 </Block>

package/dist/Index.svelte

@@ -34,6 +34,7 @@ export let max_height = void 0;
 export let loading_status;
 export let interactive;
 export let show_fullscreen_button = false;
+export let show_copy_button = false;
 $:
   _headers = [...value.headers || headers];
 $:
@@ -88,5 +89,6 @@ $:
 		stream_handler={(...args) => gradio.client.stream(...args)}
 		bind:value_is_output
 		{show_fullscreen_button}
+		{show_copy_button}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -38,6 +38,7 @@ declare const __propDef: {
         loading_status: LoadingStatus;
         interactive: boolean;
         show_fullscreen_button?: boolean | undefined;
+        show_copy_button?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -135,4 +136,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_fullscreen_button(): boolean | undefined;
     /**accessor*/
     set show_fullscreen_button(_: boolean | undefined);
+    get show_copy_button(): boolean | undefined;
+    /**accessor*/
+    set show_copy_button(_: boolean | undefined);
 }

package/dist/shared/CellMenu.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import Arrow from "./Arrow.svelte";
+import CellMenuIcons from "./CellMenuIcons.svelte";
 export let x;
 export let y;
 export let on_add_row_above;
@@ -9,6 +9,10 @@ export let on_add_column_right;
 export let row;
 export let col_count;
 export let row_count;
+export let on_delete_row;
+export let on_delete_col;
+export let can_delete_rows;
+export let can_delete_cols;
 export let i18n;
 let menu_element;
 $:
@@ -42,23 +46,35 @@ function position_menu() {
 <div bind:this={menu_element} class="cell-menu">
 	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
-			<Arrow transform="rotate(-90 12 12)" />
+			<CellMenuIcons icon="add-row-above" />
 			{i18n("dataframe.add_row_above")}
 		</button>
 		<button on:click={() => on_add_row_below()}>
-			<Arrow transform="rotate(90 12 12)" />
+			<CellMenuIcons icon="add-row-below" />
 			{i18n("dataframe.add_row_below")}
 		</button>
+		{#if can_delete_rows}
+			<button on:click={on_delete_row} class="delete">
+				<CellMenuIcons icon="delete-row" />
+				{i18n("dataframe.delete_row")}
+			</button>
+		{/if}
 	{/if}
 	{#if can_add_columns}
 		<button on:click={() => on_add_column_left()}>
-			<Arrow transform="rotate(180 12 12)" />
+			<CellMenuIcons icon="add-column-left" />
 			{i18n("dataframe.add_column_left")}
 		</button>
 		<button on:click={() => on_add_column_right()}>
-			<Arrow transform="rotate(0 12 12)" />
+			<CellMenuIcons icon="add-column-right" />
 			{i18n("dataframe.add_column_right")}
 		</button>
+		{#if can_delete_cols}
+			<button on:click={on_delete_col} class="delete">
+				<CellMenuIcons icon="delete-column" />
+				{i18n("dataframe.delete_column")}
+			</button>
+		{/if}
 	{/if}
 </div>
 
@@ -102,8 +118,4 @@ function position_menu() {
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
-
-	.cell-menu button:hover :global(svg) {
-		fill: var(--color-accent);
-	}
 </style>

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

@@ -11,6 +11,10 @@ declare const __propDef: {
         row: number;
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
+        on_delete_row: () => void;
+        on_delete_col: () => void;
+        can_delete_rows: boolean;
+        can_delete_cols: boolean;
         i18n: I18nFormatter;
     };
     events: {

package/dist/shared/CellMenuIcons.svelte

@@ -0,0 +1,112 @@
+<script>export let icon;
+</script>
+
+{#if icon == "add-column-right"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="4"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H19M16 8L19 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-column-left"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="16"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H5M8 8L5 12L8 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-above"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="16"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V5M8 8L12 5L16 8"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-below"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="4"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V19M8 16L12 19L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-row"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="5"
+			y="10"
+			width="14"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M8 7L16 17M16 7L8 17"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-column"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="10"
+			y="5"
+			width="4"
+			height="14"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M7 8L17 16M17 8L7 16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        icon: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CellMenuIconsProps = typeof __propDef.props;
+export type CellMenuIconsEvents = typeof __propDef.events;
+export type CellMenuIconsSlots = typeof __propDef.slots;
+export default class CellMenuIcons extends SvelteComponent<CellMenuIconsProps, CellMenuIconsEvents, CellMenuIconsSlots> {
+}
+export {};

package/dist/shared/Table.svelte

@@ -7,6 +7,7 @@ import {} from "@gradio/client";
 import VirtualTable from "./VirtualTable.svelte";
 import CellMenu from "./CellMenu.svelte";
 import Toolbar from "./Toolbar.svelte";
+import { copy_table_data } from "./table_utils";
 export let datatype;
 export let label = null;
 export let show_label = true;
@@ -26,6 +27,7 @@ export let show_row_numbers = false;
 export let upload;
 export let stream_handler;
 export let show_fullscreen_button = false;
+export let show_copy_button = false;
 export let value_is_output = false;
 let selected = false;
 let clicked_cell = void 0;
@@ -75,9 +77,7 @@ function make_headers(_head) {
 }
 function process_data(_values) {
   const data_row_length = _values.length;
-  return Array(
-    row_count[1] === "fixed" ? row_count[0] : data_row_length < row_count[0] ? row_count[0] : data_row_length
-  ).fill(0).map(
+  return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length).fill(0).map(
     (_, i) => Array(
       col_count[1] === "fixed" ? col_count[0] : data_row_length > 0 ? _values[0].length : headers.length
     ).fill(0).map((_2, j) => {
@@ -574,6 +574,9 @@ function toggle_fullscreen() {
 function handle_fullscreen_change() {
   is_fullscreen = !!document.fullscreenElement;
 }
+async function handle_copy() {
+  await copy_table_data(data, _headers);
+}
 function toggle_header_menu(event, col) {
   event.stopPropagation();
   if (active_header_menu && active_header_menu.col === col) {
@@ -593,6 +596,40 @@ function toggle_header_menu(event, col) {
 afterUpdate(() => {
   value_is_output = false;
 });
+async function delete_row(index) {
+  parent.focus();
+  if (row_count[1] !== "dynamic")
+    return;
+  if (data.length <= 1)
+    return;
+  data.splice(index, 1);
+  data = data;
+  selected = false;
+}
+async function delete_col(index) {
+  parent.focus();
+  if (col_count[1] !== "dynamic")
+    return;
+  if (data[0].length <= 1)
+    return;
+  _headers.splice(index, 1);
+  _headers = _headers;
+  data.forEach((row) => {
+    row.splice(index, 1);
+  });
+  data = data;
+  selected = false;
+}
+function delete_row_at(index) {
+  delete_row(index);
+  active_cell_menu = null;
+  active_header_menu = null;
+}
+function delete_col_at(index) {
+  delete_col(index);
+  active_cell_menu = null;
+  active_header_menu = null;
+}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -608,6 +645,8 @@ afterUpdate(() => {
 			{show_fullscreen_button}
 			{is_fullscreen}
 			on:click={toggle_fullscreen}
+			on_copy={handle_copy}
+			{show_copy_button}
 		/>
 	</div>
 	<div
@@ -852,18 +891,22 @@ afterUpdate(() => {
 	</div>
 </div>
 
-{#if active_cell_menu !== null}
+{#if active_cell_menu}
 	<CellMenu
-		{i18n}
 		x={active_cell_menu.x}
 		y={active_cell_menu.y}
-		row={active_cell_menu?.row ?? -1}
+		row={active_cell_menu.row}
 		{col_count}
 		{row_count}
-		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
-		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
-		on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
-		on_add_column_right={() => add_col_at(active_cell_menu?.col ?? -1, "right")}
+		on_add_row_above={() => add_row_at(active_cell_menu?.row || 0, "above")}
+		on_add_row_below={() => add_row_at(active_cell_menu?.row || 0, "below")}
+		on_add_column_left={() => add_col_at(active_cell_menu?.col || 0, "left")}
+		on_add_column_right={() => add_col_at(active_cell_menu?.col || 0, "right")}
+		on_delete_row={() => delete_row_at(active_cell_menu?.row || 0)}
+		on_delete_col={() => delete_col_at(active_cell_menu?.col || 0)}
+		can_delete_rows={data.length > 1}
+		can_delete_cols={data[0].length > 1}
+		{i18n}
 	/>
 {/if}
 
@@ -880,6 +923,10 @@ afterUpdate(() => {
 		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
 		on_add_column_right={() =>
 			add_col_at(active_header_menu?.col ?? -1, "right")}
+		on_delete_row={() => delete_row_at(active_cell_menu?.row ?? -1)}
+		on_delete_col={() => delete_col_at(active_header_menu?.col ?? -1)}
+		can_delete_rows={false}
+		can_delete_cols={data[0].length > 1}
 	/>
 {/if}
 

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

@@ -28,6 +28,7 @@ declare const __propDef: {
         upload: Client["upload"];
         stream_handler: Client["stream"];
         show_fullscreen_button?: boolean | undefined;
+        show_copy_button?: boolean | undefined;
         value_is_output?: boolean | undefined;
         display_value?: (string[][] | null) | undefined;
         styling?: (string[][] | null) | undefined;

package/dist/shared/Toolbar.svelte

@@ -1,19 +1,59 @@
-<script>import { Maximize, Minimize } from "@gradio/icons";
+<script>import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+import { onDestroy } from "svelte";
 export let show_fullscreen_button = false;
+export let show_copy_button = false;
 export let is_fullscreen = false;
+export let on_copy;
+let copied = false;
+let timer;
+function copy_feedback() {
+  copied = true;
+  if (timer)
+    clearTimeout(timer);
+  timer = setTimeout(() => {
+    copied = false;
+  }, 2e3);
+}
+async function handle_copy() {
+  await on_copy();
+  copy_feedback();
+}
+onDestroy(() => {
+  if (timer)
+    clearTimeout(timer);
+});
 </script>
 
-{#if show_fullscreen_button}
-	<div class="toolbar">
-		<button class="toolbar-button" on:click>
+<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>
-	</div>
-{/if}
+	{/if}
+</div>
 
 <style>
 	.toolbar {

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

@@ -2,7 +2,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         show_fullscreen_button?: boolean | undefined;
+        show_copy_button?: boolean | undefined;
         is_fullscreen?: boolean | undefined;
+        on_copy: () => Promise<void>;
     };
     events: {
         click: MouseEvent;

package/dist/shared/table_utils.d.ts

@@ -0,0 +1,6 @@
+import type { HeadersWithIDs } from "./utils";
+export type TableData = {
+    value: string | number;
+    id: string;
+}[][];
+export declare function copy_table_data(data: TableData, headers?: HeadersWithIDs): Promise<void>;

package/dist/shared/table_utils.js

@@ -0,0 +1,27 @@
+export async function copy_table_data(data, headers) {
+    const header_row = headers
+        ? headers.map((h) => String(h.value)).join(",")
+        : "";
+    const table_data = data
+        .map((row) => row.map((cell) => String(cell.value)).join(","))
+        .join("\n");
+    const all_data = header_row ? `${header_row}\n${table_data}` : table_data;
+    try {
+        if ("clipboard" in navigator) {
+            await navigator.clipboard.writeText(all_data);
+        }
+        else {
+            const textArea = document.createElement("textarea");
+            textArea.value = all_data;
+            textArea.style.position = "absolute";
+            textArea.style.left = "-999999px";
+            document.body.prepend(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            textArea.remove();
+        }
+    }
+    catch (error) {
+        console.error("Failed to copy table data:", error);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/button": "^0.4.3",
-    "@gradio/client": "^1.10.0",
     "@gradio/atoms": "^0.13.1",
+    "@gradio/button": "^0.4.4",
+    "@gradio/client": "^1.10.0",
     "@gradio/icons": "^0.10.0",
     "@gradio/statustracker": "^0.10.2",
-    "@gradio/upload": "^0.14.7",
     "@gradio/markdown-code": "^0.3.0",
-    "@gradio/utils": "^0.10.0"
+    "@gradio/utils": "^0.10.0",
+    "@gradio/upload": "^0.14.8"
   },
   "exports": {
     ".": {

package/shared/CellMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import Arrow from "./Arrow.svelte";
+	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { I18nFormatter } from "js/utils/src";
 
 	export let x: number;
@@ -12,6 +12,10 @@
 	export let row: number;
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
+	export let on_delete_row: () => void;
+	export let on_delete_col: () => void;
+	export let can_delete_rows: boolean;
+	export let can_delete_cols: boolean;
 
 	export let i18n: I18nFormatter;
 	let menu_element: HTMLDivElement;
@@ -50,23 +54,35 @@
 <div bind:this={menu_element} class="cell-menu">
 	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
-			<Arrow transform="rotate(-90 12 12)" />
+			<CellMenuIcons icon="add-row-above" />
 			{i18n("dataframe.add_row_above")}
 		</button>
 		<button on:click={() => on_add_row_below()}>
-			<Arrow transform="rotate(90 12 12)" />
+			<CellMenuIcons icon="add-row-below" />
 			{i18n("dataframe.add_row_below")}
 		</button>
+		{#if can_delete_rows}
+			<button on:click={on_delete_row} class="delete">
+				<CellMenuIcons icon="delete-row" />
+				{i18n("dataframe.delete_row")}
+			</button>
+		{/if}
 	{/if}
 	{#if can_add_columns}
 		<button on:click={() => on_add_column_left()}>
-			<Arrow transform="rotate(180 12 12)" />
+			<CellMenuIcons icon="add-column-left" />
 			{i18n("dataframe.add_column_left")}
 		</button>
 		<button on:click={() => on_add_column_right()}>
-			<Arrow transform="rotate(0 12 12)" />
+			<CellMenuIcons icon="add-column-right" />
 			{i18n("dataframe.add_column_right")}
 		</button>
+		{#if can_delete_cols}
+			<button on:click={on_delete_col} class="delete">
+				<CellMenuIcons icon="delete-column" />
+				{i18n("dataframe.delete_column")}
+			</button>
+		{/if}
 	{/if}
 </div>
 
@@ -110,8 +126,4 @@
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
-
-	.cell-menu button:hover :global(svg) {
-		fill: var(--color-accent);
-	}
 </style>

package/shared/CellMenuIcons.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	export let icon: string;
+</script>
+
+{#if icon == "add-column-right"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="4"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H19M16 8L19 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-column-left"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="16"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H5M8 8L5 12L8 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-above"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="16"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V5M8 8L12 5L16 8"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-below"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="4"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V19M8 16L12 19L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-row"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="5"
+			y="10"
+			width="14"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M8 7L16 17M16 7L8 17"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-column"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="10"
+			y="5"
+			width="4"
+			height="14"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M7 8L17 16M17 8L7 16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{/if}

package/shared/Table.svelte

@@ -17,6 +17,7 @@
 	} from "./utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
+	import { copy_table_data } from "./table_utils";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
@@ -43,6 +44,7 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let show_fullscreen_button = false;
+	export let show_copy_button = false;
 	export let value_is_output = false;
 
 	let selected: false | [number, number] = false;
@@ -120,13 +122,7 @@
 		id: string;
 	}[][] {
 		const data_row_length = _values.length;
-		return Array(
-			row_count[1] === "fixed"
-				? row_count[0]
-				: data_row_length < row_count[0]
-					? row_count[0]
-					: data_row_length
-		)
+		return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length)
 			.fill(0)
 			.map((_, i) =>
 				Array(
@@ -771,6 +767,10 @@
 		is_fullscreen = !!document.fullscreenElement;
 	}
 
+	async function handle_copy(): Promise<void> {
+		await copy_table_data(data, _headers);
+	}
+
 	function toggle_header_menu(event: MouseEvent, col: number): void {
 		event.stopPropagation();
 		if (active_header_menu && active_header_menu.col === col) {
@@ -791,6 +791,42 @@
 	afterUpdate(() => {
 		value_is_output = false;
 	});
+
+	async function delete_row(index: number): Promise<void> {
+		parent.focus();
+		if (row_count[1] !== "dynamic") return;
+		if (data.length <= 1) return;
+		data.splice(index, 1);
+		data = data;
+		selected = false;
+	}
+
+	async function delete_col(index: number): Promise<void> {
+		parent.focus();
+		if (col_count[1] !== "dynamic") return;
+		if (data[0].length <= 1) return;
+
+		_headers.splice(index, 1);
+		_headers = _headers;
+
+		data.forEach((row) => {
+			row.splice(index, 1);
+		});
+		data = data;
+		selected = false;
+	}
+
+	function delete_row_at(index: number): void {
+		delete_row(index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
+	function delete_col_at(index: number): void {
+		delete_col(index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -806,6 +842,8 @@
 			{show_fullscreen_button}
 			{is_fullscreen}
 			on:click={toggle_fullscreen}
+			on_copy={handle_copy}
+			{show_copy_button}
 		/>
 	</div>
 	<div
@@ -1050,18 +1088,22 @@
 	</div>
 </div>
 
-{#if active_cell_menu !== null}
+{#if active_cell_menu}
 	<CellMenu
-		{i18n}
 		x={active_cell_menu.x}
 		y={active_cell_menu.y}
-		row={active_cell_menu?.row ?? -1}
+		row={active_cell_menu.row}
 		{col_count}
 		{row_count}
-		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
-		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
-		on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
-		on_add_column_right={() => add_col_at(active_cell_menu?.col ?? -1, "right")}
+		on_add_row_above={() => add_row_at(active_cell_menu?.row || 0, "above")}
+		on_add_row_below={() => add_row_at(active_cell_menu?.row || 0, "below")}
+		on_add_column_left={() => add_col_at(active_cell_menu?.col || 0, "left")}
+		on_add_column_right={() => add_col_at(active_cell_menu?.col || 0, "right")}
+		on_delete_row={() => delete_row_at(active_cell_menu?.row || 0)}
+		on_delete_col={() => delete_col_at(active_cell_menu?.col || 0)}
+		can_delete_rows={data.length > 1}
+		can_delete_cols={data[0].length > 1}
+		{i18n}
 	/>
 {/if}
 
@@ -1078,6 +1120,10 @@
 		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
 		on_add_column_right={() =>
 			add_col_at(active_header_menu?.col ?? -1, "right")}
+		on_delete_row={() => delete_row_at(active_cell_menu?.row ?? -1)}
+		on_delete_col={() => delete_col_at(active_header_menu?.col ?? -1)}
+		can_delete_rows={false}
+		can_delete_cols={data[0].length > 1}
 	/>
 {/if}
 

package/shared/Toolbar.svelte

@@ -1,21 +1,63 @@
 <script lang="ts">
-	import { Maximize, Minimize } from "@gradio/icons";
+	import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+	import { onDestroy } from "svelte";
 
 	export let show_fullscreen_button = false;
+	export let show_copy_button = false;
 	export let is_fullscreen = false;
+	export let on_copy: () => Promise<void>;
+
+	let copied = false;
+	let timer: ReturnType<typeof setTimeout>;
+
+	function copy_feedback(): void {
+		copied = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	async function handle_copy(): Promise<void> {
+		await on_copy();
+		copy_feedback();
+	}
+
+	onDestroy(() => {
+		if (timer) clearTimeout(timer);
+	});
 </script>
 
-{#if show_fullscreen_button}
-	<div class="toolbar">
-		<button class="toolbar-button" on:click>
+<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>
-	</div>
-{/if}
+	{/if}
+</div>
 
 <style>
 	.toolbar {

package/shared/table_utils.ts

@@ -0,0 +1,38 @@
+import type { HeadersWithIDs } from "./utils";
+
+export type TableData = {
+	value: string | number;
+	id: string;
+}[][];
+
+export async function copy_table_data(
+	data: TableData,
+	headers?: HeadersWithIDs
+): Promise<void> {
+	const header_row = headers
+		? headers.map((h) => String(h.value)).join(",")
+		: "";
+	const table_data = data
+		.map((row) => row.map((cell) => String(cell.value)).join(","))
+		.join("\n");
+
+	const all_data = header_row ? `${header_row}\n${table_data}` : table_data;
+
+	try {
+		if ("clipboard" in navigator) {
+			await navigator.clipboard.writeText(all_data);
+		} else {
+			const textArea = document.createElement("textarea");
+			textArea.value = all_data;
+			textArea.style.position = "absolute";
+			textArea.style.left = "-999999px";
+			document.body.prepend(textArea);
+			textArea.select();
+
+			document.execCommand("copy");
+			textArea.remove();
+		}
+	} catch (error) {
+		console.error("Failed to copy table data:", error);
+	}
+}

package/dist/shared/Arrow.svelte

@@ -1,9 +0,0 @@
-<script>export let transform;
-</script>
-
-<svg viewBox="0 0 24 24" width="16" height="16">
-	<path
-		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-		{transform}
-	/>
-</svg>

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

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        transform: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ArrowProps = typeof __propDef.props;
-export type ArrowEvents = typeof __propDef.events;
-export type ArrowSlots = typeof __propDef.slots;
-export default class Arrow extends SvelteComponent<ArrowProps, ArrowEvents, ArrowSlots> {
-}
-export {};

package/shared/Arrow.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let transform: string;
-</script>
-
-<svg viewBox="0 0 24 24" width="16" height="16">
-	<path
-		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-		{transform}
-	/>
-</svg>