@gradio/dataframe demo
{#if showLeftPanel || showRightPanel}
{ showLeftPanel = false; showRightPanel = false; }}
on:keydown={(e) => { if (e.key === 'Escape') { showLeftPanel = false; showRightPanel = false; } }}
>
{/if}
@gradio/dataframe
A standalone dataframe component from Gradio that provides interactive table functionality with editing, searching, and data manipulation capabilities.
Navigation
Examples
{#each Object.entries(sampleDatasets) as [key, dataset]}
{/each}
{#if activeView === 'canvas'}
import Dataframe from "@gradio/dataframe";
let value = {
data: [["Alice", 25], ["Bob", 30]],
headers: ["Name", "Age"],
};
{:else if activeView === 'events'}
{
console.log("Data changed:", e.detail);
}}
/>`}
/>
{
console.log("Cell selected:", e.detail);
// e.detail contains: { row: number, col: number }
}}
/>`}
/>
{
console.log("User input:", e.detail);
// Real-time validation logic here
}}
/>`}
/>
import Dataframe from "@gradio/dataframe";
let value = ` + JSON.stringify({
data: value.data.slice(0, 3),
headers: value.headers,
metadata: null
}, null, 2) + `;
let datatype = ` + JSON.stringify(datatype) + `;
function handleChange(e: any) {
console.log("Data changed:", e.detail);
}
function handleSelect(e: any) {
console.log("Cell selected:", e.detail);
}
function handleInput(e: any) {
console.log("Input event:", e.detail);
}
@gradio/dataframe
A standalone dataframe component from Gradio that provides interactive table functionality with editing, searching, and data manipulation capabilities.
Installation
npm install @gradio/dataframe
Key Features
- ✓ Interactive editing and data manipulation
- ✓ Search and filter capabilities
- ✓ Customizable appearance and behavior
- ✓ Support for multiple data types
- ✓ Copy to clipboard functionality
- ✓ Fullscreen mode support
Quick Start
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value |
DataFrame | Array | List | null | Data to display. Supports pandas, numpy, polars, and list of lists |
headers |
string[] | null | List of column header names |
datatype |
string | string[] | "str" | Data types: "str", "number", "bool", "date", "markdown", "html", "image", "auto" |
interactive |
boolean | null | Whether users can edit the dataframe (inferred if not provided) |
label |
string | null | Label text that appears above the component |
show_label |
boolean | null | Whether to display the label |
max_height |
number | string | 500 | Maximum height in pixels or CSS units |
show_row_numbers |
boolean | false | Display row numbers in a separate column |
show_search |
"none" | "search" | "filter" | "none" | Show search input and filter functionality |
show_copy_button |
boolean | false | Show button to copy table data to clipboard |
show_fullscreen_button |
boolean | false | Show button to view table in fullscreen mode |
wrap |
boolean | false | Enable text wrapping in table cells |
line_breaks |
boolean | true | Enable GitHub-flavored Markdown line breaks (for markdown columns) |
column_widths |
(string | number)[] | null | Width of each column in pixels ("100px") or percentage ("10%") |
max_chars |
number | null | Maximum characters to display per cell before truncating |
row_count |
number | [number, "fixed" | "dynamic"] | [1, "dynamic"] | Limit number of rows and whether users can add/delete rows |
col_count |
number | [number, "fixed" | "dynamic"] | null | Limit number of columns and whether users can add/delete columns |
pinned_columns |
number | null | Number of columns to pin from the left |
static_columns |
number[] | null | Column indices that should not be editable |
type |
"pandas" | "numpy" | "array" | "polars" | "pandas" | Type of value returned by the component |
Events
The dataframe component fires several events that you can listen to for user interactions and data changes.
change
Data Change Event
Fired when the table data is modified by the user.
select
Cell Selection Event
Fired when a cell is selected or focused.
input
User Input Event
Fired during user input, useful for real-time validation.
Event Data Structure
All events provide data through the e.detail property:
Source Code
Complete example showing how to implement the dataframe component with all features.