@gradio/dataframe 0.3.0-beta.5 → 0.3.0-beta.8

package/CHANGELOG.md

@@ -1,58 +1,80 @@
 # @gradio/dataframe
 
-## 0.3.0-beta.5
+## 0.3.0-beta.8
 
 ### Features
 
-- [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend.  Thanks [@pngwn](https://github.com/pngwn)!
 
-## 0.3.0-beta.4
+## 0.3.0-beta.7
 
-### Patch Changes
+### Features
 
-- Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
-  - @gradio/utils@0.2.0-beta.3
-  - @gradio/atoms@0.2.0-beta.3
-  - @gradio/button@0.2.0-beta.3
-  - @gradio/markdown@0.3.0-beta.4
-  - @gradio/statustracker@0.3.0-beta.4
-  - @gradio/upload@0.3.0-beta.3
+- [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
 
-## 0.3.0-beta.3
+### Fixes
 
-### Patch Changes
+- [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests.  Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.6
+
+### Features
 
-- Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
-  - @gradio/utils@0.2.0-beta.2
-  - @gradio/atoms@0.2.0-beta.2
-  - @gradio/button@0.2.0-beta.2
-  - @gradio/markdown@0.3.0-beta.3
-  - @gradio/statustracker@0.3.0-beta.3
-  - @gradio/upload@0.3.0-beta.2
+- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#5894](https://github.com/gradio-app/gradio/pull/5894) [`fee3d527e`](https://github.com/gradio-app/gradio/commit/fee3d527e83a615109cf937f6ca0a37662af2bb6) - Adds `column_widths` to `gr.Dataframe` and hide overflowing text when `wrap=False`.  Thanks [@abidlabs](https://github.com/abidlabs)!
 
-## 0.3.0-beta.2
+## 0.4.0
 
 ### Features
 
-- [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5877](https://github.com/gradio-app/gradio/pull/5877) [`a55b80942`](https://github.com/gradio-app/gradio/commit/a55b8094231ae462ac53f52bbdb460c1286ffabb) - Add styling (e.g. font colors and background colors) support to `gr.DataFrame` through the `pd.Styler` object.  Thanks [@abidlabs](https://github.com/abidlabs)!
 
-## 0.3.0-beta.1
+### Fixes
+
+- [#5930](https://github.com/gradio-app/gradio/pull/5930) [`361823896`](https://github.com/gradio-app/gradio/commit/3618238960d54df65c34895f4eb69d08acc3f9b6) - Fix dataframe `line_breaks`.  Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
+
+## 0.3.1
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @gradio/utils@0.2.0-beta.1
-  - @gradio/atoms@0.2.0-beta.1
-  - @gradio/button@0.2.0-beta.1
-  - @gradio/markdown@0.3.0-beta.1
-  - @gradio/statustracker@0.3.0-beta.1
-  - @gradio/upload@0.3.0-beta.1
+  - @gradio/utils@0.1.2
+  - @gradio/atoms@0.1.4
+  - @gradio/button@0.2.2
+  - @gradio/markdown@0.3.1
+  - @gradio/statustracker@0.2.2
+  - @gradio/upload@0.3.2
 
-## 0.3.0-beta.0
+## 0.3.0
 
 ### Features
 
-- [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5569](https://github.com/gradio-app/gradio/pull/5569) [`2a5b9e03b`](https://github.com/gradio-app/gradio/commit/2a5b9e03b15ea324d641fe6982f26d81b1ca7210) - Added support for pandas `Styler` object to `gr.DataFrame` (initially just sets the `display_value`). Thanks [@abidlabs](https://github.com/abidlabs)!
+
+### Fixes
+
+- [#5755](https://github.com/gradio-app/gradio/pull/5755) [`e842a561a`](https://github.com/gradio-app/gradio/commit/e842a561af4394f8109291ee5725bcf74743e816) - Fix new line issue in chatbot. Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
+
+## 0.2.5
+
+### Fixes
+
+- [#5713](https://github.com/gradio-app/gradio/pull/5713) [`c10dabd6b`](https://github.com/gradio-app/gradio/commit/c10dabd6b18b49259441eb5f956a19046f466339) - Fixes gr.select() Method Issues with Dataframe Cells. Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
+
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [[`ee8eec1e5`](https://github.com/gradio-app/gradio/commit/ee8eec1e5e544a0127e0aa68c2522a7085b8ada5)]:
+  - @gradio/markdown@0.2.2
+
+## 0.2.3
+
+### Fixes
+
+- [#5616](https://github.com/gradio-app/gradio/pull/5616) [`7c34b434a`](https://github.com/gradio-app/gradio/commit/7c34b434aae0eb85f112a1dc8d66cefc7e2296b2) - Fix width and height issues that would cut off content in `gr.DataFrame`. Thanks [@abidlabs](https://github.com/abidlabs)!
 
 ## 0.2.2
 

package/Dataframe.stories.svelte

@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import { Gradio } from "../app/src/gradio_helper";
 	import Table from "./shared/Table.svelte";
 </script>
 
@@ -17,18 +18,21 @@
 />
 
 <Template let:args>
-	<Table {...args} />
+	<Table {...args} i18n={(s) => s} />
 </Template>
 
 <Story
 	name="Interactive dataframe"
 	args={{
-		values: [
-			["Cat", 5],
-			["Horse", 3],
-			["Snake", 1]
-		],
-		headers: ["Animal", "Votes"],
+		value: {
+			data: [
+				["Cat", 5],
+				["Horse", 3],
+				["Snake", 1]
+			],
+			headers: ["Animal", "Votes"],
+			metadata: null
+		},
 		label: "Animals",
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"]
@@ -38,12 +42,15 @@
 <Story
 	name="Static dataframe"
 	args={{
-		values: [
-			["Cat", 5],
-			["Horse", 3],
-			["Snake", 1]
-		],
-		headers: ["Animal", "Votes"],
+		value: {
+			data: [
+				["Cat", 5],
+				["Horse", 3],
+				["Snake", 1]
+			],
+			headers: ["Animal", "Votes"],
+			metadata: null
+		},
 		label: "Animals",
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"],
@@ -51,15 +58,41 @@
 	}}
 />
 
+<Story
+	name="Dataframe with different precisions"
+	args={{
+		value: {
+			data: [
+				[1.24, 1.24, 1.24],
+				[1.21, 1.21, 1.21]
+			],
+			headers: ["Precision=0", "Precision=1", "Precision=2"],
+			metadata: {
+				display_value: [
+					["1", "1.2", "1.24"],
+					["1", "1.2", "1.21"]
+				]
+			}
+		},
+		label: "Numbers",
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		editable: false
+	}}
+/>
+
 <Story
 	name="Dataframe with markdown and math"
 	args={{
-		values: [
-			["Linear", "$y=x$", "Has a *maximum*  of 1 root"],
-			["Quadratic", "$y=x^2$", "Has a *maximum*  of 2 roots"],
-			["Cubic", "$y=x^3$", "Has a *maximum*  of 3 roots"]
-		],
-		headers: ["Type", "Example", "Roots"],
+		value: {
+			data: [
+				["Linear", "$y=x$", "Has a *maximum*  of 1 root"],
+				["Quadratic", "$y=x^2$", "Has a *maximum*  of 2 roots"],
+				["Cubic", "$y=x^3$", "Has a *maximum*  of 3 roots"]
+			],
+			headers: ["Type", "Example", "Roots"],
+			metadata: null
+		},
 		datatype: ["str", "markdown", "markdown"],
 		latex_delimiters: [{ left: "$", right: "$", display: false }],
 		label: "Math",
@@ -70,12 +103,46 @@
 />
 
 <Story
-	name="Empty dataframe"
+	name="Dataframe with different colors"
 	args={{
-		values: [[]],
-		headers: ["Animal", "Votes"],
-		label: "Animals",
-		col_count: [2, "dynamic"],
-		row_count: [0, "dynamic"]
+		value: {
+			data: [
+				[800, 100, 800],
+				[200, 800, 700]
+			],
+			headers: ["Math", "Reading", "Writing"],
+			metadata: {
+				styling: [
+					[
+						"background-color:teal; color: white",
+						"1.2",
+						"background-color:teal; color: white"
+					],
+					["1", "background-color:teal; color: white", "1.21"]
+				]
+			}
+		},
+		label: "Test scores",
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		editable: false
+	}}
+/>
+
+<Story
+	name="Dataframe with column widths"
+	args={{
+		value: {
+			data: [
+				[800, 100, 800],
+				[200, 800, 700]
+			],
+			headers: ["Narrow", "Wide", "Half"]
+		},
+		label: "Test scores",
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		column_widths: ["20%", "30%", "50%"],
+		editable: false
 	}}
 />

package/{static/StaticDataframe.svelte → Index.svelte}

@@ -1,22 +1,24 @@
+<script context="module" lang="ts">
+	export { default as BaseDataFrame } from "./shared/Table.svelte";
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
 <script lang="ts">
 	import { afterUpdate } from "svelte";
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { Block } from "@gradio/atoms";
-	import Table from "../shared";
+	import Table from "./shared/Table.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-
-	type Headers = string[];
-	type Data = (string | number)[][];
-	type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
-
+	import type { Headers, Data, Metadata, Datatype } from "./shared/utils";
 	export let headers: Headers = [];
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: { data: Data; headers: Headers } = {
+	export let value: { data: Data; headers: Headers; metadata: Metadata } = {
 		data: [["", "", ""]],
-		headers: ["1", "2", "3"]
+		headers: ["1", "2", "3"],
+		metadata: null
 	};
 	let old_value: string = JSON.stringify(value);
 	export let value_is_output = false;
@@ -29,6 +31,8 @@
 	export let min_width: number | undefined = undefined;
 	export let root: string;
 
+	export let line_breaks = true;
+	export let column_widths: string[] = [];
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;
@@ -42,6 +46,7 @@
 	export let height: number | undefined = undefined;
 
 	export let loading_status: LoadingStatus;
+	export let interactive: boolean;
 
 	function handle_change(): void {
 		gradio.dispatch("change");
@@ -58,7 +63,6 @@
 			handle_change();
 		}
 	}
-
 	if (
 		(Array.isArray(value) && value?.[0]?.length === 0) ||
 		value.data?.[0]?.length === 0
@@ -67,7 +71,8 @@
 			data: [Array(col_count?.[0] || 3).fill("")],
 			headers: Array(col_count?.[0] || 3)
 				.fill("")
-				.map((_, i) => `${i + 1}`)
+				.map((_, i) => `${i + 1}`),
+			metadata: null
 		};
 	}
 </script>
@@ -92,17 +97,16 @@
 		{label}
 		{row_count}
 		{col_count}
-		values={value}
+		{value}
 		{headers}
-		on:change={({ detail }) => {
-			value = detail;
-		}}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
-		editable={false}
+		editable={interactive}
 		{height}
 		i18n={gradio.i18n}
+		{line_breaks}
+		{column_widths}
 	/>
 </Block>

package/README.md

@@ -0,0 +1,42 @@
+# `@gradio/dataframe`
+
+```html
+<script>
+    import { BaseDataFrame, BaseExample } from "@gradio/dataframe";
+</script>
+```
+
+BaseDataFrame
+```javascript
+	export let datatype: Datatype | Datatype[];
+	export let label: string | null = null;
+	export let headers: Headers = [];
+	let values: (string | number)[][];
+	export let value: { data: Data; headers: Headers; metadata: Metadata } | null;
+	export let col_count: [number, "fixed" | "dynamic"];
+	export let row_count: [number, "fixed" | "dynamic"];
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+
+	export let editable = true;
+	export let wrap = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+
+	export let height = 500;
+	export let line_breaks = true;
+	export let column_widths: string[] = [];
+```
+
+BaseExample
+```javascript
+	export let gradio: Gradio;
+	export let value: (string | number)[][] | string;
+	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+	export let index: number;
+```

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.3.0-beta.5",
+  "version": "0.3.0-beta.8",
   "description": "Gradio UI packages",
   "type": "module",
-  "main": "./index.svelte",
   "author": "",
   "license": "ISC",
   "private": false,
   "main_changeset": true,
+  "main": "./Index.svelte",
   "dependencies": {
     "@types/d3-dsv": "^3.0.0",
     "@types/dompurify": "^3.0.2",
@@ -17,17 +17,16 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^7.0.0",
-    "@gradio/atoms": "^0.2.0-beta.3",
-    "@gradio/button": "^0.2.0-beta.4",
-    "@gradio/markdown": "^0.3.0-beta.5",
-    "@gradio/statustracker": "^0.3.0-beta.5",
-    "@gradio/upload": "^0.3.0-beta.3",
-    "@gradio/utils": "^0.2.0-beta.3"
+    "@gradio/atoms": "^0.2.0-beta.6",
+    "@gradio/button": "^0.2.0-beta.7",
+    "@gradio/markdown": "^0.3.0-beta.8",
+    "@gradio/statustracker": "^0.3.0-beta.8",
+    "@gradio/upload": "^0.3.0-beta.6",
+    "@gradio/utils": "^0.2.0-beta.6"
   },
   "exports": {
-    "./package.json": "./package.json",
-    "./interactive": "./interactive/index.ts",
-    "./static": "./static/index.ts",
-    "./example": "./example/index.ts"
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
   }
 }

package/shared/EditableCell.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import type { ActionReturn } from "svelte/action";
 	import { MarkdownCode } from "@gradio/markdown";
 
 	export let edit: boolean;
 	export let value: string | number = "";
+	export let display_value: string | null = null;
+	export let styling = "";
 	export let header = false;
 	export let datatype:
 		| "str"
@@ -20,13 +21,15 @@
 	}[];
 	export let clear_on_focus = false;
 	export let select_on_focus = false;
+	export let line_breaks = true;
+	export let editable = true;
 
 	const dispatch = createEventDispatcher();
 
 	export let el: HTMLInputElement | null;
 	$: _value = value;
 
-	function use_focus(node: HTMLInputElement): ActionReturn {
+	function use_focus(node: HTMLInputElement): any {
 		if (clear_on_focus) {
 			_value = "";
 		}
@@ -38,6 +41,15 @@
 
 		return {};
 	}
+
+	function handle_blur({
+		currentTarget
+	}: {
+		currentTarget: HTMLInputElement;
+	}): void {
+		value = currentTarget.value;
+		dispatch("blur");
+	}
 </script>
 
 {#if edit}
@@ -46,10 +58,7 @@
 		bind:value={_value}
 		class:header
 		tabindex="-1"
-		on:blur={({ currentTarget }) => {
-			value = currentTarget.value;
-			dispatch("blur");
-		}}
+		on:blur={handle_blur}
 		use:use_focus
 		on:keydown
 	/>
@@ -61,6 +70,7 @@
 	role="button"
 	class:edit
 	on:focus|preventDefault
+	style={styling}
 >
 	{#if datatype === "html"}
 		{@html value}
@@ -68,10 +78,11 @@
 		<MarkdownCode
 			message={value.toLocaleString()}
 			{latex_delimiters}
+			{line_breaks}
 			chatbot={false}
 		/>
 	{:else}
-		{value}
+		{editable ? value : display_value || value}
 	{/if}
 </span>
 

package/shared/Table.svelte

@@ -4,20 +4,24 @@
 	import { dequal } from "dequal/lite";
 	import { copy } from "@gradio/utils";
 	import { Upload } from "@gradio/upload";
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 	import EditableCell from "./EditableCell.svelte";
 	import type { SelectData } from "@gradio/utils";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
 	import VirtualTable from "./VirtualTable.svelte";
-
-	type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
+	import type {
+		Headers,
+		HeadersWithIDs,
+		Data,
+		Metadata,
+		Datatype
+	} from "./utils";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
-	export let headers: string[] = [];
-	export let values:
-		| (string | number)[][]
-		| { data: (string | number)[][]; headers: string[] } = [[]];
+	export let headers: Headers = [];
+	let values: (string | number)[][];
+	export let value: { data: Data; headers: Headers; metadata: Metadata } | null;
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
 	export let latex_delimiters: {
@@ -29,22 +33,33 @@
 	export let editable = true;
 	export let wrap = false;
 	export let root: string;
-	export let height: number | undefined = undefined;
 	export let i18n: I18nFormatter;
 
+	export let height = 500;
+	export let line_breaks = true;
+	export let column_widths: string[] = [];
+
 	let selected: false | [number, number] = false;
+	let display_value: string[][] | null = value?.metadata?.display_value ?? null;
+	let styling: string[][] | null = value?.metadata?.styling ?? null;
 
 	$: {
-		if (values && !Array.isArray(values)) {
-			headers = values.headers;
-			values = values.data;
+		if (value) {
+			headers = value.headers;
+			values = value.data;
+			display_value = value?.metadata?.display_value ?? null;
+			styling = value?.metadata?.styling ?? null;
 		} else if (values === null) {
 			values = [];
 		}
 	}
 
 	const dispatch = createEventDispatcher<{
-		change: { data: (string | number)[][]; headers: string[] };
+		change: {
+			data: (string | number)[][];
+			headers: string[];
+			metadata: Metadata;
+		};
 		select: SelectData;
 	}>();
 
@@ -67,12 +82,10 @@
 
 	let data_binding: Record<string, (typeof data)[0][0]> = {};
 
-	type Headers = { value: string; id: string }[];
-
 	function make_id(): string {
 		return Math.random().toString(36).substring(2, 15);
 	}
-	function make_headers(_head: string[]): Headers {
+	function make_headers(_head: Headers): HeadersWithIDs {
 		let _h = _head || [];
 		if (col_count[1] === "fixed" && _h.length < col_count[0]) {
 			const fill = Array(col_count[0] - _h.length)
@@ -155,7 +168,10 @@
 	$: _headers &&
 		dispatch("change", {
 			data: data.map((r) => r.map(({ value }) => value)),
-			headers: _headers.map((h) => h.value)
+			headers: _headers.map((h) => h.value),
+			metadata: editable
+				? null
+				: { display_value: display_value, styling: styling }
 		});
 
 	function get_sort_status(
@@ -328,7 +344,6 @@
 
 	async function handle_cell_click(i: number, j: number): Promise<void> {
 		if (dequal(editing, [i, j])) return;
-		if (dequal(selected, [i, j])) return;
 		header_edit = false;
 		selected_header = false;
 		editing = false;
@@ -529,35 +544,65 @@
 	$: cells[0] && set_cell_widths();
 	let cells: HTMLTableCellElement[] = [];
 	let parent: HTMLDivElement;
+	let table: HTMLTableElement;
 
 	function set_cell_widths(): void {
 		const widths = cells.map((el, i) => {
 			return el?.clientWidth || 0;
 		});
-
 		if (widths.length === 0) return;
 		for (let i = 0; i < widths.length; i++) {
-			parent.style.setProperty(`--cell-width-${i}`, `${widths[i]}px`);
+			parent.style.setProperty(
+				`--cell-width-${i}`,
+				`${widths[i] - scrollbar_width / widths.length}px`
+			);
 		}
 	}
 
-	let table_height: number = height || 500;
+	let table_height: number = height;
+	let scrollbar_width = 0;
 
 	function sort_data(
 		_data: typeof data,
+		_display_value: string[][] | null,
+		_styling: string[][] | null,
 		col?: number,
 		dir?: SortDirection
 	): void {
-		const id = selected ? data[selected[0]][selected[1]]?.id : null;
+		let id = null;
+		//Checks if the selected cell is still in the data
+		if (selected && selected[0] in data && selected[1] in data[selected[0]]) {
+			id = data[selected[0]][selected[1]].id;
+		}
 		if (typeof col !== "number" || !dir) {
 			return;
 		}
+		const indices = [...Array(_data.length).keys()];
+
 		if (dir === "asc") {
-			_data.sort((a, b) => (a[col].value < b[col].value ? -1 : 1));
+			indices.sort((i, j) =>
+				_data[i][col].value < _data[j][col].value ? -1 : 1
+			);
 		} else if (dir === "des") {
-			_data.sort((a, b) => (a[col].value > b[col].value ? -1 : 1));
+			indices.sort((i, j) =>
+				_data[i][col].value > _data[j][col].value ? -1 : 1
+			);
+		} else {
+			return;
 		}
 
+		// sort all the data and metadata based on the values in the data
+		const temp_data = [..._data];
+		const temp_display_value = _display_value ? [..._display_value] : null;
+		const temp_styling = _styling ? [..._styling] : null;
+		indices.forEach((originalIndex, sortedIndex) => {
+			_data[sortedIndex] = temp_data[originalIndex];
+			if (_display_value && temp_display_value)
+				_display_value[sortedIndex] = temp_display_value[originalIndex];
+			if (_styling && temp_styling)
+				_styling[sortedIndex] = temp_styling[originalIndex];
+		});
+
 		data = data;
 
 		if (id) {
@@ -566,7 +611,7 @@
 		}
 	}
 
-	$: sort_data(data, sort_by, sort_direction);
+	$: sort_data(data, display_value, styling, sort_by, sort_direction);
 
 	$: selected_index = !!selected && selected[0];
 
@@ -613,7 +658,11 @@
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:clientWidth={t_width}>
+		<table
+			bind:clientWidth={t_width}
+			bind:this={table}
+			class:fixed-layout={column_widths.length != 0}
+		>
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
@@ -623,11 +672,13 @@
 						<th
 							class:editing={header_edit === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
+							style:width={column_widths.length ? column_widths[i] : undefined}
 						>
 							<div class="cell-wrap">
 								<EditableCell
 									{value}
 									{latex_delimiters}
+									{line_breaks}
 									header
 									edit={false}
 									el={null}
@@ -661,6 +712,7 @@
 								<EditableCell
 									{value}
 									{latex_delimiters}
+									{line_breaks}
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 									edit={false}
 									el={null}
@@ -683,8 +735,9 @@
 			<VirtualTable
 				bind:items={data}
 				table_width={t_width}
-				max_height={height || 500}
+				max_height={height}
 				bind:actual_height={table_height}
+				bind:table_scrollbar_width={scrollbar_width}
 				selected={selected_index}
 			>
 				{#if label && label.length !== 0}
@@ -702,6 +755,7 @@
 									bind:value={_headers[i].value}
 									bind:el={els[id].input}
 									{latex_delimiters}
+									{line_breaks}
 									edit={header_edit === i}
 									on:keydown={end_header_edit}
 									on:dblclick={() => edit_header(i)}
@@ -740,14 +794,18 @@
 							on:touchstart={() => start_edit(index, j)}
 							on:click={() => handle_cell_click(index, j)}
 							on:dblclick={() => start_edit(index, j)}
-							style="width: var(--cell-width-{j});"
+							style:width="var(--cell-width-{j})"
+							style={styling?.[index]?.[j] || ""}
 							class:focus={dequal(selected, [index, j])}
 						>
 							<div class="cell-wrap">
 								<EditableCell
 									bind:value={data[index][j].value}
 									bind:el={els[id].input}
+									display_value={display_value?.[index]?.[j]}
 									{latex_delimiters}
+									{line_breaks}
+									{editable}
 									edit={dequal(editing, [index, j])}
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 									on:blur={() => ((clear_on_focus = false), parent.focus())}
@@ -870,6 +928,18 @@
 		border-spacing: 0;
 	}
 
+	div:not(.no-wrap) td {
+		overflow-wrap: anywhere;
+	}
+
+	div.no-wrap td {
+		overflow-x: hidden;
+	}
+
+	table.fixed-layout {
+		table-layout: fixed;
+	}
+
 	thead {
 		position: sticky;
 		top: 0;

package/shared/VirtualTable.svelte

@@ -7,6 +7,7 @@
 	export let table_width: number;
 	export let max_height: number;
 	export let actual_height: number;
+	export let table_scrollbar_width: number;
 	export let start = 0;
 	export let end = 0;
 	export let selected: number | false;
@@ -33,6 +34,7 @@
 			return;
 		}
 		const { scrollTop } = viewport;
+		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
 		content_height = top - (scrollTop - head_height);
 		let i = start;
@@ -56,6 +58,11 @@
 		end = i;
 		const remaining = _items.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) /
@@ -63,7 +70,6 @@
 
 		bottom = remaining * average_height;
 		height_map.length = _items.length;
-
 		await tick();
 		if (!max_height) {
 			actual_height = content_height + 1;
@@ -206,6 +212,12 @@
 		if (align_end) {
 			distance = distance - viewport_height + _itemHeight + head_height;
 		}
+
+		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
+		if (scrollbar_height > 0) {
+			distance += scrollbar_height;
+		}
+
 		const _opts = {
 			top: distance,
 			behavior: "smooth" as ScrollBehavior,

package/shared/utils.ts

@@ -0,0 +1,7 @@
+export type Headers = string[];
+export type Data = (string | number)[][];
+export type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
+export type Metadata = {
+	[key: string]: string[][] | null;
+} | null;
+export type HeadersWithIDs = { value: string; id: string }[];

package/example/index.ts

@@ -1 +0,0 @@
-export { default } from "./Dataframe.svelte";

package/interactive/InteractiveDataframe.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { Block } from "@gradio/atoms";
-	import Table from "../shared";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { afterUpdate } from "svelte";
-	import { _ } from "svelte-i18n";
-
-	type Headers = string[];
-	type Data = (string | number)[][];
-	type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
-
-	export let headers: Headers = [];
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: { data: Data; headers: Headers } = {
-		data: [["", "", ""]],
-		headers: ["1", "2", "3"]
-	};
-	export let latex_delimiters: {
-		left: string;
-		right: string;
-		display: boolean;
-	}[];
-	export let height: number | undefined = undefined;
-
-	let old_value: string = JSON.stringify(value);
-	export let value_is_output = false;
-	export let col_count: [number, "fixed" | "dynamic"];
-	export let row_count: [number, "fixed" | "dynamic"];
-	export let label: string | null = null;
-	export let wrap: boolean;
-	export let datatype: Datatype | Datatype[];
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let root: string;
-
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-	}>;
-
-	export let loading_status: LoadingStatus;
-
-	function handle_change(): void {
-		gradio.dispatch("change");
-		if (!value_is_output) {
-			gradio.dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: {
-		if (JSON.stringify(value) !== old_value) {
-			old_value = JSON.stringify(value);
-			handle_change();
-		}
-	}
-
-	if (
-		(Array.isArray(value) && value?.[0]?.length === 0) ||
-		value.data?.[0]?.length === 0
-	) {
-		value = {
-			data: [Array(col_count?.[0] || 3).fill("")],
-			headers: Array(col_count?.[0] || 3)
-				.fill("")
-				.map((_, i) => `${i + 1}`)
-		};
-	}
-</script>
-
-<Block
-	{visible}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	container={false}
-	{scale}
-	{min_width}
-	allow_overflow={false}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		{...loading_status}
-		i18n={gradio.i18n}
-	/>
-	<Table
-		{label}
-		{row_count}
-		{col_count}
-		{root}
-		values={value}
-		{headers}
-		on:change={({ detail }) => {
-			value = detail;
-		}}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		editable
-		{wrap}
-		{datatype}
-		{latex_delimiters}
-		{height}
-		i18n={gradio.i18n}
-	/>
-</Block>

package/interactive/index.ts

@@ -1 +0,0 @@
-export { default } from "./InteractiveDataframe.svelte";

package/shared/index.ts

@@ -1 +0,0 @@
-export { default } from "./Table.svelte";

package/static/index.ts

@@ -1 +0,0 @@
-export { default } from "./StaticDataframe.svelte";