Build it in Svelte. Start from one grid.
A Kanban board, a scheduler and a pivot table are the same <SvGrid> drawn a different way. A tree grid or a spreadsheet is the grid with a few props set. 17 pages, each with the line that turns it on, a live demo and the documentation.
Views of the grid
Not separate widgets. The rows you pass to a table become the cards on a board or the events on a calendar; change the prop and the same data redraws.
- Svelte Kanban Board (Enterprise) - Build a Svelte 5 Kanban board from the rows you already have: one board prop, lanes bucketed by a status field, drag-and-drop, WIP limits and rich cards.
board={{ groupBy: 'status' }} - Svelte Scheduler and Calendar (Enterprise) - A Svelte 5 scheduler from one prop: rows become events across Month, Week, Day and Agenda views, with drag to reschedule and a resource timeline.
scheduler={{ startField: 'start', endField: 'end' }} - Svelte Pivot Table (Enterprise) - Summarize flat rows into a Svelte 5 pivot table: row and column dimensions, value aggregations, multi-level headers and a drag-and-drop designer.
createPivotModel(orders, { rows, cols, values })
The grid, configured
The table itself, set up for one job, in the free @svgrid/grid package unless marked Enterprise.
- Svelte Spreadsheet - Turn a Svelte 5 data grid into a spreadsheet: column-letter headers, a formula bar, cell ranges, a fill handle, freeze panes and a real formula engine.
selectionMode="cell" enableCellSelection showRowNumbers - Svelte Gantt Chart - A Gantt-style project plan in a Svelte 5 data grid: task bars positioned by start and end date in one wide cell, with phase colour and progress fill.
cell: (ctx) => renderSnippet(TimelineCell, …) - Svelte Tree Grid - Render hierarchical rows in a Svelte 5 data grid: pass a parentField and the grid nests, indents, expands and collapses, with lazy loading on expand.
treeData={{ parentField: 'managerId' }} - Svelte Data Table - A sortable, filterable, paginated data table in Svelte 5: pass data and columns, register the features you want, and render. Free and MIT-licensed.
filterMode="row" showPagination pageSize={50} - Svelte Editable Table - Inline editing in a Svelte 5 table: give a column an editorType and it becomes editable, with validation, full-row edits, a fill handle and undo.
enableInlineEditing onCellValueChange={save} - Svelte Server-Side Table - Keep the data on the server: a Svelte 5 grid that round-trips sorting, filtering and paging to your endpoint, with keyset paging and infinite scroll.
createServerDataSource(source, { pageSize: 50 }) - Svelte Admin Dashboard - Build an admin dashboard in Svelte 5: a data grid at the centre, stat tiles and charts around it. Scaffold the whole project with one create command.
npm create @svgrid@latest -- --template admin-dashboard - Svelte Headless Table - A headless table engine for Svelte 5: sorting, filtering, grouping, selection and virtualization as reactive state, rendered with your own markup. MIT.
createSvGrid({ data, columns, … }) - Svelte Trading Grid - A trading blotter in Svelte 5: 100,000 instruments stay sorted by the column that ticks, updates batched per frame into one transaction, cell flash per move.
api.applyTransaction({ update })
Components in the same package
They started as the grid's cell editors and menus. Import them on their own for forms, dialogs and settings pages.
- Svelte Component Library - A Svelte 5 component library in @svgrid/grid: inputs, pickers, overlays, forms and layout, MIT. Each one also edits grid cells, so forms and tables match.
import { SvTextInput, SvButton } from '@svgrid/grid' - Svelte Date Picker - A Svelte 5 date picker with no extra dependency: a calendar, a date-time picker with a clock, and a range input. Standalone or as a grid cell editor.
<SvCalendar selectionMode="range" /> - Svelte Command Palette - A Cmd+K command palette for Svelte 5: fuzzy search, groups, shortcuts, arrow-key navigation and a global hotkey. Free, MIT and dependency-free.
<SvCommand {commands} onRun={run} /> - Svelte Dock Layout - An IDE-style docking workspace in Svelte 5: drag tabs between panes to split or stack, resize with splitters, pop panes out, and serialize the layout.
<SvDockLayout bind:layout> - Svelte Rich Text Editor - A lightweight Svelte 5 WYSIWYG editor: bold, headings, lists, quotes, code blocks and links, emitting HTML through bind:value with a custom toolbar.
<SvRichText bind:value={html} />