@gradio/dataframe 0.18.8 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/dataframe
 
+## 0.19.0
+
+### Features
+
+- [#11766](https://github.com/gradio-app/gradio/pull/11766) [`dfc0e03`](https://github.com/gradio-app/gradio/commit/dfc0e0305068dbd16ce905afc73d139e1e51eb46) - Add JS Dataframe documentation to docs.  Thanks @pngwn!
+- [#11712](https://github.com/gradio-app/gradio/pull/11712) [`0025e1a`](https://github.com/gradio-app/gradio/commit/0025e1a157edef57def99e4bf24a3686ff38eaca) - Publish gr.Dataframe as standalone library.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
 ## 0.18.8
 
 ### Dependency updates

package/Example.svelte

@@ -39,15 +39,15 @@
 						{/if}
 					</tr>
 				{/each}
-				{#if value.length > 3}
-					<div
-						class="overlay"
-						class:odd={index % 2 != 0}
-						class:even={index % 2 == 0}
-						class:button={type === "gallery"}
-					/>
-				{/if}
 			</table>
+			{#if value.length > 3}
+				<div
+					class="overlay"
+					class:odd={index % 2 != 0}
+					class:even={index % 2 == 0}
+					class:button={type === "gallery"}
+				></div>
+			{/if}
 		{/if}
 	</div>
 {/if}

package/Index.svelte

@@ -11,7 +11,7 @@
 	import Table from "./shared/Table.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { Headers, Datatype, DataframeValue } from "./shared/utils";
+	import type { Datatype, DataframeValue } from "./shared/utils/utils";
 	import Image from "@gradio/image";
 
 	export let elem_id = "";

package/README.md

@@ -1,41 +1,236 @@
-# `@gradio/dataframe`
+# @gradio/dataframe
 
-```html
-<script>
-    import { BaseDataFrame, BaseExample } from "@gradio/dataframe";
+Standalone Svelte component that brings Gradio's Dataframe UI to any Svelte/SvelteKit project.
+
+This component is lightweight, virtualized for efficient rendering of large datasets, and offers features like column freezing, and customizable styling via CSS variables. Use this component when you need a highly interactive, accessible, and easily themeable table for user-facing applications, especially where seamless Svelte/SvelteKit integration is important.
+
+## Install
+
+With `npm`:
+
+```shell
+npm i @gradio/dataframe
+```
+
+With `pnpm`:
+
+```shell
+pnpm add @gradio/dataframe
+```
+
+**[View on npm](https://www.npmjs.com/package/@gradio/dataframe)**
+
+## Usage (Svelte/SvelteKit)
+
+```svelte
+<script lang="ts">
+  import Dataframe from "@gradio/dataframe";
+
+  let value = {
+    data: [
+      ["Alice", 25, true],
+      ["Bob", 30, false]
+    ],
+    headers: ["Name", "Age", "Active"],
+  };
+
+  function handle_change(e: any) {
+    console.log("changed", e.detail);
+  }
+
+  function handle_select(e: any) {
+    console.log("selected", e.detail);
+  }
+
+  function handle_input(e: any) {
+    console.log("input", e.detail);
+  }
 </script>
+
+<Dataframe
+  bind:value
+  {datatype}
+  show_search="search"
+  show_row_numbers={true}
+  show_copy_button={true}
+  show_fullscreen_button={true}
+  editable={true}
+  on:change={handle_change}
+  on:select={handle_select}
+  on:input={handle_input}
+  />
+```
+
+## Props
+
+```typescript
+interface DataframeProps {
+
+  /**
+   * The value object containing the table data, headers, and optional metadata.
+   * Example: { data: [...], headers: [...], metadata?: any }
+   * Default: { data: [[]], headers: [] }
+   */
+  value: {
+    data: (string | number | boolean)[][];
+    headers: string[];
+    metadata?: any;
+  };
+
+  /**
+   * Array of data types per column. Supported: "str", "number", "bool", "date", "markdown", "html".
+   * Default: []
+   */
+  datatype?: string[];
+
+  /**
+   * Enable or disable cell editing.
+   * Default: true
+   */
+  editable?: boolean;
+
+  /**
+   * Show or hide the row number column.
+   * Default: true
+   */
+  show_row_numbers?: boolean;
+
+  /**
+   * Show search input. Can be "search", "filter", or "none.
+   * Default: "none"
+   */
+  show_search?: "none" | "search" | "filter" | boolean;
+
+  /**
+   * Show or hide the copy to clipboard button.
+   * Default: true
+   */
+  show_copy_button?: boolean;
+
+  /**
+   * Show or hide the fullscreen toggle button.
+   * Default: true
+   */
+  show_fullscreen_button?: boolean;
+
+  /**
+   * Accessible caption for the table.
+   * Default: null
+   */
+  label?: string | null;
+
+  /**
+   * Show or hide the dataframe label.
+   * Default: true
+   */
+  show_label?: boolean;
+
+  /**
+   * (Optional) Set column widths in CSS units (e.g. ["100px", "20%", ...]).
+   */
+  column_widths?: string[];
+
+  /**
+   * (Optional) Set the maximum height of the table in pixels.
+   * Default: 500
+   */
+  max_height?: number;
+
+  /**
+   * (Optional) Set the maximum number of characters per cell.
+   */
+  max_chars?: number;
+
+  /**
+   * (Optional) Enable or disable line breaks in cells.
+   * Default: true
+   */
+  line_breaks?: boolean;
+
+  /**
+   * (Optional) Enable or disable text wrapping in cells.
+   * Default: false
+   */
+  wrap?: boolean;
+}
+```
+
+## Events
+
+The component emits the following events:
+
+```ts
+// Fired when table data changes
+on:change={(e: CustomEvent<{ data: (string | number | boolean)[][]; headers: string[]; metadata: any }>) => void}
+
+// Fired when a cell is selected
+on:select={(e: CustomEvent<{ index: number[]; value: any; selected: boolean }>) => void}
+
+// Fired on user input (search/filter)
+on:input={(e: CustomEvent<string | null>) => void}
+```
+
+Example:
+
+```svelte
+<Dataframe
+  on:change={(e) => console.log('data', e.detail)}
+  on:input={(e) => console.log('input', e.detail)}
+  on:select={(e) => console.log('select', e.detail)}
+/>
+```
+
+## TypeScript
+
+The package publishes `types.d.ts` with `DataframeProps` module declarations.
+
+## Custom Styling
+
+The standalone package exposes a small set of public CSS variables you can use to theme the Dataframe. These variables are namespaced with `--gr-df-*` and are the recommended way to override the default styling.
+
+**Color Variables**
+- `--gr-df-table-bg-even` — background for even rows
+- `--gr-df-table-bg-odd` — background for odd rows
+- `--gr-df-copied-cell-color` - background for copied cells
+- `--gr-df-table-border` — table border color
+- `--gr-df-table-text` — table text color
+- `--gr-df-accent` — primary accent color
+- `--gr-df-accent-soft` — soft/pale accent color
+
+**Font Variables**
+- `--gr-df-font-size` — table body font-size
+- `--gr-df-font-mono` — monospace font family
+- `--gr-df-font-sans` — sans serif font family
+
+**Border/Radius Variables**
+- `--gr-df-table-radius` — table corner radius
+
+Example:
+
+```svelte
+<div class="df-theme">
+  <Dataframe ... />
+</div>
+
+<style>
+  .df-theme {
+    --gr-df-accent: #7c3aed;
+  }
+</style>
 ```
 
-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 type: "gallery" | "table";
-	export let selected = false;
-	export let index: number;
-```
+Alternatively, you can target internal classes within the Dataframe using a global override. 
+
+```css
+.df-theme :global(.cell-wrap) {
+  background-color: #7c3aed ;
+}
+```
+
+**Note:** This standalone component does **not** currently support the file upload functionality (e.g. drag-and-dropping to populate the dataframe) that is available in the Gradio Dataframe component.
+
+
+## License
+
+MIT
+

package/dist/Example.svelte

@@ -37,15 +37,15 @@ let is_empty = loaded && (value.length === 0 || value[0].length === 0);
 						{/if}
 					</tr>
 				{/each}
-				{#if value.length > 3}
-					<div
-						class="overlay"
-						class:odd={index % 2 != 0}
-						class:even={index % 2 == 0}
-						class:button={type === "gallery"}
-					/>
-				{/if}
 			</table>
+			{#if value.length > 3}
+				<div
+					class="overlay"
+					class:odd={index % 2 != 0}
+					class:even={index % 2 == 0}
+					class:button={type === "gallery"}
+				></div>
+			{/if}
 		{/if}
 	</div>
 {/if}

package/dist/Example.svelte.d.ts

@@ -3,13 +3,15 @@ declare const __propDef: {
     props: {
         value: (string | number)[][] | string;
         type: "gallery" | "table";
-        selected?: boolean | undefined;
+        selected?: boolean;
         index: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ExampleProps = typeof __propDef.props;
 export type ExampleEvents = typeof __propDef.events;

package/dist/Index.svelte.d.ts

@@ -3,25 +3,25 @@ export { default as BaseDataFrame } from "./shared/Table.svelte";
 export { default as BaseExample } from "./Example.svelte";
 import type { Gradio, SelectData } from "@gradio/utils";
 import type { LoadingStatus } from "@gradio/statustracker";
-import type { Datatype, DataframeValue } from "./shared/utils";
+import type { Datatype, DataframeValue } from "./shared/utils/utils";
 declare const __propDef: {
     props: {
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
-        visible?: boolean | undefined;
-        value?: DataframeValue | undefined;
-        value_is_output?: boolean | undefined;
+        elem_id?: string;
+        elem_classes?: string[];
+        visible?: boolean;
+        value?: DataframeValue;
+        value_is_output?: boolean;
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
-        label?: (string | null) | undefined;
-        show_label?: boolean | undefined;
+        label?: string | null;
+        show_label?: boolean;
         wrap: boolean;
         datatype: Datatype | Datatype[];
-        scale?: (number | null) | undefined;
+        scale?: number | null;
         min_width?: number | undefined;
         root: string;
-        line_breaks?: boolean | undefined;
-        column_widths?: string[] | undefined;
+        line_breaks?: boolean;
+        column_widths?: string[];
         gradio: Gradio<{
             change: never;
             select: SelectData;
@@ -37,19 +37,21 @@ declare const __propDef: {
         max_height?: number | undefined;
         loading_status: LoadingStatus;
         interactive: boolean;
-        show_fullscreen_button?: boolean | undefined;
+        show_fullscreen_button?: boolean;
         max_chars?: number | undefined;
-        show_copy_button?: boolean | undefined;
-        show_row_numbers?: boolean | undefined;
-        show_search?: ("none" | "search" | "filter") | undefined;
-        pinned_columns?: number | undefined;
-        static_columns?: (string | number)[] | undefined;
-        fullscreen?: boolean | undefined;
+        show_copy_button?: boolean;
+        show_row_numbers?: boolean;
+        show_search?: "none" | "search" | "filter";
+        pinned_columns?: number;
+        static_columns?: (string | number)[];
+        fullscreen?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;

package/dist/shared/BooleanCell.svelte

@@ -2,8 +2,7 @@
 export let value = false;
 export let editable = true;
 export let on_change;
-$:
-  bool_value = typeof value === "string" ? value.toLowerCase() === "true" : !!value;
+$: bool_value = typeof value === "string" ? value.toLowerCase() === "true" : !!value;
 function handle_change(event) {
   if (editable) {
     on_change(event.detail);

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

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

package/dist/shared/CellMenu.svelte

@@ -29,18 +29,14 @@ export let editable = true;
 export let i18n;
 let menu_element;
 let active_filter_menu = null;
-$:
-  is_header = row === -1;
-$:
-  can_add_rows = editable && row_count[1] === "dynamic";
-$:
-  can_add_columns = editable && col_count[1] === "dynamic";
+$: is_header = row === -1;
+$: can_add_rows = editable && row_count[1] === "dynamic";
+$: can_add_columns = editable && col_count[1] === "dynamic";
 onMount(() => {
   position_menu();
 });
 function position_menu() {
-  if (!menu_element)
-    return;
+  if (!menu_element) return;
   const viewport_width = window.innerWidth;
   const viewport_height = window.innerHeight;
   const menu_rect = menu_element.getBoundingClientRect();

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { I18nFormatter } from "js/utils/src";
+import type { I18nFormatter } from "@gradio/utils";
 import type { SortDirection, FilterDatatype } from "./context/dataframe_context";
 declare const __propDef: {
     props: {
@@ -16,20 +16,22 @@ declare const __propDef: {
         on_delete_col: () => void;
         can_delete_rows: boolean;
         can_delete_cols: boolean;
-        on_sort?: ((direction: SortDirection) => void) | undefined;
-        on_clear_sort?: (() => void) | undefined;
-        sort_direction?: (SortDirection | null) | undefined;
-        sort_priority?: (number | null) | undefined;
-        on_filter?: ((datatype: FilterDatatype, selected_filter: string, value: string) => void) | undefined;
-        on_clear_filter?: (() => void) | undefined;
-        filter_active?: (boolean | null) | undefined;
-        editable?: boolean | undefined;
+        on_sort?: (direction: SortDirection) => void;
+        on_clear_sort?: () => void;
+        sort_direction?: SortDirection | null;
+        sort_priority?: number | null;
+        on_filter?: (datatype: FilterDatatype, selected_filter: string, value: string) => void;
+        on_clear_filter?: () => void;
+        filter_active?: boolean | null;
+        editable?: boolean;
         i18n: I18nFormatter;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CellMenuProps = typeof __propDef.props;
 export type CellMenuEvents = typeof __propDef.events;

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CellMenuButtonProps = typeof __propDef.props;
 export type CellMenuButtonEvents = typeof __propDef.events;

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CellMenuIconsProps = typeof __propDef.props;
 export type CellMenuIconsEvents = typeof __propDef.events;

package/dist/shared/EditableCell.svelte

@@ -24,21 +24,15 @@ export let on_select_row = null;
 export let el;
 const dispatch = createEventDispatcher();
 function truncate_text(text, max_length = null, is_image = false) {
-  if (is_image)
-    return String(text);
+  if (is_image) return String(text);
   const str = String(text);
-  if (!max_length || max_length <= 0)
-    return str;
-  if (str.length <= max_length)
-    return str;
+  if (!max_length || max_length <= 0) return str;
+  if (str.length <= max_length) return str;
   return str.slice(0, max_length) + "...";
 }
-$:
-  should_truncate = !edit && max_chars !== null && max_chars > 0;
-$:
-  display_content = editable ? value : display_value !== null ? display_value : value;
-$:
-  display_text = should_truncate ? truncate_text(display_content, max_chars, datatype === "image") : display_content;
+$: should_truncate = !edit && max_chars !== null && max_chars > 0;
+$: display_content = editable ? value : display_value !== null ? display_value : value;
+$: display_text = should_truncate ? truncate_text(display_content, max_chars, datatype === "image") : display_content;
 function use_focus(node) {
   requestAnimationFrame(() => {
     node.focus();

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

@@ -3,28 +3,28 @@ import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
         edit: boolean;
-        value?: (string | number) | undefined;
-        display_value?: (string | null) | undefined;
-        styling?: string | undefined;
-        header?: boolean | undefined;
-        datatype?: ("str" | "markdown" | "html" | "number" | "bool" | "date" | "image") | undefined;
+        value?: string | number;
+        display_value?: string | null;
+        styling?: string;
+        header?: boolean;
+        datatype?: "str" | "markdown" | "html" | "number" | "bool" | "date" | "image";
         latex_delimiters: {
             left: string;
             right: string;
             display: boolean;
         }[];
-        line_breaks?: boolean | undefined;
-        editable?: boolean | undefined;
-        is_static?: boolean | undefined;
-        max_chars?: (number | null) | undefined;
-        components?: Record<string, any> | undefined;
+        line_breaks?: boolean;
+        editable?: boolean;
+        is_static?: boolean;
+        max_chars?: number | null;
+        components?: Record<string, any>;
         i18n: I18nFormatter;
-        is_dragging?: boolean | undefined;
-        wrap_text?: boolean | undefined;
-        show_selection_buttons?: boolean | undefined;
+        is_dragging?: boolean;
+        wrap_text?: boolean;
+        show_selection_buttons?: boolean;
         coords: [number, number];
-        on_select_column?: (((col: number) => void) | null) | undefined;
-        on_select_row?: (((row: number) => void) | null) | undefined;
+        on_select_column?: ((col: number) => void) | null;
+        on_select_row?: ((row: number) => void) | null;
         el: HTMLTextAreaElement | null;
     };
     events: {
@@ -40,6 +40,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type EditableCellProps = typeof __propDef.props;
 export type EditableCellEvents = typeof __propDef.events;

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type EmptyRowButtonProps = typeof __propDef.props;
 export type EmptyRowButtonEvents = typeof __propDef.events;

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ExampleProps = typeof __propDef.props;
 export type ExampleEvents = typeof __propDef.events;

package/dist/shared/FilterMenu.svelte

@@ -1,6 +1,5 @@
 <script>import { onMount } from "svelte";
-import { Check } from "@gradio/icons";
-import DropdownArrow from "../../icons/src/DropdownArrow.svelte";
+import { Check, DropdownArrow } from "@gradio/icons";
 export let on_filter = () => {
 };
 let menu_element;
@@ -25,8 +24,7 @@ onMount(() => {
   position_menu();
 });
 function position_menu() {
-  if (!menu_element)
-    return;
+  if (!menu_element) return;
   const viewport_width = window.innerWidth;
   const viewport_height = window.innerHeight;
   const menu_rect = menu_element.getBoundingClientRect();