SvGrid Documentation
406 topic pages for the Svelte 5 data grid: getting started, columns, rows, cells, filtering, editing, and more.
Views of the grid
Not separate components. Same grid, same data, same columns - one prop redraws the rows.
- Svelte Kanban Board - Lanes from a status field, drag and drop.
- Svelte Scheduler and Calendar - Events on a calendar or a resource timeline.
- Svelte Pivot Table - Crosstab your rows, with a drag-and-drop designer.
Built with the grid
The grid itself, configured for a job.
- Svelte Spreadsheet - Cell ranges, a fill handle, real formulas.
- Svelte Gantt Chart - Task bars in one wide custom cell.
- Svelte Tree Grid - Nested rows from a parent id.
- Svelte Data Table - Sort, filter, paginate. The grid as it comes.
- Svelte Editable Table - Typed cell editors, validation and undo.
- Svelte Server-Side Table - Sorting, filtering and paging on your endpoint.
- Svelte Admin Dashboard - Grid, stat tiles and charts on one screen.
- Svelte Headless Table - The engine alone: your markup, your classes, your tokens.
- Svelte Trading Grid - A blotter that stays sorted while the feed ticks.
Components in the same package
Standalone components that ship with the grid. Most double as cell editors.
- Svelte Component Library - Inputs, pickers, overlays and forms, free.
- Svelte Date Picker - Calendar, range and date-time, no dependency.
- Svelte Command Palette - Fuzzy search over your actions, on Cmd+K.
- Svelte Dock Layout - Draggable, resizable, serializable panels.
- Svelte Rich Text Editor - A small WYSIWYG that emits HTML.
Overview
Compliance
- Audit log integration
- GDPR + data residency
- HIPAA posture
- SOC 2 posture
- Accessibility Conformance Report (VPAT 2.5Rev, INT)
Enterprise tier
- Enterprise evaluation
- Enterprise getting started: a complete example
- Enterprise licensing
- Enterprise support
Studio
- Access control (RBAC)
- Accessibility
- AI generation
- Studio API reference
- Visual app designer
- Audit trail
- Auth & secured screens
- Computed fields & hooks
- The Studio CLI
- Code behind (Code view)
- Code generation
- Concepts
- Dashboards
- Data binding
- Databases
- Deploying a Studio app
- Schema designer (embeddable)
- Docking layout
- Drizzle schema
- Edit forms & validation
- Getting started
- Localization (i18n)
- In-memory
- Launch the designer (CLI)
- Local database (no setup)
- Master-detail
- Navigation & row actions
- OData & GraphQL
- Tutorial: a Postgres CRUD grid
- Prisma schema
- Real-time (Supabase)
- Relations & master-detail
- REST & custom APIs
- Tutorial: a REST CRUD grid
- Sample apps + bind your data
- Scheduler / calendar view
- The EntitySchema
- Sorting, filtering & paging
- Tutorial: a Supabase CRUD grid
- The Northwind sample on Supabase
- Supabase
- Testing a Studio app
- Themes & styling
- Troubleshooting & FAQ
- Tutorial: build a CRM
- SvGrid Studio
Getting started
- 1. Install
- 2. First grid in 60 seconds
- 3. Data and columns
- 4. Features
- 5. Theme and density
- 6. Going to production
- Learn SvGrid: the video course
- Starters & scaffolding
- SvGrid with SvelteKit
Help
- Accessibility
- Build an AI agent that drives the grid
- AI Smart Paste
- AI Toolkit
- AI assistant
- API stability & semver policy
- Architecture overview
- Performance benchmarks
- Browser & runtime support
- Bundle size
- Integrated charts
- Real-time collaboration
- Columns hierarchy & manager
- Comparison: SvGrid vs AG Grid vs TanStack Table
- Conditional form schema
- Error reference
- Expression query language - Enterprise
- Figma design kit
- Glossary
- Grouping & aggregation
- Internationalisation & RTL
- Icons
- Use sv-grid docs as LLM context
- MCP server
- Migrating from AG Grid to SvGrid
- Migrating from DevExtreme DataGrid (DevExpress)
- Migrating from Glide Data Grid
- Migrating from Grid.js
- Migrating from Handsontable
- Migrating from jqxGrid (jQWidgets)
- Migrating from Kendo UI Grid (Telerik)
- Migrating from MUI X DataGrid
- Migrating from PrimeVue / PrimeNG / PrimeReact DataTable
- Migrating from React Data Grid (adazzle)
- Migrating from the shadcn-svelte data table
- Migrating from Smart.Grid (Smart Web Components)
- Migrating from SVAR Svelte DataGrid
- Migrating from svelte-headless-table
- Migrating from Syncfusion Grid
- Migrating from Tabulator
- Migrating from TanStack Table
- Migrating from a UI-kit table (Flowbite / Skeleton / shadcn-svelte)
- Migrating from @vincjo/datatables
- Missing features
- Mobile card view
- Observability
- Production deployment
- Real-time / streaming updates
- Recipes / Cookbook
- Saved views & layout persistence
- Security & supply chain
- Server-side data
- shadcn-svelte integration
- Agent Skill
- State maintenance
- Status bar
- Upgrading a Svelte 4 table to Svelte 5: what breaks, what does not, and the three ways out
- Tailwind integration
- Testing & Quality
- Testing your grid
- Design tokens
- Troubleshooting
- Doc versioning
- Web Components & Custom Elements
Alerts & scheduling
Cells
- Cell components
- Cell data types
- Cell text selection
- Conditional formatting
- Expressions
- Getting values
- Highlighting changes
- Excel keyboard shortcuts
- Number formats and cell styles
- Paste Special, Find and Replace, and structural edits
- Rich text and Markdown cells
- Sparklines
- Styling cells
- Text formatting
- Tooltips
- View refresh
Spreadsheet
- The spreadsheet shell
- Tables and structured references
- Workbooks: several sheets that read each other
- Charts, sparklines and pictures
- Data tools: filter, sort, clean up, solve, pivot
- Files: save, restore, autosave and Excel
- Formatting: numbers, styles, merged headers and rules
- Formulas: from =SUM to LAMBDA
- Review and share: comments, protection, two people
- Spreadsheet: getting started
- Data validation: lists, bounds and messages
- Spreadsheet formulas
- `<sv-sheet>`: the spreadsheet as a custom element
Charts
- Chart accessibility and localization
- Chart API reference
- Axes, scales and styling
- Financial charts
- Charting from the grid
- Chart gallery
- Interaction: tooltips, zoom, sync, selection
- Charts: getting started
- Chart types
Columns
- Aligned grids
- Column definitions
- Column groups
- Column headers - styling & height
- Column menu
- Column moving (drag to reorder)
- Column pinning
- Column sizing
- Column & row spanning (merged cells)
- Column state
- Custom header components
- Tool panel (Columns + Filters)
- Updating column definitions
Editing
- Edit components
- Full-row editing
- Drag a range to move or copy it
- Editing - overview
- Parsing values
- Provided cell editors
- Saving values
- Start / stop editing
- Undo / redo
- Validation
Import & export
- Import: a spreadsheet into the grid
- Export: a report to Excel and PDF
- Data export and printing
- Data import - Enterprise
Filtering
- Advanced filter
- Applying filters
- Custom column filters
- Date filter
- Filter API
- Filter conditions
- Floating filters
- Number filter
- Filtering - overview
- Set filter
- Text filter
Grouping
Headless
- Build a table from scratch
- Controlled state
- Headless overview
- Row models
- Server-side data (load on demand)
- Styling a headless table
- Headless virtualization
Kanban
Pivot grid
Rows
- Accessing rows
- Full-width rows
- Gantt chart mode
- Master / detail (nested grids)
- Row data
- Row dragging
- Row height
- Row pagination
- Row pinning (top / bottom)
- Row sorting
- Row spanning
- Bulk-action bar
- Styling rows
- Transactions
- Tree data
- Tree rows (expand / collapse)
Scheduler
Server data
- Server-Side Row Model: a walkthrough
- Server editing
- Server filtering
- Server grouping - Enterprise
- Server-side infinite scroll
- Server paging
- Server pivot - Enterprise
- Server-Side Row Model (SSRM)
- Server selection - Enterprise
- Server sorting
- Server transactions - Enterprise
- Server tree data (load on demand) - Enterprise
- Worker data source - Enterprise
State & views
UI components
- Buttons & toggles
- Add components with the CLI
- Date & time
- Feedback & display
- Headless editors
- Internationalization & RTL
- SvGrid UI
- Inputs
- Layout & composite
- Navigation
- Overlays
- Range & feedback
- Selection
- SvAccordion
- SvAlert
- SvAutoComplete
- SvAvatarGroup
- SvAvatar
- SvBadge
- SvBreadcrumb
- SvButtonGroup
- SvButton
- SvCalendar
- SvCard
- SvCarousel
- SvChartPanes
- SvCheckBox
- SvChip
- SvCircularProgress
- SvCollapsible
- SvColorInput
- SvComboBox
- SvCommand
- SvContextMenu
- SvCountryInput
- SvDateRangeInput
- SvDateTimePicker
- Display primitives - SvKbd, SvCode, SvAspectRatio, SvVisuallyHidden
- SvDivider
- SvDockLayout
- SvDockManager
- SvDrawer
- SvDropDownList
- SvDurationInput
- SvEmptyState
- SvField
- SvFileUpload
- SvForm
- SvGauge
- SvGridChart
- SvGridDropdown
- SvGridSelect
- SvHoverCard
- Layout primitives - SvStack, SvGroup, SvSimpleGrid
- SvListBox
- SvLoadingOverlay
- SvMaskedInput
- SvMenuList
- SvMenu
- SvMenubar
- SvModal
- SvMultiSelect
- SvNavPane
- SvNumberInput
- SvOtpInput
- SvPagination
- SvPasswordInput
- SvPhoneInput
- SvPopconfirm
- SvPopover
- SvProgress
- SvRadioGroup
- SvRating
- SvRepeatButton
- SvResult
- SvRichText
- SvScrollArea
- SvSegmented
- SvSkeleton
- SvSlider
- SvSparkline
- SvSpinner
- SvSplitter
- SvStat
- SvStepper
- SvSwitchButton
- SvTabs
- SvTagsInput
- SvTextArea
- SvTextInput
- SvTimePicker
- SvTimeline
- SvToaster
- SvToggleButton
- SvTooltip
- SvTour
- SvTreeSelect
- SvTree
- Typography - SvTitle, SvText, SvAnchor, SvBlockquote, SvMark, SvList
Docs
- SvGrid in Angular
- Enterprise features from the element
- SvGrid with React, Vue or Angular
- Limitations of the custom element
- Quick start: the grid in any page
- SvGrid in React
- Shadow DOM: `<sv-grid-shadow>`
- `<sv-chart>` reference
- `<sv-grid>` reference
- TypeScript with the custom element
- SvGrid in Vue
Legal
Recipes
- Auto-save edits with debounce
- Barcode cells in a Svelte data grid (EAN-13)
- Benchmark harness
- Between-operator filters for date ranges
- Build your own feature plugin
- Bulk-edit selected rows
- Cell renderer patterns
- Chart.js sync from grid filter state
- Conditional row coloring
- Cursor-based infinite scroll
- Custom filter functions
- Dependent dropdowns (cascading editors)
- Drag-drop columns to reorder
- External search box with highlighted matches
- Form library bridge
- Grid state inspector
- Heatmap-tinted numeric cells
- Kanban board over the same `$state`
- Lazy-load expand on demand
- Loading data from REST + GraphQL
- 1 million rows with virtualization
- Mobile card view with grid-on-desktop
- Multi-sheet xlsx export
- NL filter wired to your LLM
- Persist column layout to URL
- Pin first column on horizontal scroll
- Profiling with a live FPS HUD
- Role-based editable columns
- Saved filter sets
- Saved views (localStorage)
- Server-side filter with TanStack Query
- Smart paste: CSV / TSV / free-form → typed rows
- Sparkline cell renderer
- Submit-time validation with error summary
- Choosing a grid testing strategy
- Theme-matched xlsx export
- Theme tokens for Ant / MUI / Fluent / shadcn
- Two-grid master / detail
- Undo / redo for grid edits
- WebSocket streaming with backpressure
The parts the grid is built from
The editor a cell opens, the popup a filter drops, the menu behind a right-click. The grid uses these components, and every one of them is exported so you can use it on its own.
Cell editors
What a cell opens when you start editing.
- Combobox
- Dropdown list
- Multi-select
- Autocomplete
- Number input
- Password input
- Checkbox
- Switch
- Radio group
- Slider
- Rating
- File upload
Popups the grid raises
The overlay layer under filter popups, the row detail dialog and every confirm step.
Menus and actions
The column menu, the right-click menu, and the buttons on the toolbar above them.
Drawn inside a cell
Small enough to render per row.
Around the grid
The screen the grid sits on: paging, panels, navigation and the form next to it.