@gradio/dataframe 0.16.0 → 0.16.2

package/dist/shared/Table.svelte

@@ -109,9 +109,11 @@ function make_headers(_head, col_count2, els2) {
 }
 function process_data(_values) {
   const data_row_length = _values.length;
+  if (data_row_length === 0)
+    return [];
   return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length).fill(0).map((_, i) => {
     return Array(
-      col_count[1] === "fixed" ? col_count[0] : data_row_length > 0 ? _values[0].length : headers.length
+      col_count[1] === "fixed" ? col_count[0] : _values[0].length || headers.length
     ).fill(0).map((_2, j) => {
       const id = make_id();
       els[id] = els[id] || { input: null, cell: null };
@@ -150,6 +152,7 @@ async function trigger_change() {
       data: data.map((row) => row.map((cell) => cell.value)),
       headers: _headers.map((h) => h.value),
       metadata: null
+      // the metadata (display value, styling) cannot be changed by the user so we don't need to pass it up
     });
     if (!value_is_output) {
       dispatch("input");
@@ -360,16 +363,14 @@ async function add_row(index) {
   parent.focus();
   if (row_count[1] !== "dynamic")
     return;
-  if (data.length === 0) {
-    values = [Array(headers.length).fill("")];
-    return;
-  }
-  const new_row = Array(data[0].length).fill(0).map((_, i) => {
+  const new_row = Array(data[0]?.length || headers.length).fill(0).map((_, i) => {
     const _id = make_id();
     els[_id] = { cell: null, input: null };
     return { id: _id, value: "" };
   });
-  if (index !== void 0 && index >= 0 && index <= data.length) {
+  if (data.length === 0) {
+    data = [new_row];
+  } else if (index !== void 0 && index >= 0 && index <= data.length) {
     data.splice(index, 0, new_row);
   } else {
     data.push(new_row);
@@ -605,14 +606,16 @@ async function delete_col(index) {
   parent.focus();
   if (col_count[1] !== "dynamic")
     return;
-  if (data[0].length <= 1)
+  if (_headers.length <= 1)
     return;
   _headers.splice(index, 1);
   _headers = _headers;
-  data.forEach((row) => {
-    row.splice(index, 1);
-  });
-  data = data;
+  if (data.length > 0) {
+    data.forEach((row) => {
+      row.splice(index, 1);
+    });
+    data = data;
+  }
   selected = false;
 }
 function delete_row_at(index) {
@@ -702,24 +705,26 @@ function commit_filter() {
 <svelte:window on:resize={() => set_cell_widths()} />
 
 <div class="table-container">
-	<div class="header-row">
-		{#if label && label.length !== 0 && show_label}
-			<div class="label">
-				<p>{label}</p>
-			</div>
-		{/if}
-		<Toolbar
-			{show_fullscreen_button}
-			{is_fullscreen}
-			on:click={toggle_fullscreen}
-			on_copy={handle_copy}
-			{show_copy_button}
-			{show_search}
-			on:search={(e) => handle_search(e.detail)}
-			on_commit_filter={commit_filter}
-			{current_search_query}
-		/>
-	</div>
+	{#if (label && label.length !== 0 && show_label) || show_fullscreen_button || show_copy_button || show_search !== "none"}
+		<div class="header-row">
+			{#if label && label.length !== 0 && show_label}
+				<div class="label">
+					<p>{label}</p>
+				</div>
+			{/if}
+			<Toolbar
+				{show_fullscreen_button}
+				{is_fullscreen}
+				on:click={toggle_fullscreen}
+				on_copy={handle_copy}
+				{show_copy_button}
+				{show_search}
+				on:search={(e) => handle_search(e.detail)}
+				on_commit_filter={commit_filter}
+				{current_search_query}
+			/>
+		</div>
+	{/if}
 	<div
 		bind:this={parent}
 		class="table-wrap"
@@ -864,184 +869,205 @@ function commit_filter() {
 			bind:dragging
 			aria_label={i18n("dataframe.drop_to_upload")}
 		>
-			<VirtualTable
-				bind:items={data}
-				{max_height}
-				bind:actual_height={table_height}
-				bind:table_scrollbar_width={scrollbar_width}
-				selected={selected_index}
-				disable_scroll={active_cell_menu !== null ||
-					active_header_menu !== null}
-			>
-				{#if label && label.length !== 0}
-					<caption class="sr-only">{label}</caption>
-				{/if}
-				<tr slot="thead">
-					{#if show_row_numbers}
-						<th
-							class="row-number-header frozen-column always-frozen"
-							style="left: 0;"
-						>
-							<div class="cell-wrap">
-								<div class="header-content">
-									<div class="header-text"></div>
-								</div>
-							</div>
-						</th>
+			<div class="table-wrap">
+				<VirtualTable
+					bind:items={data}
+					{max_height}
+					bind:actual_height={table_height}
+					bind:table_scrollbar_width={scrollbar_width}
+					selected={selected_index}
+					disable_scroll={active_cell_menu !== null ||
+						active_header_menu !== null}
+				>
+					{#if label && label.length !== 0}
+						<caption class="sr-only">{label}</caption>
 					{/if}
-					{#each _headers as { value, id }, i (id)}
-						<th
-							class:frozen-column={i < actual_pinned_columns}
-							class:last-frozen={i === actual_pinned_columns - 1}
-							class:focus={header_edit === i || selected_header === i}
-							aria-sort={get_sort_status(value, sort_by, sort_direction)}
-							style="width: {get_cell_width(i)}; left: {i <
-							actual_pinned_columns
-								? i === 0
-									? show_row_numbers
-										? 'var(--cell-width-row-number)'
-										: '0'
-									: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
-											i
-										)
-											.fill(0)
-											.map((_, idx) => `var(--cell-width-${idx})`)
-											.join(' + ')})`
-								: 'auto'};"
-							on:click={() => {
-								toggle_header_button(i);
-							}}
-						>
-							<div class="cell-wrap">
-								<div class="header-content">
+					<tr slot="thead">
+						{#if show_row_numbers}
+							<th
+								class="row-number-header frozen-column always-frozen"
+								style="left: 0;"
+							>
+								<div class="cell-wrap">
+									<div class="header-content">
+										<div class="header-text"></div>
+									</div>
+								</div>
+							</th>
+						{/if}
+						{#each _headers as { value, id }, i (id)}
+							<th
+								class:frozen-column={i < actual_pinned_columns}
+								class:last-frozen={i === actual_pinned_columns - 1}
+								class:focus={header_edit === i || selected_header === i}
+								aria-sort={get_sort_status(value, sort_by, sort_direction)}
+								style="width: {get_cell_width(i)}; left: {i <
+								actual_pinned_columns
+									? i === 0
+										? show_row_numbers
+											? 'var(--cell-width-row-number)'
+											: '0'
+										: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
+												i
+											)
+												.fill(0)
+												.map((_, idx) => `var(--cell-width-${idx})`)
+												.join(' + ')})`
+									: 'auto'};"
+								on:click={() => {
+									toggle_header_button(i);
+								}}
+							>
+								<div class="cell-wrap">
+									<div class="header-content">
+										<EditableCell
+											{max_chars}
+											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)}
+											header
+											{root}
+											{editable}
+										/>
+										<div class="sort-buttons">
+											<SortIcon
+												direction={sort_by === i ? sort_direction : null}
+												on:sort={({ detail }) => handle_sort(i, detail)}
+												{i18n}
+											/>
+										</div>
+									</div>
+									{#if editable}
+										<button
+											class="cell-menu-button"
+											on:click={(event) => toggle_header_menu(event, i)}
+											on:touchstart={(event) => {
+												event.preventDefault();
+												const touch = event.touches[0];
+												const mouseEvent = new MouseEvent("click", {
+													clientX: touch.clientX,
+													clientY: touch.clientY,
+													bubbles: true,
+													cancelable: true,
+													view: window
+												});
+												toggle_header_menu(mouseEvent, i);
+											}}
+										>
+											&#8942;
+										</button>
+									{/if}
+								</div>
+							</th>
+						{/each}
+					</tr>
+					<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
+						{#if show_row_numbers}
+							<td
+								class="row-number frozen-column always-frozen"
+								style="left: 0;"
+								tabindex="-1"
+							>
+								{index + 1}
+							</td>
+						{/if}
+						{#each item as { value, id }, j (id)}
+							<td
+								class:frozen-column={j < actual_pinned_columns}
+								class:last-frozen={j === actual_pinned_columns - 1}
+								tabindex={show_row_numbers && j === 0 ? -1 : 0}
+								bind:this={els[id].cell}
+								on:touchstart={(event) => {
+									const touch = event.touches[0];
+									const mouseEvent = new MouseEvent("click", {
+										clientX: touch.clientX,
+										clientY: touch.clientY,
+										bubbles: true,
+										cancelable: true,
+										view: window
+									});
+									handle_cell_click(mouseEvent, index, j);
+								}}
+								on:mousedown={(event) => {
+									event.preventDefault();
+									event.stopPropagation();
+								}}
+								on:click={(event) => handle_cell_click(event, index, j)}
+								style="width: {get_cell_width(j)}; left: {j <
+								actual_pinned_columns
+									? j === 0
+										? show_row_numbers
+											? 'var(--cell-width-row-number)'
+											: '0'
+										: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
+												j
+											)
+												.fill(0)
+												.map((_, idx) => `var(--cell-width-${idx})`)
+												.join(' + ')})`
+									: 'auto'}; {styling?.[index]?.[j] || ''}"
+								class:flash={copy_flash &&
+									is_cell_selected([index, j], selected_cells)}
+								class={is_cell_selected([index, j], selected_cells)}
+								class:menu-active={active_cell_menu &&
+									active_cell_menu.row === index &&
+									active_cell_menu.col === j}
+							>
+								<div class="cell-wrap">
 									<EditableCell
-										{max_chars}
-										bind:value={_headers[i].value}
+										bind:value={data[index][j].value}
 										bind:el={els[id].input}
+										display_value={display_value?.[index]?.[j]}
 										{latex_delimiters}
 										{line_breaks}
-										edit={header_edit === i}
-										on:keydown={end_header_edit}
-										on:dblclick={() => edit_header(i)}
-										header
-										{root}
 										{editable}
+										edit={dequal(editing, [index, j])}
+										datatype={Array.isArray(datatype) ? datatype[j] : datatype}
+										on:blur={() => {
+											clear_on_focus = false;
+											parent.focus();
+										}}
+										on:focus={() => {
+											const row = index;
+											const col = j;
+											if (
+												!selected_cells.some(([r, c]) => r === row && c === col)
+											) {
+												selected_cells = [[row, col]];
+											}
+										}}
+										{clear_on_focus}
+										{root}
+										{max_chars}
 									/>
-									<div class="sort-buttons">
-										<SortIcon
-											direction={sort_by === i ? sort_direction : null}
-											on:sort={({ detail }) => handle_sort(i, detail)}
-											{i18n}
-										/>
-									</div>
+									{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
+										<button
+											class="cell-menu-button"
+											on:click={(event) => toggle_cell_menu(event, index, j)}
+										>
+											&#8942;
+										</button>
+									{/if}
 								</div>
-								{#if editable}
-									<button
-										class="cell-menu-button"
-										on:click={(event) => toggle_header_menu(event, i)}
-									>
-										&#8942;
-									</button>
-								{/if}
-							</div>
-						</th>
-					{/each}
-				</tr>
-				<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
-					{#if show_row_numbers}
-						<td
-							class="row-number frozen-column always-frozen"
-							style="left: 0;"
-							tabindex="-1"
-						>
-							{index + 1}
-						</td>
-					{/if}
-					{#each item as { value, id }, j (id)}
-						<td
-							class:frozen-column={j < actual_pinned_columns}
-							class:last-frozen={j === actual_pinned_columns - 1}
-							tabindex={show_row_numbers && j === 0 ? -1 : 0}
-							bind:this={els[id].cell}
-							on:touchstart={(event) => {
-								const touch = event.touches[0];
-								const mouseEvent = new MouseEvent("click", {
-									clientX: touch.clientX,
-									clientY: touch.clientY,
-									bubbles: true,
-									cancelable: true,
-									view: window
-								});
-								handle_cell_click(mouseEvent, index, j);
-							}}
-							on:mousedown={(event) => {
-								event.preventDefault();
-								event.stopPropagation();
-							}}
-							on:click={(event) => handle_cell_click(event, index, j)}
-							style="width: {get_cell_width(j)}; left: {j <
-							actual_pinned_columns
-								? j === 0
-									? show_row_numbers
-										? 'var(--cell-width-row-number)'
-										: '0'
-									: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
-											j
-										)
-											.fill(0)
-											.map((_, idx) => `var(--cell-width-${idx})`)
-											.join(' + ')})`
-								: 'auto'}; {styling?.[index]?.[j] || ''}"
-							class:flash={copy_flash &&
-								is_cell_selected([index, j], selected_cells)}
-							class={is_cell_selected([index, j], selected_cells)}
-							class:menu-active={active_cell_menu &&
-								active_cell_menu.row === index &&
-								active_cell_menu.col === 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();
-									}}
-									on:focus={() => {
-										const row = index;
-										const col = j;
-										if (
-											!selected_cells.some(([r, c]) => r === row && c === col)
-										) {
-											selected_cells = [[row, col]];
-										}
-									}}
-									{clear_on_focus}
-									{root}
-									{max_chars}
-								/>
-								{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
-									<button
-										class="cell-menu-button"
-										on:click={(event) => toggle_cell_menu(event, index, j)}
-									>
-										&#8942;
-									</button>
-								{/if}
-							</div>
-						</td>
-					{/each}
-				</tr>
-			</VirtualTable>
+							</td>
+						{/each}
+					</tr>
+				</VirtualTable>
+			</div>
 		</Upload>
 	</div>
 </div>
+{#if data.length === 0 && editable && row_count[1] === "dynamic"}
+	<div class="add-row-container">
+		<button class="add-row-button" on:click={() => add_row()}>
+			<span>+</span>
+		</button>
+	</div>
+{/if}
 
 {#if active_cell_menu}
 	<CellMenu
@@ -1078,7 +1104,7 @@ function commit_filter() {
 		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}
+		can_delete_cols={_headers.length > 1}
 	/>
 {/if}
 
@@ -1100,8 +1126,6 @@ function commit_filter() {
 	.table-wrap {
 		position: relative;
 		transition: 150ms;
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--table-radius);
 	}
 
 	.table-wrap.menu-open {
@@ -1134,6 +1158,12 @@ function commit_filter() {
 		border-collapse: separate;
 	}
 
+	.table-wrap > :global(button) {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		overflow: hidden;
+	}
+
 	div:not(.no-wrap) td {
 		overflow-wrap: anywhere;
 	}
@@ -1176,10 +1206,12 @@ function commit_filter() {
 
 	th:first-child {
 		border-top-left-radius: var(--table-radius);
+		border-bottom-left-radius: var(--table-radius);
 	}
 
 	th:last-child {
 		border-top-right-radius: var(--table-radius);
+		border-bottom-right-radius: var(--table-radius);
 	}
 
 	th.focus,
@@ -1209,6 +1241,7 @@ function commit_filter() {
 		display: flex;
 		align-items: center;
 		flex-shrink: 0;
+		order: -1;
 	}
 
 	.editing {
@@ -1217,17 +1250,24 @@ function commit_filter() {
 
 	.cell-wrap {
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
+		justify-content: flex-start;
 		outline: none;
 		min-height: var(--size-9);
 		position: relative;
-		height: auto;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		margin: 0;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		border-radius: var(--table-radius);
 	}
 
 	.header-content {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
 		overflow: hidden;
 		flex-grow: 1;
 		min-width: 0;
@@ -1235,7 +1275,6 @@ function commit_filter() {
 		overflow-wrap: break-word;
 		word-break: normal;
 		height: 100%;
-		padding: var(--size-1);
 		gap: var(--size-1);
 	}
 
@@ -1265,7 +1304,8 @@ function commit_filter() {
 		transform: translateY(-50%);
 	}
 
-	.cell-selected .cell-menu-button {
+	.cell-selected .cell-menu-button,
+	th:hover .cell-menu-button {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -1482,4 +1522,24 @@ function commit_filter() {
 	.always-frozen {
 		z-index: var(--layer-3);
 	}
+
+	.add-row-container {
+		margin-top: var(--size-2);
+	}
+
+	.add-row-button {
+		width: 100%;
+		padding: var(--size-1);
+		background: transparent;
+		border: 1px dashed var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		cursor: pointer;
+		transition: all 150ms;
+	}
+
+	.add-row-button:hover {
+		background: var(--background-fill-secondary);
+		border-style: solid;
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.13.2",
-    "@gradio/button": "^0.4.6",
-    "@gradio/markdown-code": "^0.4.0",
+    "@gradio/atoms": "^0.13.3",
+    "@gradio/button": "^0.4.7",
     "@gradio/client": "^1.12.0",
-    "@gradio/statustracker": "^0.10.3",
+    "@gradio/markdown-code": "^0.4.0",
     "@gradio/icons": "^0.10.0",
-    "@gradio/upload": "^0.15.1",
-    "@gradio/utils": "^0.10.1"
+    "@gradio/utils": "^0.10.1",
+    "@gradio/statustracker": "^0.10.4",
+    "@gradio/upload": "^0.15.2"
   },
   "exports": {
     ".": {

package/shared/CellMenu.svelte

@@ -89,7 +89,7 @@
 <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/shared/EditableCell.svelte

@@ -110,7 +110,6 @@
 	class:multiline={header}
 	on:focus|preventDefault
 	style={styling}
-	class="table-cell-text"
 	data-editable={editable}
 	placeholder=" "
 >
@@ -149,8 +148,6 @@
 		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;
@@ -177,6 +174,7 @@
 		font-weight: var(--weight-bold);
 		white-space: normal;
 		word-break: break-word;
+		margin-left: var(--size-1);
 	}
 
 	.edit {