---
title: Dataframe Sandbox
emoji: 📊
colorFrom: red
colorTo: blue
sdk: static
pinned: false
license: apache-2.0
app_build_command: npm run build
app_file: dist/index.html
---

# @gradio/dataframe Demo

An interactive demonstration of the `@gradio/dataframe` component showcasing its features including editing, searching, filtering, and various configuration options.

## Features

- 🎯 **Interactive Canvas** - Live dataframe component with real-time controls
- 📖 **Comprehensive Documentation** - Complete API reference and usage examples
- 🔍 **Event Handling** - Demonstration of component events and callbacks
- 💻 **Source Code** - Full implementation code with syntax highlighting
- 🌙 **Dark Mode** - Toggle between light and dark themes
- 📱 **Responsive Design** - Works on desktop and mobile devices
- 🛠️ **Resizable Controls** - Drag to adjust controls panel height

## Usage

Explore different dataframe configurations using the examples panel, adjust settings with the controls panel, and see real-time updates to understand the component's capabilities.

## Built with

- **Svelte 5** - Modern reactive framework
- **Vite** - Fast build tool and dev server
- **Tailwind CSS** - Utility-first CSS framework
- **@gradio/dataframe** - Standalone dataframe component