src/App.svelte

<script lang="ts">
	import Dataframe from '@gradio/dataframe'
	import { onMount } from 'svelte'

	let value = $state({
		data: [
			['Alice', 25, true, 'Engineer'],
			['Bob', 30, false, 'Designer'],
			['Charlie', 35, true, 'Manager'],
			['Diana', 28, true, 'Developer'],
			['Eve', 22, false, 'Intern']
		],
		headers: ['Name', 'Age', 'Active', 'Role']
	})

	let datatype = $state(['str', 'number', 'bool', 'str'])
	let show_search = $state<'search' | 'filter' | 'none'>('search')
	let editable = $state(true)
	let show_row_numbers = $state(true)
	let show_copy_button = $state(true)
	let show_fullscreen_button = $state(true)
	let max_height = $state(400)
	let max_chars = $state(50)
	let line_breaks = $state(true)
	let wrap = $state(false)
	let column_widths = $state<string[]>([])

	function handle_change(e: CustomEvent) {
		console.log('Data changed:', e.detail)
		value = e.detail
	}

	function handle_select(e: CustomEvent) {
		console.log('Cell selected:', e.detail)
	}

	function handle_input(e: CustomEvent) {
		console.log('Search input:', e.detail)
	}

	function toggleEditable() {
		editable = !editable
	}

	function toggleRowNumbers() {
		show_row_numbers = !show_row_numbers
	}

	function toggleCopyButton() {
		show_copy_button = !show_copy_button
	}

	function toggleFullscreenButton() {
		show_fullscreen_button = !show_fullscreen_button
	}

	function updateColumnWidths() {
		if (column_widths.length > 0) {
			column_widths = []
		} else {
			column_widths = ['150px', '100px', '100px', '200px']
		}
	}

	onMount(() => {
		// Add more sample data for virtualization demo
		const additionalData = Array.from({ length: 100 }, (_, i) => [
			`User ${i + 6}`,
			Math.floor(Math.random() * 50) + 20,
			Math.random() > 0.5,
			['Engineer', 'Designer', 'Manager', 'Developer', 'Intern'][Math.floor(Math.random() * 5)]
		])
		value.data = [...value.data, ...additionalData]
	})
</script>

<div class="container">
	<h1>@gradio/dataframe Demo</h1>
	
	<div class="controls">
		<div class="control-group">
			<label>
				<input type="checkbox" bind:checked={editable} />
				Editable
			</label>
			<label>
				<input type="checkbox" bind:checked={show_row_numbers} />
				Show Row Numbers
			</label>
			<label>
				<input type="checkbox" bind:checked={show_copy_button} />
				Show Copy Button
			</label>
			<label>
				<input type="checkbox" bind:checked={show_fullscreen_button} />
				Show Fullscreen Button
			</label>
			<button on:click={updateColumnWidths}>
				{column_widths.length > 0 ? 'Reset Column Widths' : 'Set Column Widths'}
			</button>
		</div>
	</div>

	<div class="df-theme">
		<Dataframe
			bind:value
			{datatype}
			{show_search}
			{editable}
			{show_row_numbers}
			{show_copy_button}
			{show_fullscreen_button}
			{max_height}
			{max_chars}
			{line_breaks}
			{wrap}
			{column_widths}
			on:change={handle_change}
			on:select={handle_select}
			on:input={handle_input}
		/>
	</div>
</div>

<style>
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 2rem;
	}

	h1 {
		color: #7c3aed;
		margin-bottom: 2rem;
	}

	.controls {
		margin-bottom: 2rem;
		padding: 1rem;
		background-color: #f5f5f5;
		border-radius: 8px;
	}

	.control-group {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
	}

	label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 500;
	}

	button {
		padding: 0.5rem 1rem;
		background-color: #7c3aed;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-weight: 500;
		transition: background-color 0.2s;
	}

	button:hover {
		background-color: #6d28d9;
	}

	@media (max-width: 768px) {
		.container {
			padding: 1rem;
		}
		
		.control-group {
			flex-direction: column;
			align-items: flex-start;
		}
	}
</style>