-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
- - @gradio/dataframe demo -
-
-
-
-
-
-
- 📦
- npm
-
-
-
-
- {#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'}
-
-
- {:else if activeView === 'docs'}
-
-
-
-
-
- {:else if activeView === 'events'}
-
-
-
-
-
-
-
-
- @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 - -
-
-
- import Dataframe from "@gradio/dataframe";
-
- let value = {
- data: [["Alice", 25], ["Bob", 30]],
- headers: ["Name", "Age"],
- };
-
-
-
-
-
- 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 | -
-
- {:else if activeView === 'source'}
-
-
-
-
-
-
-
-
- Events
-- The dataframe component fires several events that you can listen to for user interactions and data changes. -
-
-
-
-
-
-
-
-
- change
-
- {
- console.log("Data changed:", e.detail);
- }}
-/>`}
- />
-
- Data Change Event
-Fired when the table data is modified by the user.
-
-
-
-
-
- select
-
- {
- console.log("Cell selected:", e.detail);
- // e.detail contains: { row: number, col: number }
- }}
-/>`}
- />
-
- Cell Selection Event
-Fired when a cell is selected or focused.
-
-
-
-
- input
-
- {
- console.log("User input:", e.detail);
- // Real-time validation logic here
- }}
-/>`}
- />
-
- 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. -
-Vite + Svelte
-
-
- import Dataframe from "@gradio/dataframe";
+
Current Configuration
-
+
- let value = ` + JSON.stringify({
- data: value.data.slice(0, 3),
- headers: value.headers,
- metadata: null
- }, null, 2) + `;
+ + Check out SvelteKit, the official Svelte app framework powered by Vite! +
- let datatype = ` + JSON.stringify(datatype) + `; ++ Click on the Vite and Svelte logos to learn more +
+ - function handleChange(e: any) { - console.log("Data changed:", e.detail); + diff --git a/src/app.css b/src/app.css index 9d5e2c38b7df3dc70ca99b79e20c8e892680ba4a..61ba367832ad77dd81568fe7b66af119713fb56f 100644 --- a/src/app.css +++ b/src/app.css @@ -1,696 +1,79 @@ -@import "tailwindcss"; - -/* Base styles */ -body { - margin: 0; - padding: 0; - font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - font-size: 14px; - line-height: 1.6; - color: #2e3438; - background-color: #f6f9fc; -} - -/* Storybook-specific styles */ -.storybook-header { - font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -} - -/* Override link styles for Storybook design */ -a { - color: inherit; - text-decoration: none; -} - -/* Button reset for Storybook style */ -button { - font-family: inherit; - border: none; - cursor: pointer; - background: none; -} - -/* Input styles for controls */ -input, select { - font-family: inherit; -} - -/* Storybook accent colors */ :root { - --storybook-primary: #F87701; - --storybook-secondary: #ff4785; - --storybook-green: #37d67a; - --storybook-orange: #fc521f; - --storybook-yellow: #ffae00; - --storybook-red: #fa5a5a; - --storybook-gray-1: #f6f9fc; - --storybook-gray-2: #e0e0e0; - --storybook-gray-3: #999; - --storybook-gray-4: #666; - --storybook-gray-5: #333; - --storybook-gray-6: #2b2b2b; - --storybook-gray-7: #1a1a1a; -} - -/* Gradio Dataframe CSS Variables */ -: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; -} - - -/* Custom theme examples */ -.purple-theme { - --gr-df-accent: #7c3aed; - --gr-df-accent-soft: #ede9fe; - --gr-df-copied-cell-color: #ede9fe; -} - -.green-theme { - --gr-df-accent: #059669; - --gr-df-accent-soft: #d1fae5; - --gr-df-copied-cell-color: #d1fae5; -} - -.orange-theme { - --gr-df-accent: #ea580c; - --gr-df-accent-soft: #fed7aa; - --gr-df-copied-cell-color: #fed7aa; -} - -/* Dark Mode Theme */ -.dark { - /* Override root CSS variables for dark mode */ - --gr-df-table-bg-even: #1f2937; - --gr-df-table-bg-odd: #111827; - --gr-df-copied-cell-color: #374151; - --gr-df-table-border: #374151; - --gr-df-table-text: #f9fafb; - --gr-df-accent: #60a5fa; - --gr-df-accent-soft: #1e3a8a; - - /* Dark mode for body and base elements */ - background-color: #0f172a; - color: #f1f5f9; -} - -/* Dark mode specific overrides for the interface */ -.dark .bg-white { - background-color: #1e293b; -} - -.dark .bg-\[#f6f9fc\] { - background-color: #0f172a; -} - -.dark .bg-\[#f8fafc\] { - background-color: #1e293b; -} - -/* Dark mode for dataframe container background */ -.dark div[class*="bg-[#f8fafc]"] { - background-color: #1e293b; -} - -.dark .rounded-lg.bg-\[#f8fafc\] { - background-color: #1e293b; -} - -.dark .rounded-xl.bg-\[#f8fafc\] { - background-color: #1e293b; -} - -/* Comprehensive dark mode overrides for all light backgrounds */ -.dark div, -.dark section, -.dark main, -.dark header, -.dark footer, -.dark aside, -.dark nav { - /* Override common light background colors */ -} - -.dark [class*="bg-white"]:not(button):not(.btn):not([role="button"]) { - background-color: #1e293b; -} - -.dark [class*="bg-[#f6f9fc]"]:not(button):not(.btn):not([role="button"]) { - background-color: #0f172a; -} - -.dark [class*="bg-[#f8fafc]"]:not(button):not(.btn):not([role="button"]) { - background-color: #1e293b; -} - -.dark [class*="bg-[#f9fafb]"]:not(button):not(.btn):not([role="button"]) { - background-color: #1e293b; -} - -.dark [class*="bg-[#fafafa]"]:not(button):not(.btn):not([role="button"]) { - background-color: #1e293b; -} - -.dark [class*="bg-gray-50"]:not(button):not(.btn):not([role="button"]) { - background-color: #1e293b; -} - -.dark [class*="bg-gray-100"]:not(button):not(.btn):not([role="button"]) { - background-color: #334155; -} - -/* Dark mode for all text colors */ -.dark [class*="text-[#2e3438]"] { - color: #f1f5f9; -} - -.dark [class*="text-[#374151]"] { - color: #e2e8f0 ; -} - -.dark [class*="text-[#64748b]"] { - color: #94a3b8 ; -} - -.dark [class*="text-[#9ca3af]"] { - color: #6b7280 ; -} - -.dark [class*="text-[#6b7280]"] { - color: #9ca3af ; -} - -/* Dark mode for all border colors */ -.dark [class*="border-[#e0e0e0]"] { - border-color: #475569; -} - -.dark [class*="border-[#e5e7eb]"] { - border-color: #475569; -} - -.dark [class*="border-[#d1d5db]"] { - border-color: #475569; -} - -.dark [class*="border-[#e2e8f0]"] { - border-color: #475569; -} - -.dark .border-\[#d1d5db\] { - border-color: #475569; -} - -.dark .border-\[#e0e0e0\] { - border-color: #475569; -} - -.dark .border-\[#e2e8f0\] { - border-color: #475569; -} - -.dark .text-\[#2e3438\] { - color: #f1f5f9; -} - -.dark .text-\[#73828c\] { - color: #cbd5e1; -} - -.dark .text-\[#64748b\] { - color: #94a3b8 ; -} - -.dark .text-\[#374151\] { - color: #e2e8f0 ; -} - -.dark .text-\[#1e293b\] { - color: #f8fafc ; -} - -.dark .text-\[#9ca3af\] { - color: #6b7280 ; -} - -/* Dark mode hover states */ -.dark .hover\:bg-\[#f6f9fc\]:hover { - background-color: #334155; -} - -.dark .hover\:text-\[#2e3438\]:hover { - color: #f1f5f9; -} - -.dark .hover\:border-\[#cbd5e1\]:hover { - border-color: #64748b ; -} - -/* Dark mode focus states */ -.dark .focus\:ring-\[#F87701\]:focus { - --tw-ring-color: #f97316 ; -} - -.dark .focus\:border-\[#F87701\]:focus { - border-color: #f97316 ; -} - -/* Dark mode for example cards */ -.dark .bg-\[#f1f5f9\] { - background-color: #475569; -} - -.dark .bg-\[#fef7f0\] { - background-color: #1e3a8a ; -} - -.dark .border-\[#F87701\] { - border-color: #60a5fa ; -} - -/* Dark mode for selected example card backgrounds - more specific selectors */ -.dark .rounded-xl.border-2.bg-\[#fef7f0\] { - background-color: #1e3a8a ; - border-color: #60a5fa ; -} - -.dark .rounded-xl.border-2.border-\[#F87701\] { - background-color: #1e3a8a ; - border-color: #60a5fa ; -} - -/* Dark mode for example card selected state colors */ -.dark .bg-\[#F87701\] { - background-color: #60a5fa ; -} - -/* Force dark mode on selected example cards using attribute selectors */ -.dark div[class*="bg-[#fef7f0]"] { - background-color: #1e3a8a ; -} - -.dark div[class*="border-[#F87701]"] { - border-color: #60a5fa ; -} - -.dark div[class*="bg-[#F87701]"] { - background-color: #60a5fa ; -} - -/* Maximum specificity override for selected example cards in dark mode */ -html.dark body div.space-y-2 button div.rounded-xl { - background-color: #1e3a8a ; - border-color: #60a5fa ; -} - -/* Target any div with the specific orange background class in dark mode */ -html.dark [class~="bg-[#fef7f0]"] { - background-color: #1e3a8a ; -} - -html.dark [class~="border-[#F87701]"] { - border-color: #60a5fa ; -} - -/* Nuclear option - override any element with these exact classes */ -.dark * { - --selected-bg: #1e3a8a; - --selected-border: #60a5fa; -} - -.dark .bg-\[#fef7f0\], -.dark [style*="background"], -.dark .rounded-xl[class*="bg-[#fef7f0]"] { - background-color: var(--selected-bg) ; - background: var(--selected-bg) ; -} - -.dark .border-\[#F87701\], -.dark .rounded-xl[class*="border-[#F87701]"] { - border-color: var(--selected-border) ; -} - -/* Dark mode for select dropdown */ -.dark select { - background-color: #1e293b; - color: #f1f5f9; - border-color: #475569; -} - -.dark select option { - background-color: #1e293b; - color: #f1f5f9; -} - -/* Dark mode for gradients */ -.dark .bg-gradient-to-r { - background: linear-gradient(to right, #1e293b, #0f172a) ; -} - -/* Dark mode for shadows */ -.dark .shadow-lg { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) ; -} - -.dark .hover\:shadow-sm:hover { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) ; -} - -/* Dark mode for code blocks and syntax highlighting */ -.dark code { - background-color: #374151 ; - color: #f9fafb ; -} - -.dark pre { - background-color: #1f2937 ; - border-color: #475569; -} - -/* Dark mode for tables */ -.dark table { - background-color: #1e293b; -} - -.dark th, .dark td { - border-color: #475569; - color: #f1f5f9; -} - -.dark thead { - background-color: #374151 ; -} - -.dark tbody tr:hover { - background-color: #334155; -} - -/* Dark mode for mobile overlay */ -.dark .bg-black { - background-color: rgba(0, 0, 0, 0.8) ; -} - -/* Additional dark mode text color fixes */ -.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { - color: #f1f5f9; -} - -.dark p { - color: #cbd5e1; -} - -.dark label { - color: #f1f5f9; -} - -/* Dark mode for specific text color classes that might be missed */ -.dark .text-gray-600 { - color: #94a3b8 ; -} - -.dark .text-gray-700 { - color: #cbd5e1; -} - -.dark .text-gray-800 { - color: #e2e8f0 ; -} - -.dark .text-gray-900 { - color: #f1f5f9; -} - -/* Dark mode for any remaining light backgrounds */ -.dark .bg-gray-50 { - background-color: #1e293b; -} - -.dark .bg-gray-100 { - background-color: #334155; -} - -.dark .bg-gray-200 { - background-color: #475569; -} - -/* Dark mode for input placeholders */ -.dark input::placeholder { - color: #94a3b8 ; -} - -.dark textarea::placeholder { - color: #94a3b8 ; -} - -/* Dark mode for any white text that should be dark in light mode but light in dark mode */ -.dark .text-white { - color: #f1f5f9; -} - -/* Ensure dataframe component inherits dark theme properly */ -.dark [data-testid="dataframe"] { - background-color: #1e293b; - color: #f1f5f9; -} - -/* Dark mode for any remaining border colors */ -.dark .border-gray-200 { - border-color: #475569; -} - -.dark .border-gray-300 { - border-color: #64748b ; -} - -/* Dark mode for button text that might not be covered */ -.dark button { - color: inherit ; -} - -/* Dark mode for links */ -.dark a { - color: #60a5fa ; -} - -.dark a:hover { - color: #93c5fd ; -} - -/* Force dark mode on all text elements that might be using default colors */ -.dark * { - border-color: #475569; -} - -/* Specific overrides for components that might not inherit properly */ -.dark .text-current { - color: #f1f5f9; -} - -/* Dark mode for any remaining light text colors */ -.dark .text-black { - color: #f1f5f9; -} - -/* Dark mode for the dataframe component wrapper */ -.dark div[class*="dataframe"] { - background-color: #1e293b; - color: #f1f5f9; -} - -/* Dark mode for any input elements */ -.dark input { - background-color: #1e293b; - color: #f1f5f9; - border-color: #475569; -} - -/* Dark mode for checkboxes and form controls */ -.dark input[type="checkbox"] { - background-color: #374151 ; - border-color: #6b7280 ; -} - -.dark input[type="checkbox"]:checked { - background-color: #60a5fa ; - border-color: #60a5fa ; -} - -/* Page titles */ -.page-title { - @apply text-lg md:text-xl lg:text-2xl font-bold text-[#2e3438] mb-3 md:mb-4 tracking-tight; -} - -/* Section titles */ -.section-title { - @apply text-lg font-bold text-[#2e3438] mb-4; -} - -/* Subsection titles */ -.subsection-title { - @apply text-base font-bold text-[#2e3438] mb-2; -} - -/* Content cards */ -.content-card { - @apply bg-white rounded-xl md:rounded-2xl shadow-lg border border-[#e0e0e0] p-4 sm:p-6 md:p-6 lg:p-8 xl:p-12; -} - -/* Navigation buttons */ -.nav-button { - @apply flex items-center py-1 px-2 text-xs mb-1 font-medium transition-all duration-200 rounded-sm; -} - -.nav-button-active { - @apply border-[#F87701] bg-[#fef7f0]; -} - -.nav-button-inactive { - @apply text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]; -} - -.example-card { - @apply flex items-center py-1 px-2 text-xs font-medium transition-all duration-200 rounded-sm; -} - -/* Example card containers */ -.example-card-active { - @apply border-[#F87701] bg-[#fef7f0]; -} - -.example-card-inactive { - @apply border-[#e2e8f0] bg-white; -} - -/* Example card icons */ -.example-icon { - @apply w-6 h-6 rounded-lg flex items-center justify-center mr-2 transition-colors duration-200; -} - -.example-icon-active { - @apply bg-[#F87701] text-white; -} - -.example-icon-inactive { - @apply bg-[#f1f5f9] text-[#64748b]; -} - -/* Text styles */ -.description-text { - @apply text-sm md:text-base lg:text-lg text-[#73828c] leading-relaxed font-medium; -} - -.feature-text { - @apply text-sm text-[#64748b] leading-relaxed font-medium; -} - -/* Event sections */ -.event-section { - @apply border border-[#e2e8f0] rounded-xl p-8 bg-gradient-to-r from-[#f8fafc] to-white; -} - -/* Main layout containers */ -.main-container { - @apply max-w-full md:max-w-3xl lg:max-w-5xl xl:max-w-6xl mx-auto ; -} - -.page-wrapper { - @apply flex-1 bg-[#f6f9fc] p-4 sm:p-6 md:p-6 lg:p-8 xl:p-12 overflow-auto; -} - -/* Dark mode overrides for new classes */ -.dark .page-title, -.dark .section-title, -.dark .subsection-title { - color: #f1f5f9; -} - -.dark .content-card { - background-color: #1e293b; - border-color: #475569; -} - -.dark .nav-button-active { - background-color: #1e3a8a; -} - -.dark .nav-button-inactive { - color: #cbd5e1; -} + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; -.dark .nav-button-inactive:hover { - color: #f1f5f9; - background-color: #334155; -} - -.dark .example-card-active { - background-color: #1e3a8a; -} - -.dark .example-card-inactive { - background-color: #1e293b ; -} - -.dark .example-card-inactive:hover { - background-color: #334155; -} - -.dark .example-icon-active { - background-color: #60a5fa; -} + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; -.dark .description-text, -.dark .feature-text { - color: #cbd5e1; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.dark .event-section { - background: linear-gradient(to right, #1e293b, #0f172a); - border-color: #475569; -} - -div[role*="slider"] { - border-top: 1px solid #d1d5db; +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; } -/* Resizable controls panel styling */ -.drag-handle { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; +a:hover { + color: #535bf2; } -.drag-handle:hover { - background-color: #f9fafb; +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; } -.drag-handle.dragging { - background-color: #f3f4f6; - cursor: ns-resize; +h1 { + font-size: 3.2em; + line-height: 1.1; } -/* Dark mode for drag handle */ -.dark .drag-handle:hover { - background-color: #374151; +.card { + padding: 2em; } -.dark .drag-handle.dragging { - background-color: #4b5563; +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; } -/* Prevent text selection during drag */ -body.dragging { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - cursor: ns-resize; +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } } diff --git a/src/lib/ConfigPanel.svelte b/src/lib/ConfigPanel.svelte deleted file mode 100644 index ad24fb4836ab680e9a6b9739968302893ff1c2bf..0000000000000000000000000000000000000000 --- a/src/lib/ConfigPanel.svelte +++ /dev/null @@ -1,342 +0,0 @@ - - - -
-
-
diff --git a/src/lib/SyntaxHighlighter.svelte b/src/lib/SyntaxHighlighter.svelte
deleted file mode 100644
index 03bdccf84c1e25ca0554088baf89cf363e801831..0000000000000000000000000000000000000000
--- a/src/lib/SyntaxHighlighter.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
-
-
-
-
-
- Controls
-
-
-
-
-
-
- {#if activeControlsTab === "properties"}
-
-
-
-
-
-
-
- {:else if activeControlsTab === "actions"}
-
-
-
-
-
- Display
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Options
- -
-
-
-
-
-
-
-
-
- Configure search functionality
-
-
-
-
- Numbers
- -
-
-
-
-
-
-
-
-
-
- px
-
- Height constraint for the table (200-1000px)
-
-
-
-
- Maximum characters per cell (leave empty for no limit)
-
-
- Text
- -
-
-
-
-
-
-
-
-
- Display label shown above the dataframe
-
-
-
-
- {/if}
-
-
-
-
-
-
-
- Data Manipulation
-Add new rows and columns to the dataframe
- -
-
-
-
-
-
-
- Export Options
-Export your data in different formats
- -
-
-
-
-
-
-
- Export Options
-Export your data in different formats
- -
-
-
-
-
-
-
-
- Reset Actions
- -
-
-
-
diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg
deleted file mode 100644
index cc5dc66a3a524f4167cc097452cbe3c3883a684c..0000000000000000000000000000000000000000
--- a/src/lib/assets/favicon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 856f2b6c38aec1085db88189bcf492dbb49a1c45..0000000000000000000000000000000000000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/lib/sampleData.ts b/src/lib/sampleData.ts
deleted file mode 100644
index 90c3e70f9d4f8b7e79a20dd51d1edf8099083818..0000000000000000000000000000000000000000
--- a/src/lib/sampleData.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-export const sampleDatasets = {
- basic: {
- data: [
- ["Alice Johnson", 25, "true", "2023-01-15"],
- ["Bob Smith", 30, "false", "2023-02-20"],
- ["Charlie Brown", 35, "true", "2023-03-10"],
- ["Diana Prince", 28, "false", "2023-04-05"],
- ["Eve Wilson", 32, "true", "2023-05-12"],
- ],
- headers: ["Name", "Age", "Active", "Date"],
- datatypes: ["str", "number", "bool", "date"],
- config: {
- editable: true,
- show_row_numbers: true,
- show_search: "search",
- show_copy_button: true,
- show_fullscreen_button: true,
- max_height: 400,
- label: "Employee Database",
- show_label: true,
- line_breaks: true,
- wrap: false,
- },
- },
- compact: {
- data: [
- ["AAPL", 150.25, 2.34, "📈"],
- ["GOOGL", 2845.67, -15.23, "📉"],
- ["MSFT", 412.89, 8.91, "📈"],
- ["TSLA", 238.45, -4.12, "📉"],
- ["AMZN", 3456.78, 12.34, "📈"],
- ["META", 487.23, -2.87, "📉"],
- ["NVDA", 875.23, 45.67, "📈"],
- ["NFLX", 425.18, -8.92, "📉"],
- ],
- headers: ["Symbol", "Price", "Change", "Trend"],
- datatypes: ["str", "number", "number", "str"],
- config: {
- editable: false,
- show_row_numbers: false,
- show_search: "none",
- show_copy_button: false,
- show_fullscreen_button: false,
- max_height: 200,
- label: "",
- show_label: false,
- line_breaks: false,
- wrap: false,
- },
- },
- filterable: {
- data: [
- ["John Doe", "Engineering", "Senior", 95000, "true"],
- ["Jane Smith", "Marketing", "Manager", 75000, "true"],
- ["Mike Johnson", "Sales", "Junior", 45000, "false"],
- ["Sarah Wilson", "Engineering", "Lead", 120000, "true"],
- ["David Brown", "HR", "Specialist", 55000, "true"],
- ["Emily Davis", "Finance", "Analyst", 65000, "false"],
- ["Tom Anderson", "Engineering", "Junior", 70000, "true"],
- ["Lisa Garcia", "Marketing", "Senior", 85000, "false"],
- ["James Miller", "Sales", "Manager", 90000, "true"],
- ["Maria Rodriguez", "Finance", "Senior", 95000, "true"],
- ],
- headers: ["Name", "Department", "Level", "Salary", "Remote"],
- datatypes: ["str", "str", "str", "number", "bool"],
- config: {
- editable: true,
- show_row_numbers: true,
- show_search: "filter",
- show_copy_button: true,
- show_fullscreen_button: true,
- max_height: 350,
- label: "Employee Directory with Filters",
- show_label: true,
- line_breaks: true,
- wrap: false,
- },
- },
- readonly: {
- data: [
- ["Q1 2023", "Revenue", 125000, "15% increase from Q4"],
- ["Q1 2023", "Expenses", 85000, "5% decrease from Q4"],
- ["Q1 2023", "Profit", 40000, "35% increase from Q4"],
- ["Q2 2023", "Revenue", 145000, "16% increase from Q1"],
- ["Q2 2023", "Expenses", 90000, "6% increase from Q1"],
- ["Q2 2023", "Profit", 55000, "37% increase from Q1"],
- ],
- headers: ["Period", "Category", "Amount", "Change"],
- datatypes: ["str", "str", "number", "str"],
- config: {
- editable: false,
- show_row_numbers: true,
- show_search: "search",
- show_copy_button: true,
- show_fullscreen_button: true,
- max_height: 300,
- label: "Financial Report (Read-Only)",
- show_label: true,
- line_breaks: true,
- wrap: true,
- },
- },
- wrapped: {
- data: [
- [
- "Bug Fix",
- "Fixed critical issue with user authentication that was causing login failures for users with special characters in their email addresses",
- "High",
- "Completed",
- ],
- [
- "Feature",
- "Implemented new dashboard analytics with real-time data visualization including charts, graphs, and interactive elements",
- "Medium",
- "In Progress",
- ],
- [
- "Enhancement",
- "Optimized database queries to improve application performance and reduce load times across all user-facing pages",
- "Low",
- "Testing",
- ],
- [
- "Bug Fix",
- "Resolved mobile responsiveness issues on the checkout page that were affecting user experience on smaller screens",
- "High",
- "Completed",
- ],
- ],
- headers: ["Type", "Description", "Priority", "Status"],
- datatypes: ["str", "str", "str", "str"],
- config: {
- editable: true,
- show_row_numbers: true,
- show_search: "search",
- show_copy_button: true,
- show_fullscreen_button: true,
- max_height: 400,
- label: "Task Management with Text Wrapping",
- show_label: true,
- line_breaks: true,
- wrap: true,
- max_chars: 100,
- },
- },
- large: {
- data: Array.from({ length: 50 }, (_, i) => [
- `User ${i + 1}`,
- `user${i + 1}@example.com`,
- Math.floor(Math.random() * 50) + 18,
- Math.random() > 0.5 ? "true" : "false",
- new Date(
- 2023,
- Math.floor(Math.random() * 12),
- Math.floor(Math.random() * 28) + 1
- )
- .toISOString()
- .split("T")[0],
- (Math.random() * 100000).toFixed(2),
- Math.floor(Math.random() * 5) + 1,
- ]),
- headers: [
- "Name",
- "Email",
- "Age",
- "Active",
- "Join Date",
- "Revenue",
- "Rating",
- ],
- datatypes: ["str", "str", "number", "bool", "date", "number", "number"],
- config: {
- editable: true,
- show_row_numbers: true,
- show_search: "filter",
- show_copy_button: true,
- show_fullscreen_button: true,
- max_height: 500,
- label: "Large Dataset (50 rows)",
- show_label: true,
- line_breaks: true,
- wrap: false,
- },
- },
- mixed: {
- data: [
- [
- "**Product A**",
- 99.99,
- "Available",
- "https://example.com",
- "✓ In Stock",
- ],
- [
- "*Product B*",
- 149.99,
- "Out of Stock",
- "https://example.com",
- "✗ Unavailable",
- ],
- [
- "Product C",
- 79.99,
- "Limited",
- "https://example.com",
- "⚠ Few Left",
- ],
- [
- "~~Product D~~",
- 199.99,
- "Discontinued",
- "https://example.com",
- "- Discontinued",
- ],
- ],
- headers: ["Product", "Price", "Status", "URL", "Availability"],
- datatypes: ["markdown", "number", "str", "str", "html"],
- config: {
- editable: true,
- show_row_numbers: false,
- show_search: "search",
- show_copy_button: true,
- show_fullscreen_button: true,
- max_height: 300,
- label: "Rich Content (HTML & Markdown)",
- show_label: true,
- line_breaks: true,
- wrap: false,
- },
- },
- minimal: {
- data: [
- ["Task 1", "Complete"],
- ["Task 2", "Pending"],
- ["Task 3", "In Progress"],
- ["Task 4", "Complete"],
- ],
- headers: ["Task", "Status"],
- datatypes: ["str", "str"],
- config: {
- editable: true,
- show_row_numbers: false,
- show_search: "none",
- show_copy_button: false,
- show_fullscreen_button: false,
- max_height: 200,
- label: "",
- show_label: false,
- line_breaks: false,
- wrap: false,
- },
- },
-};
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 03114c641f61ddf8501c4356600f8892a5d078ec..0000000000000000000000000000000000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
- content: ["./src/**/*.{html,js,svelte,ts}"],
- theme: {
- extend: {},
- },
- plugins: [],
-};
diff --git a/vite.config.ts b/vite.config.ts
index f9b2bdc178259d4b39745f0045307fbde913358f..d32eba1d63fd99b6a1751597fb072c9aca185dfd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,21 +1,7 @@
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vite.dev/config/
export default defineConfig({
plugins: [svelte()],
- base: "/",
- publicDir: "public",
- build: {
- outDir: "dist",
- assetsDir: "assets",
- sourcemap: false,
- minify: "esbuild",
- copyPublicDir: true,
- rollupOptions: {
- output: {
- manualChunks: undefined,
- },
- },
- },
-});
+})
{@html highlightedCode}