src/App.svelte

<!-- src/App.svelte -->
<script lang="ts">
  import DataTable from './lib/DataTable.svelte';
  import DataGenerator from './lib/DataGenerator.svelte';
  import DataControls from './lib/DataControls.svelte';
  
  interface TableData {
    data: (string | number | boolean)[][];
    headers: string[];
    metadata?: any;
  }

  let tableData: TableData = {
    data: [
      ["John Doe", 28, "john@example.com", true, "2024-01-15"],
      ["Jane Smith", 34, "jane@example.com", false, "2024-02-20"],
      ["Bob Johnson", 45, "bob@example.com", true, "2024-03-10"],
      ["Alice Brown", 29, "alice@example.com", true, "2024-01-25"],
      ["Charlie Wilson", 52, "charlie@example.com", false, "2024-02-14"],
    ],
    headers: ["Name", "Age", "Email", "Active", "Join Date"]
  };

  let dataTypes = ["str", "number", "str", "bool", "date"];
  let editable = true;
  let showRowNumbers = true;
  let showSearch: "none" | "search" | "filter" = "search";
  let showCopyButton = true;
  let showFullscreenButton = true;
  let lineBreaks = true;
  let wrap = false;
  let maxHeight = 500;
  let selectedTheme = "default";

  function handleDataUpdate(event: CustomEvent<TableData>) {
    tableData = event.detail;
  }

  function handleThemeChange(event: CustomEvent<string>) {
    selectedTheme = event.detail;
  }

  function handleControlsUpdate(event: CustomEvent<any>) {
    const controls = event.detail;
    editable = controls.editable;
    showRowNumbers = controls.showRowNumbers;
    showSearch = controls.showSearch;
    showCopyButton = controls.showCopyButton;
    showFullscreenButton = controls.showFullscreenButton;
    lineBreaks = controls.lineBreaks;
    wrap = controls.wrap;
    maxHeight = controls.maxHeight;
  }
</script>

<div class="app theme-{selectedTheme}">
  <header class="header">
    <div class="header-content">
      <h1>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="3" y1="9" x2="21" y2="9"></line>
          <line x1="9" y1="21" x2="9" y2="9"></line>
        </svg>
        Gradio Dataframe Demo
      </h1>
      <p class="subtitle">Interactive data table with advanced features</p>
    </div>
  </header>

  <main class="main">
    <div class="container">
      <div class="controls-section">
        <DataGenerator 
          on:generate={handleDataUpdate}
          on:themeChange={handleThemeChange}
        />
        
        <DataControls
          {editable}
          {showRowNumbers}
          {showSearch}
          {showCopyButton}
          {showFullscreenButton}
          {lineBreaks}
          {wrap}
          {maxHeight}
          on:update={handleControlsUpdate}
        />
      </div>

      <div class="table-section">
        <DataTable
          bind:value={tableData}
          {dataTypes}
          {editable}
          {showRowNumbers}
          {showSearch}
          {showCopyButton}
          {showFullscreenButton}
          {lineBreaks}
          {wrap}
          {maxHeight}
        />
      </div>
    </div>
  </main>

  <footer class="footer">
    <p>Built with Svelte & @gradio/dataframe • View on <a href="https://www.npmjs.com/package/@gradio/dataframe" target="_blank" rel="noopener">npm</a></p>
  </footer>
</div>

<style>
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
  }

  .header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .header-content {
    max-width: 1200px;
    margin: 0 auto;
  }

  h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  h1 svg {
    width: 32px;
    height: 32px;
  }

  .subtitle {
    margin: 0.5rem 0 0;
    opacity: 0.9;
    font-size: 1.1rem;
  }

  .main {
    flex: 1;
    padding: 2rem 1rem;
    background: #f8f9fa;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
  }

  .controls-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .table-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 400px;
  }

  .footer {
    background: white;
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
  }

  .footer a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
  }

  .footer a:hover {
    text-decoration: underline;
  }

  /* Theme variations */
  .theme-dark {
    --gr-df-table-bg-even: #1f2937;
    --gr-df-table-bg-odd: #111827;
    --gr-df-table-border: #374151;
    --gr-df-table-text: #f3f4f6;
    --gr-df-accent: #818cf8;
    --gr-df-accent-soft: #4338ca;
  }

  .theme-blue {
    --gr-df-accent: #3b82f6;
    --gr-df-accent-soft: #dbeafe;
  }

  .theme-green {
    --gr-df-accent: #10b981;
    --gr-df-accent-soft: #d1fae5;
  }

  .theme-purple {
    --gr-df-accent: #8b5cf6;
    --gr-df-accent-soft: #ede9fe;
  }

  @media (max-width: 768px) {
    .container {
      grid-template-columns: 1fr;
    }

    h1 {
      font-size: 1.5rem;
    }

    h1 svg {
      width: 24px;
      height: 24px;
    }

    .subtitle {
      font-size: 1rem;
    }

    .header {
      padding: 1.5rem 1rem;
    }

    .main {
      padding: 1rem;
    }
  }
</style>