SvGrid Documentation
362 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.
Components in the same package
Standalone components that ship with the grid. Most double as cell editors.
- 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
- Starters & scaffolding
- SvGrid with SvelteKit
Help
- Accessibility
- Build an AI agent that drives the grid
- AI Smart Paste
- AI Toolkit
- AI assistant
- Alerts - Enterprise
- API stability & semver policy
- Architecture overview
- Performance benchmarks
- Browser & runtime support
- Integrated charts
- Real-time collaboration
- Columns hierarchy & manager
- Comparison: SvGrid vs AG Grid vs TanStack Table
- Conditional form schema
- Error reference
- Data export and printing
- Expression query language - Enterprise
- Glossary
- Grouping & aggregation
- Internationalisation & RTL
- Icons
- Data import - Enterprise
- 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
- Pivot tables - Enterprise
- Production deployment
- Real-time / streaming updates
- Recipes / Cookbook
- Saved views & layout persistence
- Scheduling: automate exports and reminders
- Security & supply chain
- Server-side data
- shadcn-svelte integration
- Agent Skill
- Spreadsheet formulas
- State maintenance
- Status bar
- Tailwind integration
- Testing & Quality
- Testing your grid
- Design tokens
- Troubleshooting
- Doc versioning
- Web Components & Custom Elements
Cells
- Cell components
- Cell data types
- Cell text selection
- Conditional formatting
- Expressions
- Getting values
- Highlighting changes
- Rich text and Markdown cells
- Sparklines
- Styling cells
- Text formatting
- Tooltips
- View refresh
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
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
Rows
- Accessing rows
- Full-width rows
- Kanban board mode
- Master / detail (nested grids)
- Row data
- Row dragging
- Row height
- Row pagination
- Row pinning (top / bottom)
- Row sorting
- Row spanning
- Scheduler / calendar mode
- Bulk-action bar
- Styling rows
- Transactions
- Tree data
- Tree rows (expand / collapse)
Server data
- Server editing
- Server filtering
- Server grouping
- Server paging
- Server-Side Row Model (SSRM)
- Server sorting
- Server tree data (load on demand)
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
- 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-grid>` reference
- TypeScript with the custom element
- SvGrid in Vue
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.