@gradio/dataframe 0.17.14 → 0.17.16

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @gradio/dataframe
 
+## 0.17.16
+
+### Fixes
+
+- [#11349](https://github.com/gradio-app/gradio/pull/11349) [`bed858b`](https://github.com/gradio-app/gradio/commit/bed858b62b9887e606618bea5fe8a2f212b4a645) - Fix DataFrame Scroll Divergence.  Thanks @deckar01!
+- [#11346](https://github.com/gradio-app/gradio/pull/11346) [`3a9a002`](https://github.com/gradio-app/gradio/commit/3a9a0025efd49942303517c5dbd426d41241b7f6) - Hide native Dataframe to screen readers.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/markdown-code@0.4.3
+- @gradio/statustracker@0.10.12
+- @gradio/button@0.5.3
+- @gradio/checkbox@0.4.23
+
+## 0.17.15
+
+### Features
+
+- [#11237](https://github.com/gradio-app/gradio/pull/11237) [`a6f6b40`](https://github.com/gradio-app/gradio/commit/a6f6b40dda5194fa5bc9926ef67f2a75f503e9a4) - Enhance boolean cell types in `gr.Dataframe`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.16.7
+- @gradio/checkbox@0.4.23
+- @gradio/client@1.15.2
+- @gradio/button@0.5.3
+
 ## 0.17.14
 
 ### Fixes

package/Dataframe.stories.svelte

@@ -60,11 +60,12 @@
 	name="Interactive dataframe with label"
 	args={{
 		values: [
-			["Cat", 5],
-			["Horse", 3],
-			["Snake", 1]
+			["Cat", 5, true],
+			["Horse", 3, false],
+			["Snake", 1, false]
 		],
-		headers: ["Animal", "Votes"],
+		headers: ["Animal", "Votes", "Is Pet"],
+		datatype: ["str", "number", "bool"],
 		label: "Animals",
 		show_label: true,
 		col_count: [2, "dynamic"],
@@ -93,14 +94,14 @@
 	name="Static dataframe"
 	args={{
 		values: [
-			["Cat", 5],
-			["Horse", 3],
-			["Snake", 1]
+			["Cat", 5, true],
+			["Horse", 3, false],
+			["Snake", 1, false]
 		],
-		headers: ["Animal", "Votes"],
-
+		headers: ["Animal", "Votes", "Is Pet"],
+		datatype: ["str", "number", "bool"],
 		label: "Animals",
-		col_count: [2, "dynamic"],
+		col_count: [3, "dynamic"],
 		row_count: [3, "dynamic"],
 		editable: false
 	}}

package/dist/shared/BooleanCell.svelte

@@ -0,0 +1,62 @@
+<script>import { BaseCheckbox } from "@gradio/checkbox";
+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) {
+  on_change(event.detail);
+}
+function handle_click(event) {
+  event.stopPropagation();
+}
+function handle_keydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.stopPropagation();
+  }
+}
+</script>
+
+<div
+	class="bool-cell checkbox"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	role="button"
+	tabindex="-1"
+>
+	<BaseCheckbox
+		bind:value={bool_value}
+		label=""
+		interactive={editable}
+		on:change={handle_change}
+	/>
+</div>
+
+<style>
+	.bool-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.bool-cell :global(input:disabled) {
+		opacity: 0.8;
+	}
+
+	.bool-cell.checkbox {
+		justify-content: center;
+	}
+
+	.bool-cell :global(label) {
+		margin: 0;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.bool-cell :global(span) {
+		display: none;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: (boolean | string) | undefined;
+        editable?: boolean | undefined;
+        on_change: (value: boolean) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BooleanCellProps = typeof __propDef.props;
+export type BooleanCellEvents = typeof __propDef.events;
+export type BooleanCellSlots = typeof __propDef.slots;
+export default class BooleanCell extends SvelteComponent<BooleanCellProps, BooleanCellEvents, BooleanCellSlots> {
+}
+export {};

package/dist/shared/EditableCell.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import { MarkdownCode } from "@gradio/markdown-code";
 import SelectionButtons from "./icons/SelectionButtons.svelte";
+import BooleanCell from "./BooleanCell.svelte";
 export let edit;
 export let value = "";
 export let display_value = null;
@@ -21,9 +22,9 @@ export let show_selection_buttons = false;
 export let coords;
 export let on_select_column = null;
 export let on_select_row = null;
+export let el;
 const dispatch = createEventDispatcher();
 let is_expanded = false;
-export let el;
 function truncate_text(text, max_length = null, is_image = false) {
   if (is_image)
     return String(text);
@@ -65,9 +66,22 @@ function handle_click() {
     is_expanded = !is_expanded;
   }
 }
+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
+  });
+}
 </script>
 
-{#if edit}
+{#if edit && datatype !== "bool"}
 	<input
 		readonly={is_static}
 		aria-readonly={is_static}
@@ -86,48 +100,57 @@ function handle_click() {
 	/>
 {/if}
 
-<span
-	class:dragging={is_dragging}
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	tabindex="0"
-	role="button"
-	class:edit
-	class:expanded={is_expanded}
-	class:multiline={header}
-	on:focus|preventDefault
-	style={styling}
-	data-editable={editable}
-	data-max-chars={max_chars}
-	data-expanded={is_expanded}
-	placeholder=" "
-	class:text={datatype === "str"}
-	class:wrap={wrap_text}
->
-	{#if datatype === "image" && components.image}
-		<svelte:component
-			this={components.image}
-			value={{ url: display_text }}
-			show_label={false}
-			label="cell-image"
-			show_download_button={false}
-			{i18n}
-			gradio={{ dispatch: () => {} }}
-		/>
-	{:else if datatype === "html"}
-		{@html display_text}
-	{:else if datatype === "markdown"}
-		<MarkdownCode
-			message={display_text.toLocaleString()}
-			{latex_delimiters}
-			{line_breaks}
-			chatbot={false}
-			{root}
-		/>
-	{:else}
-		{display_text}
-	{/if}
-</span>
+{#if datatype === "bool"}
+	<BooleanCell
+		value={String(display_content)}
+		{editable}
+		on_change={handle_bool_change}
+	/>
+{:else}
+	<span
+		class:dragging={is_dragging}
+		on:click={handle_click}
+		on:keydown={handle_keydown}
+		tabindex="0"
+		role="button"
+		class:edit
+		class:expanded={is_expanded}
+		class:multiline={header}
+		on:focus|preventDefault
+		style={styling}
+		data-editable={editable}
+		data-max-chars={max_chars}
+		data-expanded={is_expanded}
+		placeholder=" "
+		class:text={datatype === "str"}
+		class:wrap={wrap_text}
+	>
+		{#if datatype === "image" && components.image}
+			<svelte:component
+				this={components.image}
+				value={{ url: display_text }}
+				show_label={false}
+				label="cell-image"
+				show_download_button={false}
+				{i18n}
+				gradio={{ dispatch: () => {} }}
+			/>
+		{:else if datatype === "html"}
+			{@html display_text}
+		{:else if datatype === "markdown"}
+			<MarkdownCode
+				message={display_text.toLocaleString()}
+				{latex_delimiters}
+				{line_breaks}
+				chatbot={false}
+				{root}
+			/>
+		{:else}
+			{display_text}
+		{/if}
+	</span>
+{/if}
+
 {#if show_selection_buttons && coords && on_select_column && on_select_row}
 	<SelectionButtons
 		position="column"

package/dist/shared/Table.svelte

@@ -103,7 +103,7 @@ onMount(() => {
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting && !is_visible) {
-        set_cell_widths();
+        width_calculated = false;
       }
       is_visible = entry.isIntersecting;
     });
@@ -111,10 +111,17 @@ onMount(() => {
   observer.observe(parent);
   document.addEventListener("click", handle_click_outside);
   window.addEventListener("resize", handle_resize);
+  const global_mouse_up = (event) => {
+    if (is_dragging || drag_start) {
+      handle_mouse_up(event);
+    }
+  };
+  document.addEventListener("mouseup", global_mouse_up);
   return () => {
     observer.disconnect();
     document.removeEventListener("click", handle_click_outside);
     window.removeEventListener("resize", handle_resize);
+    document.removeEventListener("mouseup", global_mouse_up);
   };
 });
 $: {
@@ -170,6 +177,7 @@ $:
         }
         last_width_data_length = 0;
         last_width_column_count = 0;
+        width_calculated = false;
       }
     }
     const is_reset = values.length === 0 || values.length === 1 && values[0].length === 0;
@@ -193,8 +201,8 @@ $:
     if ($df_state.current_search_query) {
       df_actions.handle_search(null);
     }
-    if (parent && cells.length > 0) {
-      set_cell_widths();
+    if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+      width_calculated = false;
     }
   }
 $:
@@ -328,8 +336,18 @@ function handle_click_outside(event) {
 }
 $:
   max = get_max(data);
+let width_calc_timeout;
 $:
-  cells[0] && cells[0]?.clientWidth && set_cell_widths();
+  if (cells[0] && cells[0]?.clientWidth) {
+    clearTimeout(width_calc_timeout);
+    width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
+  }
+let width_calculated = false;
+$:
+  if (cells[0] && !width_calculated) {
+    set_cell_widths();
+    width_calculated = true;
+  }
 let cells = [];
 let parent;
 let table;
@@ -512,6 +530,7 @@ function handle_resize() {
   selected_cells = [];
   selected = false;
   editing = false;
+  width_calculated = false;
   set_cell_widths();
 }
 function add_row_at(index, position) {
@@ -615,7 +634,7 @@ function get_cell_display_value(row, col) {
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:this={table}>
+		<table bind:this={table} aria-hidden="true">
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}

package/dist/shared/VirtualTable.svelte

@@ -28,53 +28,64 @@ $:
   viewport_height = viewport_box?.height || 200;
 const is_browser = typeof window !== "undefined";
 const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
-$:
-  mounted && raf(() => refresh_height_map(sortedItems));
-let content_height = 0;
-async function refresh_height_map(_items) {
-  if (viewport_height === 0) {
-    return;
+$: {
+  if (mounted && viewport_height && viewport.offsetParent) {
+    sortedItems, raf(refresh_height_map);
   }
-  head_height = viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
-  await tick();
-  const { scrollTop } = viewport;
+}
+async function refresh_height_map() {
+  if (sortedItems.length < start) {
+    await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
+  }
+  const scrollTop = Math.max(0, viewport.scrollTop);
+  show_scroll_button = scrollTop > 100;
   table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
-  content_height = top - (scrollTop - head_height);
-  let i = start;
-  while (content_height < max_height && i < _items.length) {
-    let row = rows[i - start];
-    if (!row) {
-      end = i + 1;
-      await tick();
-      row = rows[i - start];
-    }
-    let _h = row?.getBoundingClientRect().height;
-    if (!_h) {
-      _h = average_height;
+  for (let v = 0; v < rows.length; v += 1) {
+    height_map[start + v] = rows[v].getBoundingClientRect().height;
+  }
+  let i = 0;
+  let y = head_height;
+  while (i < sortedItems.length) {
+    const row_height = height_map[i] || average_height;
+    if (y + row_height > scrollTop - max_height) {
+      start = i;
+      top = y - head_height;
+      break;
     }
-    const row_height = height_map[i] = _h;
+    y += row_height;
+    i += 1;
+  }
+  let content_height = head_height;
+  while (i < sortedItems.length) {
+    const row_height = height_map[i] || average_height;
     content_height += row_height;
     i += 1;
+    if (content_height - head_height > 3 * max_height) {
+      break;
+    }
   }
   end = i;
-  const remaining = _items.length - end;
+  const remaining = sortedItems.length - end;
   const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
   if (scrollbar_height > 0) {
     content_height += scrollbar_height;
   }
   let filtered_height_map = height_map.filter((v) => typeof v === "number");
-  average_height = filtered_height_map.reduce((a, b) => a + b, 0) / filtered_height_map.length;
+  average_height = filtered_height_map.reduce((a, b) => a + b, 0) / filtered_height_map.length || 30;
   bottom = remaining * average_height;
-  height_map.length = _items.length;
-  await tick();
-  if (!max_height) {
-    actual_height = content_height + 1;
-  } else if (content_height < max_height) {
-    actual_height = content_height + 2;
-  } else {
+  if (!isFinite(bottom)) {
+    bottom = 2e5;
+  }
+  height_map.length = sortedItems.length;
+  while (i < sortedItems.length) {
+    i += 1;
+    height_map[i] = average_height;
+  }
+  if (max_height && content_height > max_height) {
     actual_height = max_height;
+  } else {
+    actual_height = content_height;
   }
-  await tick();
 }
 $:
   scroll_and_render(selected);
@@ -112,71 +123,6 @@ function is_in_view(n) {
   }
   return true;
 }
-function get_computed_px_amount(elem, property) {
-  if (!elem) {
-    return 0;
-  }
-  const compStyle = getComputedStyle(elem);
-  let x = parseInt(compStyle.getPropertyValue(property));
-  return x;
-}
-async function handle_scroll(e) {
-  const scroll_top = viewport.scrollTop;
-  show_scroll_button = scroll_top > 100;
-  if (show_scroll_button) {
-    dispatch("scroll_top", scroll_top);
-  }
-  rows = contents.children;
-  const is_start_overflow = sortedItems.length < start;
-  const row_top_border = get_computed_px_amount(rows[1], "border-top-width");
-  const actual_border_collapsed_width = 0;
-  if (is_start_overflow) {
-    await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
-  }
-  let new_start = 0;
-  for (let v = 0; v < rows.length; v += 1) {
-    height_map[start + v] = rows[v].getBoundingClientRect().height;
-  }
-  let i = 0;
-  let y = head_height + row_top_border / 2;
-  let row_heights = [];
-  while (i < sortedItems.length) {
-    const row_height = height_map[i] || average_height;
-    row_heights[i] = row_height;
-    if (y + row_height + actual_border_collapsed_width > scroll_top) {
-      new_start = i;
-      top = y - (head_height + row_top_border / 2);
-      break;
-    }
-    y += row_height;
-    i += 1;
-  }
-  new_start = Math.max(0, new_start);
-  while (i < sortedItems.length) {
-    const row_height = height_map[i] || average_height;
-    y += row_height;
-    i += 1;
-    if (y > scroll_top + viewport_height) {
-      break;
-    }
-  }
-  start = new_start;
-  end = i;
-  const remaining = sortedItems.length - end;
-  if (end === 0) {
-    end = 10;
-  }
-  average_height = (y - head_height) / end;
-  let remaining_height = remaining * average_height;
-  while (i < sortedItems.length) {
-    i += 1;
-    height_map[i] = average_height;
-  }
-  bottom = remaining_height;
-  if (!isFinite(bottom)) {
-    bottom = 2e5;
-  }
-}
 export async function scroll_to_index(index, opts, align_end = false) {
   await tick();
   const _itemHeight = average_height;
@@ -206,7 +152,6 @@ $:
 onMount(() => {
   rows = contents.children;
   mounted = true;
-  refresh_height_map(items);
 });
 </script>
 
@@ -217,7 +162,7 @@ onMount(() => {
 			class:disable-scroll={disable_scroll}
 			bind:this={viewport}
 			bind:contentRect={viewport_box}
-			on:scroll={handle_scroll}
+			on:scroll={refresh_height_map}
 			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}>

package/dist/shared/utils/drag_utils.js

@@ -43,6 +43,10 @@ export function create_drag_handlers(state, set_is_dragging, set_selected_cells,
         handle_mouse_move(event) {
             if (!state.drag_start || !state.mouse_down_pos)
                 return;
+            if (!(event.buttons & 1)) {
+                end_drag(event);
+                return;
+            }
             const dx = Math.abs(event.clientX - state.mouse_down_pos.x);
             const dy = Math.abs(event.clientY - state.mouse_down_pos.y);
             if (!state.is_dragging && (dx > 3 || dy > 3)) {

package/dist/shared/utils/keyboard_utils.js

@@ -23,7 +23,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.value, ctx, coords[0], coords[1]);
+    await save_cell_value(input_el.type === "checkbox" ? String(input_el.checked) : input_el.value, ctx, coords[0], coords[1]);
 }
 function handle_header_navigation(event, ctx) {
     const state = get(ctx.state);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.14",
+  "version": "0.17.16",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -18,12 +18,13 @@
     "katex": "^0.16.7",
     "marked": "^12.0.0",
     "@gradio/atoms": "^0.16.1",
-    "@gradio/button": "^0.5.2",
-    "@gradio/client": "^1.15.1",
+    "@gradio/button": "^0.5.3",
     "@gradio/icons": "^0.12.0",
-    "@gradio/markdown-code": "^0.4.3",
-    "@gradio/upload": "^0.16.6",
     "@gradio/statustracker": "^0.10.12",
+    "@gradio/checkbox": "^0.4.23",
+    "@gradio/upload": "^0.16.7",
+    "@gradio/markdown-code": "^0.4.3",
+    "@gradio/client": "^1.15.2",
     "@gradio/utils": "^0.10.2"
   },
   "exports": {
@@ -43,7 +44,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.13.1"
+    "@gradio/preview": "^0.13.2"
   },
   "repository": {
     "type": "git",

package/shared/BooleanCell.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { BaseCheckbox } from "@gradio/checkbox";
+
+	export let value: boolean | string = 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 {
+		on_change(event.detail);
+	}
+
+	function handle_click(event: MouseEvent): void {
+		event.stopPropagation();
+	}
+
+	function handle_keydown(event: KeyboardEvent): void {
+		if (event.key === "Enter" || event.key === " ") {
+			event.stopPropagation();
+		}
+	}
+</script>
+
+<div
+	class="bool-cell checkbox"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	role="button"
+	tabindex="-1"
+>
+	<BaseCheckbox
+		bind:value={bool_value}
+		label=""
+		interactive={editable}
+		on:change={handle_change}
+	/>
+</div>
+
+<style>
+	.bool-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.bool-cell :global(input:disabled) {
+		opacity: 0.8;
+	}
+
+	.bool-cell.checkbox {
+		justify-content: center;
+	}
+
+	.bool-cell :global(label) {
+		margin: 0;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.bool-cell :global(span) {
+		display: none;
+	}
+</style>

package/shared/EditableCell.svelte

@@ -3,6 +3,8 @@
 	import { MarkdownCode } from "@gradio/markdown-code";
 	import type { I18nFormatter } from "@gradio/utils";
 	import SelectionButtons from "./icons/SelectionButtons.svelte";
+	import BooleanCell from "./BooleanCell.svelte";
+
 	export let edit: boolean;
 	export let value: string | number = "";
 	export let display_value: string | null = null;
@@ -35,6 +37,7 @@
 	export let coords: [number, number];
 	export let on_select_column: ((col: number) => void) | null = null;
 	export let on_select_row: ((row: number) => void) | null = null;
+	export let el: HTMLInputElement | null;
 
 	const dispatch = createEventDispatcher<{
 		blur: { blur_event: FocusEvent; coords: [number, number] };
@@ -43,8 +46,6 @@
 
 	let is_expanded = false;
 
-	export let el: HTMLInputElement | null;
-
 	function truncate_text(
 		text: string | number,
 		max_length: number | null = null,
@@ -99,9 +100,23 @@
 			is_expanded = !is_expanded;
 		}
 	}
+
+	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
+		});
+	}
 </script>
 
-{#if edit}
+{#if edit && datatype !== "bool"}
 	<input
 		readonly={is_static}
 		aria-readonly={is_static}
@@ -120,48 +135,57 @@
 	/>
 {/if}
 
-<span
-	class:dragging={is_dragging}
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	tabindex="0"
-	role="button"
-	class:edit
-	class:expanded={is_expanded}
-	class:multiline={header}
-	on:focus|preventDefault
-	style={styling}
-	data-editable={editable}
-	data-max-chars={max_chars}
-	data-expanded={is_expanded}
-	placeholder=" "
-	class:text={datatype === "str"}
-	class:wrap={wrap_text}
->
-	{#if datatype === "image" && components.image}
-		<svelte:component
-			this={components.image}
-			value={{ url: display_text }}
-			show_label={false}
-			label="cell-image"
-			show_download_button={false}
-			{i18n}
-			gradio={{ dispatch: () => {} }}
-		/>
-	{:else if datatype === "html"}
-		{@html display_text}
-	{:else if datatype === "markdown"}
-		<MarkdownCode
-			message={display_text.toLocaleString()}
-			{latex_delimiters}
-			{line_breaks}
-			chatbot={false}
-			{root}
-		/>
-	{:else}
-		{display_text}
-	{/if}
-</span>
+{#if datatype === "bool"}
+	<BooleanCell
+		value={String(display_content)}
+		{editable}
+		on_change={handle_bool_change}
+	/>
+{:else}
+	<span
+		class:dragging={is_dragging}
+		on:click={handle_click}
+		on:keydown={handle_keydown}
+		tabindex="0"
+		role="button"
+		class:edit
+		class:expanded={is_expanded}
+		class:multiline={header}
+		on:focus|preventDefault
+		style={styling}
+		data-editable={editable}
+		data-max-chars={max_chars}
+		data-expanded={is_expanded}
+		placeholder=" "
+		class:text={datatype === "str"}
+		class:wrap={wrap_text}
+	>
+		{#if datatype === "image" && components.image}
+			<svelte:component
+				this={components.image}
+				value={{ url: display_text }}
+				show_label={false}
+				label="cell-image"
+				show_download_button={false}
+				{i18n}
+				gradio={{ dispatch: () => {} }}
+			/>
+		{:else if datatype === "html"}
+			{@html display_text}
+		{:else if datatype === "markdown"}
+			<MarkdownCode
+				message={display_text.toLocaleString()}
+				{latex_delimiters}
+				{line_breaks}
+				chatbot={false}
+				{root}
+			/>
+		{:else}
+			{display_text}
+		{/if}
+	</span>
+{/if}
+
 {#if show_selection_buttons && coords && on_select_column && on_select_row}
 	<SelectionButtons
 		position="column"

package/shared/Table.svelte

@@ -120,7 +120,7 @@
 		const observer = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting && !is_visible) {
-					set_cell_widths();
+					width_calculated = false;
 				}
 				is_visible = entry.isIntersecting;
 			});
@@ -129,10 +129,18 @@
 		document.addEventListener("click", handle_click_outside);
 		window.addEventListener("resize", handle_resize);
 
+		const global_mouse_up = (event: MouseEvent): void => {
+			if (is_dragging || drag_start) {
+				handle_mouse_up(event);
+			}
+		};
+		document.addEventListener("mouseup", global_mouse_up);
+
 		return () => {
 			observer.disconnect();
 			document.removeEventListener("click", handle_click_outside);
 			window.removeEventListener("resize", handle_resize);
+			document.removeEventListener("mouseup", global_mouse_up);
 		};
 	});
 
@@ -223,6 +231,7 @@
 				}
 				last_width_data_length = 0;
 				last_width_column_count = 0;
+				width_calculated = false;
 			}
 		}
 
@@ -256,8 +265,8 @@
 			df_actions.handle_search(null);
 		}
 
-		if (parent && cells.length > 0) {
-			set_cell_widths();
+		if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+			width_calculated = false;
 		}
 	}
 
@@ -421,9 +430,17 @@
 
 	$: max = get_max(data);
 
-	// Modify how we trigger cell width calculations
-	// Only recalculate when cells actually change, not during sort
-	$: cells[0] && cells[0]?.clientWidth && set_cell_widths();
+	let width_calc_timeout: ReturnType<typeof setTimeout>;
+	$: if (cells[0] && cells[0]?.clientWidth) {
+		clearTimeout(width_calc_timeout);
+		width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
+	}
+
+	let width_calculated = false;
+	$: if (cells[0] && !width_calculated) {
+		set_cell_widths();
+		width_calculated = true;
+	}
 	let cells: HTMLTableCellElement[] = [];
 	let parent: HTMLDivElement;
 	let table: HTMLTableElement;
@@ -649,6 +666,7 @@
 		selected_cells = [];
 		selected = false;
 		editing = false;
+		width_calculated = false;
 		set_cell_widths();
 	}
 
@@ -762,7 +780,7 @@
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:this={table}>
+		<table bind:this={table} aria-hidden="true">
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}

package/shared/VirtualTable.svelte

@@ -40,43 +40,53 @@
 		? window.requestAnimationFrame
 		: (cb: (...args: any[]) => void) => cb();
 
-	$: mounted && raf(() => refresh_height_map(sortedItems));
-
-	let content_height = 0;
-	async function refresh_height_map(_items: typeof items): Promise<void> {
-		if (viewport_height === 0) {
-			return;
+	$: {
+		if (mounted && viewport_height && viewport.offsetParent) {
+			sortedItems, raf(refresh_height_map);
 		}
+	}
 
-		// force header height calculation first
-		head_height =
-			viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
-		await tick();
+	async function refresh_height_map(): Promise<void> {
+		if (sortedItems.length < start) {
+			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
+		}
 
-		const { scrollTop } = viewport;
+		const scrollTop = Math.max(0, viewport.scrollTop);
+		show_scroll_button = scrollTop > 100;
 		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
-		content_height = top - (scrollTop - head_height);
-		let i = start;
-
-		while (content_height < max_height && i < _items.length) {
-			let row = rows[i - start];
-			if (!row) {
-				end = i + 1;
-				await tick(); // render the newly visible row
-				row = rows[i - start];
-			}
-			let _h = row?.getBoundingClientRect().height;
-			if (!_h) {
-				_h = average_height;
+		// acquire height map for currently visible rows
+		for (let v = 0; v < rows.length; v += 1) {
+			height_map[start + v] = rows[v].getBoundingClientRect().height;
+		}
+		let i = 0;
+		let y = head_height;
+		// loop items to find new start
+		while (i < sortedItems.length) {
+			const row_height = height_map[i] || average_height;
+			// keep a page of rows buffered above
+			if (y + row_height > scrollTop - max_height) {
+				start = i;
+				top = y - head_height;
+				break;
 			}
-			const row_height = (height_map[i] = _h);
+			y += row_height;
+			i += 1;
+		}
+
+		let content_height = head_height;
+		while (i < sortedItems.length) {
+			const row_height = height_map[i] || average_height;
 			content_height += row_height;
 			i += 1;
+			// keep a page of rows buffered below
+			if (content_height - head_height > 3 * max_height) {
+				break;
+			}
 		}
 
 		end = i;
-		const remaining = _items.length - end;
+		const remaining = sortedItems.length - end;
 
 		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
 		if (scrollbar_height > 0) {
@@ -86,20 +96,22 @@
 		let filtered_height_map = height_map.filter((v) => typeof v === "number");
 		average_height =
 			filtered_height_map.reduce((a, b) => a + b, 0) /
-			filtered_height_map.length;
+				filtered_height_map.length || 30;
 
 		bottom = remaining * average_height;
-		height_map.length = _items.length;
-		await tick();
-		if (!max_height) {
-			actual_height = content_height + 1;
-		} else if (content_height < max_height) {
-			actual_height = content_height + 2;
-		} else {
+		if (!isFinite(bottom)) {
+			bottom = 200000;
+		}
+		height_map.length = sortedItems.length;
+		while (i < sortedItems.length) {
+			i += 1;
+			height_map[i] = average_height;
+		}
+		if (max_height && content_height > max_height) {
 			actual_height = max_height;
+		} else {
+			actual_height = content_height;
 		}
-
-		await tick();
 	}
 
 	$: scroll_and_render(selected);
@@ -144,88 +156,6 @@
 		return true;
 	}
 
-	function get_computed_px_amount(elem: HTMLElement, property: string): number {
-		if (!elem) {
-			return 0;
-		}
-		const compStyle = getComputedStyle(elem);
-
-		let x = parseInt(compStyle.getPropertyValue(property));
-		return x;
-	}
-
-	async function handle_scroll(e: Event): Promise<void> {
-		const scroll_top = viewport.scrollTop;
-
-		show_scroll_button = scroll_top > 100;
-
-		if (show_scroll_button) {
-			dispatch("scroll_top", scroll_top);
-		}
-
-		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
-		const is_start_overflow = sortedItems.length < start;
-
-		const row_top_border = get_computed_px_amount(rows[1], "border-top-width");
-
-		const actual_border_collapsed_width = 0;
-
-		if (is_start_overflow) {
-			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
-		}
-
-		let new_start = 0;
-		// acquire height map for currently visible rows
-		for (let v = 0; v < rows.length; v += 1) {
-			height_map[start + v] = rows[v].getBoundingClientRect().height;
-		}
-		let i = 0;
-		// start from top: thead, with its borders, plus the first border to afterwards neglect
-		let y = head_height + row_top_border / 2;
-		let row_heights = [];
-		// loop items to find new start
-		while (i < sortedItems.length) {
-			const row_height = height_map[i] || average_height;
-			row_heights[i] = row_height;
-			// we only want to jump if the full (incl. border) row is away
-			if (y + row_height + actual_border_collapsed_width > scroll_top) {
-				// this is the last index still inside the viewport
-				new_start = i;
-				top = y - (head_height + row_top_border / 2);
-				break;
-			}
-			y += row_height;
-			i += 1;
-		}
-
-		new_start = Math.max(0, new_start);
-		while (i < sortedItems.length) {
-			const row_height = height_map[i] || average_height;
-			y += row_height;
-			i += 1;
-			if (y > scroll_top + viewport_height) {
-				break;
-			}
-		}
-		start = new_start;
-		end = i;
-		const remaining = sortedItems.length - end;
-		if (end === 0) {
-			end = 10;
-		}
-		average_height = (y - head_height) / end;
-		let remaining_height = remaining * average_height; // 0
-		// compute height map for remaining items
-		while (i < sortedItems.length) {
-			i += 1;
-			height_map[i] = average_height;
-		}
-		bottom = remaining_height;
-		if (!isFinite(bottom)) {
-			bottom = 200000;
-		}
-	}
-
 	export async function scroll_to_index(
 		index: number,
 		opts: ScrollToOptions,
@@ -269,7 +199,6 @@
 	onMount(() => {
 		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
 		mounted = true;
-		refresh_height_map(items);
 	});
 </script>
 
@@ -280,7 +209,7 @@
 			class:disable-scroll={disable_scroll}
 			bind:this={viewport}
 			bind:contentRect={viewport_box}
-			on:scroll={handle_scroll}
+			on:scroll={refresh_height_map}
 			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}>

package/shared/utils/drag_utils.ts

@@ -75,6 +75,11 @@ export function create_drag_handlers(
 		handle_mouse_move(event: MouseEvent): void {
 			if (!state.drag_start || !state.mouse_down_pos) return;
 
+			if (!(event.buttons & 1)) {
+				end_drag(event);
+				return;
+			}
+
 			const dx = Math.abs(event.clientX - state.mouse_down_pos.x);
 			const dy = Math.abs(event.clientY - state.mouse_down_pos.y);
 

package/shared/utils/keyboard_utils.ts

@@ -37,7 +37,12 @@ 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.value, ctx, coords[0], coords[1]);
+	await save_cell_value(
+		input_el.type === "checkbox" ? String(input_el.checked) : input_el.value,
+		ctx,
+		coords[0],
+		coords[1]
+	);
 }
 
 function handle_header_navigation(