@gradio/dataframe 0.16.0 → 0.16.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/dataframe
 
+## 0.16.2
+
+### Fixes
+
+- [#10597](https://github.com/gradio-app/gradio/pull/10597) [`8c87eb8`](https://github.com/gradio-app/gradio/commit/8c87eb83066278b0e28267a6648d4729d6f39aa9) - Fix issue where styling changes were overridden when value was updated simultaneously.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.15.2
+- @gradio/statustracker@0.10.4
+- @gradio/atoms@0.13.3
+- @gradio/button@0.4.7
+
+## 0.16.1
+
+### Fixes
+
+- [#10607](https://github.com/gradio-app/gradio/pull/10607) [`c354f5f`](https://github.com/gradio-app/gradio/commit/c354f5ff16c787d722f4e53d5a97f729abba955e) - Add empty dataframe functionality.  Thanks @hannahblair!
+- [#10596](https://github.com/gradio-app/gradio/pull/10596) [`a8bde76`](https://github.com/gradio-app/gradio/commit/a8bde76e2b0f65b3565019beb03ac8b1fd152963) - Fix margin above `gr.Dataframe` when no header is provided.  Thanks @abidlabs!
+
 ## 0.16.0
 
 ### Features

package/Dataframe.stories.svelte

@@ -152,6 +152,21 @@
 	}}
 />
 
+<Story
+	name="Dataframe without a label"
+	args={{
+		values: [
+			[800, 100, 800],
+			[200, 800, 700]
+		],
+		headers: ["Math", "Reading", "Writing"],
+		show_label: false,
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		editable: false
+	}}
+/>
+
 <Story
 	name="Dataframe with different colors"
 	args={{

package/Example.svelte

@@ -6,6 +6,7 @@
 
 	let hovered = false;
 	let loaded = Array.isArray(value);
+	let is_empty = loaded && (value.length === 0 || value[0].length === 0);
 </script>
 
 {#if loaded}
@@ -20,6 +21,12 @@
 	>
 		{#if typeof value === "string"}
 			{value}
+		{:else if is_empty}
+			<table class="">
+				<tr>
+					<td>Empty</td>
+				</tr>
+			</table>
 		{:else}
 			<table class="">
 				{#each value.slice(0, 3) as row, i}

package/Index.svelte

@@ -103,7 +103,8 @@
 		{styling}
 		headers={_headers}
 		on:change={(e) => {
-			value = e.detail;
+			value.data = e.detail.data;
+			value.headers = e.detail.headers;
 			gradio.dispatch("change");
 		}}
 		on:input={(e) => gradio.dispatch("input")}

package/dist/Example.svelte

@@ -4,6 +4,7 @@ export let selected = false;
 export let index;
 let hovered = false;
 let loaded = Array.isArray(value);
+let is_empty = loaded && (value.length === 0 || value[0].length === 0);
 </script>
 
 {#if loaded}
@@ -18,6 +19,12 @@ let loaded = Array.isArray(value);
 	>
 		{#if typeof value === "string"}
 			{value}
+		{:else if is_empty}
+			<table class="">
+				<tr>
+					<td>Empty</td>
+				</tr>
+			</table>
 		{:else}
 			<table class="">
 				{#each value.slice(0, 3) as row, i}

package/dist/Index.svelte

@@ -81,7 +81,8 @@ $:
 		{styling}
 		headers={_headers}
 		on:change={(e) => {
-			value = e.detail;
+			value.data = e.detail.data;
+			value.headers = e.detail.headers;
 			gradio.dispatch("change");
 		}}
 		on:input={(e) => gradio.dispatch("input")}

package/dist/shared/CellMenu.svelte

@@ -81,7 +81,7 @@ function position_menu() {
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: var(--layer-2);
+		z-index: var(--layer-4);
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);

package/dist/shared/EditableCell.svelte

@@ -84,7 +84,6 @@ function handle_click() {
 	class:multiline={header}
 	on:focus|preventDefault
 	style={styling}
-	class="table-cell-text"
 	data-editable={editable}
 	placeholder=" "
 >
@@ -123,8 +122,6 @@ function handle_click() {
 		position: relative;
 		display: inline-block;
 		outline: none;
-		padding: var(--size-2);
-		padding-right: 0;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
@@ -151,6 +148,7 @@ function handle_click() {
 		font-weight: var(--weight-bold);
 		white-space: normal;
 		word-break: break-word;
+		margin-left: var(--size-1);
 	}
 
 	.edit {