@gradio/dataframe Interactive Demo

A comprehensive interactive demo for the @gradio/dataframe standalone component. This demo allows developers to explore all the features, props, and customization options available in the Gradio Dataframe component.

Features

🎛️ Interactive Configuration Panel

• Sample Datasets: Switch between different data types (basic, large datasets, mixed content with HTML/Markdown)
• Theme Selection: Choose from multiple pre-built themes (default, dark, purple, green, orange)
• Display Options: Toggle various display features like row numbers, copy button, fullscreen, etc.
• Search & Filter: Configure search and filtering capabilities
• Data Manipulation: Add columns and rows dynamically

📊 Live Preview

• Real-time updates as you change configuration
• Event logging to console for development
• Live code examples that update with your configuration

🎨 Theming Examples

• Multiple pre-built themes demonstrating CSS variable customization
• Dark mode support
• Color scheme variations (purple, green, orange themes)

📝 Code Generation

• Auto-generated code examples based on your current configuration
• Copy-paste ready Svelte component code
• TypeScript support with proper type definitions

Quick Start

1. Install dependencies:

   pnpm install

2. Start the development server:

   pnpm run dev

3. Open your browser and navigate to http://localhost:5173

Sample Datasets

The demo includes three types of sample datasets:

Basic Data

Simple tabular data with mixed types (strings, numbers, booleans, dates):

• Name (string)
• Age (number)
• Active (boolean)
• Date (date)

Large Dataset

Performance testing with 100 rows of generated data:

• Name, Age, Active, Date, Salary, Rating
• Demonstrates virtualization and scrolling performance

Mixed Content

Advanced content types including HTML and Markdown:

• Product names with Markdown formatting
• HTML content with styled elements
• Mixed data types in a single table

Configuration Options

All props from the @gradio/dataframe component are configurable:

• editable - Enable/disable cell editing
• show_row_numbers - Show/hide row numbers
• show_search - Search functionality (none, search, filter)
• show_copy_button - Copy to clipboard button
• show_fullscreen_button - Fullscreen toggle
• show_label - Display table label
• label - Custom table label text
• max_height - Maximum table height in pixels
• line_breaks - Enable/disable line breaks in cells
• wrap - Enable/disable text wrapping
• max_chars - Maximum characters per cell
• datatype - Column data types configuration

Theming

The demo showcases CSS variable-based theming:

:root {
  --gr-df-table-bg-even: #ffffff;
  --gr-df-table-bg-odd: #f9fafb;
  --gr-df-copied-cell-color: #dbeafe;
  --gr-df-table-border: #e5e7eb;
  --gr-df-table-text: #374151;
  --gr-df-accent: #3b82f6;
  --gr-df-accent-soft: #dbeafe;
  --gr-df-font-size: 14px;
  --gr-df-font-mono: ui-monospace, SFMono-Regular, monospace;
  --gr-df-font-sans: system-ui, -apple-system, sans-serif;
  --gr-df-table-radius: 8px;
}

Events

The component emits three types of events:

• change - Fired when table data changes
• select - Fired when a cell is selected
• input - Fired on user input (search/filter)

All events are logged to the browser console in the demo.

Development

This demo is built with:

• SvelteKit - Modern Svelte framework
• TypeScript - Type safety and better development experience
• Tailwind CSS - Utility-first CSS framework
• @gradio/dataframe - The standalone dataframe component

Project Structure

src/
├── lib/
│   ├── ConfigPanel.svelte    # Configuration panel component
│   └── sampleData.ts         # Sample dataset definitions
├── routes/
│   ├── +layout.svelte        # App layout with CSS imports
│   └── +page.svelte          # Main demo page
└── app.css                   # Global styles and theme variables

Deployment

To build for production:

pnpm run build

The built files will be in the build/ directory and can be deployed to any static hosting service.

License

MIT - Feel free to use this demo as a starting point for your own projects.Trigger GitHub Pages deployment