fastgrid-svelte is the official Svelte wrapper for FastGrid and FastSheet by COQsoft.
Use it to add an editable Svelte data grid, tree grid or browser spreadsheet to an existing Svelte or SvelteKit application.
FastGrid is designed for large datasets, virtual scrolling, sorting, filtering, grouping, pivoting, XLSX/CSV import and export, formulas and optional AI-assisted operations.

Start here

Use npm install fastgrid-svelte when adding FastGrid to an existing Svelte application or use npm create fastgrid-svelte when you want a ready-to-run example Svelte project.

Add FastGrid to an existing Svelte app

Install the FastGrid library: npm install fastgrid-svelte@latest

Import the component and render it. This is the shortest working example: <script> import { FastGrid } from "fastgrid-svelte"; const src = { Cols: ["Name", "Value"], Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }], Body: [ { V: { Name: "Alice", Value: 120 } }, { V: { Name: "Bob", Value: 85 } } ] }; </script> <FastGrid {src} style="height:500px;" />

Browser runtime: FastGrid renders in the browser. With SvelteKit SSR, keep the grid in a browser-only component or initialize it after the browser has mounted. See SSR and browser rendering.

Generate a complete example project

Use the project generator for quick-starts, tutorials, server examples, SQL database, PDF export, TypeScript examples, and complex demos: npm create fastgrid-svelte@latest my-fastgrid-app

Try the live examples

Open FastGrid live examples to test the grid and spreadsheet features before integrating them into your application.

Related resources

FastGrid Svelte library fastgrid-svelte on GitHub
FastGrid Svelte examples and project generator create-fastgrid-svelte on GitHub
FastGrid Svelte library fastgrid-svelte on npm
FastGrid Svelte examples and project generator create-fastgrid-svelte on npm
Report an issue

There are two package roles:

fastgrid-svelte is the library package for an existing Svelte or SvelteKit project.
create-fastgrid-svelte is the optional examples and project-generator package. It creates a new example project and is not required in an existing application.

Optional examples and project generator: create-fastgrid-svelte

Generate an example project

Generate a new FastGrid Svelte example project with npm create fastgrid-svelte@latest my-fastgrid-app The generator lets you choose which template to create:
1 - quick-start - basic example with one simple grid in Svelte.
2 - quick-start-typescript - the same basic example with one simple grid in Svelte using TypeScript instead of JavaScript.
3 - tutorials - package contains: - four basic and advanced tutorials of using FastGrid Svelte Data Grid and FastSheet Spreadsheet - four basic and advanced tutorials of using FastGrid Svelte Data Grid and FastSheet Spreadsheet with TypeScript - all the FastGrid Live Tutorials showing general FastGrid usage. 4 - examples - package contains: - six examples showing server communication and SQL database - four examples showing server communication and file storage - eight complex FastGrid and FastSheet live examples - sample Node.js server and PDF export scripts

FastGrid Svelte library: fastgrid-svelte

Installation

The FastGrid Svelte library can be added to your Svelte project with the following command npm install fastgrid-svelte@latest

Import

Import the FastGrid Svelte library into your .svelte file with import { FastGrid } from "fastgrid-svelte";

Usage

FastGrid can be created and displayed in a Svelte application as a tag <FastGrid src={sources} /> where sources is JavaScript object that defines grid layout and data, for example: <FastGrid src={ { Cols:["A","B","C"], Head:[ "Header" ], Body:[ { V:[1,2,3] }, { V:[4,5,6] }, { V:[7,8,9] } ] } } style="height:500px;" /> If needed, it is also possible to create FastGrid dynamically from script: const grid = FGrid.FastGrid(sources,tag); where tag is the HTMLElement or its id to create FastGrid in. See FastGrid.

API methods and events

Created FastGrid object can be accessed in Svelte by grid object bound to this by <FastGrid bind:this={grid} />.
All FastGrid API methods are accessible directly in bound object as grid.Method(). But the FastGrid API properties like Source, Tag or FRow are accessible as grid.getGrid().property.
FastGrid API events are exposed as Svelte props such as onSetValue, onReady and onClick.
FastGrid events names for Svelte use camelCase instead of lower case, so the event names for Svelte are onSetValue or onClick.
The full simple Svelte application using FastGrid API methods and events: <script> import { FastGrid } from "fastgrid-svelte"; // Required to use FastGrid library const src = { Cols:["A","B",{id:"C",Width:80}], Head:["Header"], Body:[ { V:[1,2,3] }, { V:{A:4,B:5,C:6} } ] }; // Full layout and data of very simple grid let grid = null; // Grid reference received for grid, access the grid object directly as grid function readValue() { alert("Read value from cell [1,A]: "+ grid?.Get(1,"A")); } // Function called from Read value sample button function changeValue(grid,row,col,val) { grid?.Set(row,col,"",val,1); } // Function called from Change value sample button function onSetValue(grid,row,col,value,changes){ if(changes) console.log("Value "+value+" set to cell ["+row.id+","+col.id+"]"); } // FastGrid OnSetValue API event handler assigned to <FastGrid onSetValue .../> function onClick(grid,row,col){ if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid.GetValue(row,col)); } // FastGrid OnClick API event handler assigned to <FastGrid onClick .../> function onReady(grid){ console.log("FastGrid "+grid.id+" is ready"); } // FastGrid OnReady API event handler assigned to <FastGrid onReady .../> </script>   <FastGrid id="Grid1" bind:this={grid} {src} {onSetValue} {onClick} {onReady} style="height:500px;"/> <button onclick={readValue}>Read value</button>  <button onclick={() => changeValue(grid, 1, 'A', 'XXX')}>Change value</button>  FastGrid has a comprehensive API for reading, controlling and dynamically manipulating any part of the grid and its data from a script.

Events and functions in FastGrid sources and calling Svelte functions from the outside code

API events can be defined also directly in FastGrid source object in Events tag.
Mouse, touch and key events like OnClick / OnDblClick / OnDrag / Onkey can be assigned for every FastGrid cell / toolbar cell, see Events.
Custom functions can be defined also directly in FastGrid source object in Script tag.
The custom function can be called from any code that knows grid object as Grid.Script.func1(...).
If the code does not know grid object and its reference is also not accessible, the grid object can always be obtained as FGrid.Grids[grid_id].
The Svelte functions can be called from any outside code that knows grid object as Grid.Component.func2(...), but the function must be passed to FastGrid library component as <FastGrid component={{func2}} .../>.
For example: <script> import { FastGrid } from "fastgrid-svelte"; // Required to use FastGrid library const src = { Events: { OnSetValue: (grid,row,col,val,changes) => { grid.Component.onSetValue(grid,row,col,val,changes) } }, // Defines OnSetValue API event handler that calls Svelte onSetValue function Script: { LogClick: (grid,row,col) => { if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid.GetValue(row,col)); } }, // Defines custom function LogClick that is called from Svelte function onClick Cols:["A", "B", { id:"C", Width:80, OnClick:"Grid.Component.readValue(Row,Col)" } ], // Defines columns. The C column has assigned mouse/touch event OnClick that calls Svelte function readValue Head:[ "Header" ], // Shows one standard header with column captions on top of the grid Body:[ { V:[1,2,3] }, { V:{A:4,B:5,C:6} } ] // Defines two rows with values. First row cell values are set by their VIndex (by default starting from 0). Second row cell values are set by column ids. }; let grid = null; // Grid reference received for grid, access the grid object directly as grid function readValue(row,col) { alert("Read value from cell ["+row.id+","+col.id+"]: "+ grid?.GetValue(row,col)); } // Function called from OnClick mouse/touch event handler assigned to column C function onSetValue(grid,row,col,value,changes){ if(changes) console.log("Value "+value+" set to cell ["+row.id+","+col.id+"]"); } // Function called from OnSetValue API event assigned in src.Events function onClick(grid,row,col){ grid.Script.LogClick(grid,row,col); } // FastGrid OnClick API event handler assigned to <FastGrid onClick .../>. Calls custom function LogClick defined in src.Script const component = { readValue, onSetValue }; // Object passed to <FastGrid component ... /> with exposed Svelte functions readValue and onSetValue to be accessible in FastGrid events and functions code </script> <FastGrid id="Grid1" bind:this={grid} {src} {onClick} {component} style="height:500px;"/>

Grid layout and data

Grid layout and data can be fully defined in the sources object passed to <FastGrid src .../> or to FGrid.FastGrid(src,tag).
The sources can be one object with full definition or array of objects with definitions for columns, rows, events, etc. Or it can contain url(s) to download JSON, CSV or XLSX data from. See FastGrid src.
Basically data rows are defined in Body, header and filter rows in Head, summary rows in Foot.
Columns are defined in LeftCols, Cols and RightCols.
Toolbars with buttons, custom inputs, group, pivot and AI controls in Top and Bottom.
It is possible to define more, less or different row, column and toolbar sections by RowParts and ColParts. See FastGrid Layout
Every row, column, cell, toolbar and toolbar cell can have predefined attributes inherited from default definitions such as DefRows, DefCols, DefCells, DefToolbars, DefTools. See FastGrid Defaults.
Cell values and attributes are defined usually in rows, values in V array and attributes in A array.
Cell types, formats and other attributes can be set per row, column or individual cell, see Cell types.
There are many other FastGrid settings and features described in this documentation, browse the documentation in the left index.
Example of advanced grid layout and data: <script> import { FastGrid } from "fastgrid-svelte"; // Required to use FastGrid library const srcLayout = { // Layout for grid (usually in static object or file) Cfg: { id:"Advanced_Grid", Style:"Blue", StyleIcons:"Lucide", Focused:"R1,C2" }, // Grid configuration sets theme, grid id for FastGrid API, and focuses given cell on start DefCols: { // Defines default columns with attributes that will be inherited by all or specific columns. See FastGrid Defaults. Col: { Width:80 }, // Col is special default inherited by all columns without D attribute. Sets width to all columns. RedText: { D:"Col", TextColor:"red" } // Sets red text to all columns with D:"RedText". Inherits Col default. It is possible to let default to inherit more other defaults. }, DefRows: { // Defines default rows with attributes that will be inherited by all or specific rows. See FastGrid Defaults. Row: { }, // Row is special default inherited by all rows without D attribute. Here is just empty Child: { TextStyle:2 } // Sets italic text to all rows with D:"Child". It is possible to let default to inherit more other defaults. }, LeftCols: [ // Defines columns in the left section. The column sections can be re-defined in ColParts. See FastGrid parts. { D:"Index" }, // Defines Index columns showing row indexes { D:"Panel", LeftIcons:"SelectRow,DeleteRow,AddRow" }, // Defines Panel column with specified row control buttons { id:"C1", Width:130 } // Simple String column definition. It shows tree lines and buttons as defined in Body { Tree:"C1" } ], Cols: [ // Defines columns in the main / middle section { id:"C2", Type:"Number", Format:",0.00" }, // Column with formatted number { id:"C3", Type:"Date", RightIcons:"Date", Width:120, Format:"yyyy-MM-dd" }, // Column with formatted date { id:"C4", List:"|Red|Green|Blue", LeftIcons:"List" }, // Column with simple enumeration list and popup button on the left { id:"C5", List: { 1:"One", 2:"Two", 3:"Three", 4:"Four", 5:"Five" }, Range:1, RightIcons:"List", Button:"List", Width:120 }, // Column with enumeration list with keys and more items in value (Range:1) and popup button on the right { id:"C6", Type:"Bool" } // Simple boolean / checkbox column definition. It should be filled by values 0 / 1, not true / false ], RightCols: [ // Defines columns in the right section. { id:"C7", D:"RedText", Width:50, Formula:"C6 ? C2 : 0" } // Text column with explicitly set width and inheriting red text from RedText default. Row can inherit only one default, but the default itself can inherit more other defaults. ], Head: [ // Defines rows in the top Head section. The row sections can be re-defined in RowParts. See FastGrid Defaults. { D:"Header", V: { C1:"Left", C2:"Number", C3:"Date", C4:"List", C5:"List + keys", C6:"Boolean", C7:"Right" } }, // Adds header to grid to top, defines the column captions { D:"Filter", A: { C3: { DefaultDate:"7/2/2026" }, C4: { RightIcons:"List" }, C5: { LeftIcons:"" }, C6: { LeftIcons:"" } } } // Filter row to filter by given columns and rows. In C4 moves the List icon from left to right and in C5 and C6 hides the filter icon as it is usually not needed for lists and bools. ], Foot: [ { id:"Footer", F: { C2:"sum(null,'Body',null,1)", C7:"sum(null,'Body',null,1)" }, A: { C2: { NoEdit:1 }, C3: { Type:"String", RightIcons:"" } } } ], // Row in grid footer. Calculates summary in column C2 and hides the date in C3 Top: [ "AI" ], // Shows toolbar AI on top Bottom: [ // Shows toolbars Data1 and Settings and custom toolbar with custom icon Custom1 bottom the grid { Cells: [{ id:"Custom1", IconHeight:17, Value:"Custom", OnClick:"alert('Clicked '+Col.id)", Tip:"Custom toolbar cell calls custom function", Icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+PHBhdGggc3Ryb2tlPSIjNjg5IiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0zLjUsM3Y2bTAsM3YybTUsLTExdjZtMCwzdjJtNSwtMTF2Nm0wLDN2MiIvPjwvc3ZnPg==" }] }, "Data1", "Settings" ], Body: { // Body as object defines body attributes (as array it defines rows). To use both definitions in one json, use any _postfix, e.g. { Body:[...], Body_Cfg: { ... } } Tree:"C1" // Shows row tree in column C1. } } const srcData = { // Data for grid (usually read from database or url) // Defines data rows in main Body section // L attribute defines row level in tree, 0 - means root. Row with higher L automatically belongs as a child to above row with lower L. See FastGrid row and column tree Body: [ { id:"R1", L:0, V:{ C1:"Row 1", C2:20.5, C3:"7/1/2026", C4:"Red", C5:2, C6:1 } }, // Root row with values in V, assigned to cells as column ids { id:"R1-1", L:1, D:"Child", Color:"lime", // Child row of R1, sets its background color to lime, inherits default row Child defining italic text style V: { C1:"Row 1:1", C2:123.456789, C3:"7/2/2026", C4:"Red", C5:"2;3", C6:0 }, A:{ C2: { Color:"aqua", TextStyle:1 } } // Sets cell attributes, background color to aqua and italic style in cell in column C2 }, { id:"R1-1-2", L:2, D:"Child", V:{ C1:"Row 1:1:1", C2:-12.3, C3:"7/7/2026", C4:"Red", C5:1, C6:1 } }, // Child row of R1-1, grand child row of R1 { id:"R1-2", L:1, D:"Child", Selected:1, V:{ C1:"Row 1:2", C2:5, C3:"7/3/2026", C4:"Red", C5:3, C6:1 } }, // Child row of R1. It is marked as selected on start { id:"R2", L:0, V:{ C1:"Row 2", C2:24.12, C3:"7/2/2026", C4:"Red", C5:"1;4;5", C6:0 }, RS: { C2:3 }, CS: { C2:2 } }, // Root row, spans cell C2 to three rows and two columns { id:"R3", L:0, V:{ C1:"Row 3", C2:-100, C3:"7/1/2026", C4:"Red", C5:"2;5", C6:0 } }, { id:"R4", L:1, V:{ C1:"Row 3:1", C2:23, C3:"6/29/2026", C4:"Red", C5:"3", C6:1 } }, // Child row of R3 ] } </script> <FastGrid src={[srcLayout,srcData]} style="height:500px;"/>

TypeScript

FastGrid comes with full TypeScript definitions for its API, see FastGrid.TypeScript.API.d.ts
There are basic types: TGrid for grid object, TRow for row object, TCol for column object, TToolbar for toolbar object and TTool for toolbar cell object.
Bound grid is of type FastGrid. API events can be defined without parameter types using TFGrid[event_name] function type definition.
The full simple Svelte application using FastGrid API methods and events in TypeScript: <script lang="ts"> import { FastGrid } from "fastgrid-svelte"; // Required to use FastGrid library const src = { Cols:["A","B",{id:"C",Width:80}], Head:["Header"], Body:[ { V:[1,2,3] }, { V:{A:4,B:5,C:6} } ] }; // Full layout and data of very simple grid let grid:FastGrid|null = null; // Grid reference received for grid, access the grid object directly as grid function readValue() : void { alert("Read value from cell [1,A]: "+ grid?.Get(1,"A")); } // Function called from Read value sample button function changeValue(grid:TGrid|null,row:TRow|string|number,col:TCol|string|number,val:any) : void { // Function called from Change value sample button grid?.Set(row,col,"",val,1); } const onSetValue : TFGrid["OnSetValue"] = (_grid,row,col,value,changes) => { // FastGrid OnSetValue API event handler assigned to <FastGrid onSetValue .../>. Uses TFGrid definition to simplify types. if(changes) console.log("Value "+value+" set to cell ["+row?.id+","+col?.id+"]"); } function onClick(grid?:TGrid,row?:TRow,col?:TCol) : void|boolean|number { // FastGrid OnClick API event handler assigned to <FastGrid onClick .../>. Uses standard function definition. if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid?.GetValue(row,col)); } function onReady(grid:TGrid) : void { console.log("FastGrid is ready"); } // FastGrid OnReady API event handler assigned to <FastGrid onReady .../>. Uses standard function definition. </script>   <FastGrid id="Simple_grid" bind:this={grid} {src} {onSetValue} {onClick} {onReady} style="height: 500px;"/> <button onclick={readValue}>Read value</button>  <button onclick={() => changeValue(grid, 1, 'A', 'XXX')}>Change value</button>

FastSheet in Svelte

FastSheet can be shown in Svelte in similar way as FastGrid with a few exceptions.
FastSheet usually contains more grids (= sheets) in one book. Only one of the sheets is displayed at a time. All the sheets are defined in one <FastGrid src .../>.
<FastGrid id .../> is not used as the grid id, only as HTML tag id, the grids (sheets) get their ids from their JSON or XLSX data.
Actually displayed sheet can be got by API FGrid.GetGrid(). All the sheets can be got by API Grid.GetSheets()
Example of FastSheet with two sheets with data in JSON: <script> import { FastGrid } from "fastgrid-svelte"; // Required to use FastGrid library const src = { // Full layout and data of very simple book with two sheets Cfg: { SheetJs:1, Book:'QuickSheet' }, // SheetJs is used to set to sheet mode, if data is coming from json or csv and not from xlsx. Sheets:{ Sheet1: { Body:[ { V:[100,200,300] }, { V:{ A:400, B:500, C:600 } }, { V:"|700|800|900" } ] }, // Simple data for the first sheet for 3 rows and 3 columns. Shows 3 ways of passing values to grid. In sheet the columns are always named as A, B, C,... "Sheet 2": { Body:[ { V:['AAA','BBB','CCC'] }, { V:"~DDD~EEE~FFF~GGG" } ] } // Simple data for the second sheet } }; // To use XLSX instead of JSON as data source, define for example: const src = [ { Cfg: { Style: 'Bare' } }, "https://www.treegrid.com/FExamples/Complex/05-Excel/Excel.xlsx" ]; let grid = null; // Grid reference received for grid, access the grid object directly as grid function readValue() { alert("Read value from cell [1,A]: "+ grid?.Get(1,"A")); } // Function called from Read Value button function changeValue(grid,row,col,val) { grid?.Set(row,col,"",val,1); } // Function called from both Change Value buttons with different parameters function onSetValue(grid,row,col,value,changes){ if(changes) console.log("Value "+value+" set to cell ["+row.id+","+col.id+"]"); } // FastGrid API event OnSetValue handler assigned to <FastGrid onSetValue .../> function onClick(grid,row,col){ if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid.GetValue(row,col)); } // FastGrid API event OnClick handler assigned to <FastGrid onClick .../> function onReady(grid){ console.log("FastGrid "+grid.id+" is ready"); } // FastGrid API event OnReady handler assigned to <FastGrid onReady .../> </script>   <FastGrid id="Book1" bind:this={grid} {src} {onSetValue} {onReady} {onClick} style="height:550px; width:100%;" /> <button onclick={readValue}>Read value [1,A]</button>  <button onclick={() => changeValue(grid,1,'A','XXX')}>Change value [1,A]</button>

Trial runtime and registered runtime

The default import includes the FastGrid/FastSheet evaluation runtime: import { FastGrid } from "fastgrid-svelte";

Production applications must use a registered runtime supplied under the appropriate COQsoft license.
Use the registered entry point for the licensed runtime: import { FastGrid } from "fastgrid-svelte/registered"; The registered entry point does not load the runtime automatically. Supply your registered FGridE.js through your application build or a script tag. Do not publish a registered runtime or serial code to npm or GitHub. See licensing for the exact terms.

SvelteKit SSR and browser rendering

FastGrid is a browser-oriented component. In SvelteKit, render it only in the browser.
Keep the component behind a client-only boundary or use a browser guard when the grid is created dynamically.

<script>
   import { browser } from "$app/environment";
   import { FastGrid } from "fastgrid-svelte";

   const src = { Cols: ["Name"], Body: [{ V: ["Alice"] }] };
</script>

{#if browser}
   <FastGrid {src} style="height:500px;" />
{:else}
   <div style="height:500px;"></div>
{/if}

Legacy script-tag integration

Existing applications can continue to copy and load FGridE.js manually and create a grid with FGrid.FastGrid(...). This remains supported, but for a new Svelte application the recommended path is npm install fastgrid-svelte@latest followed by the <FastGrid /> component.

Use the script-tag method only when the application already has a manual FastGrid integration or when the global FGrid API is specifically required. See HTML / JavaScript integration.

Need help choosing the integration? Use live examples for evaluation, npm install fastgrid-svelte@latest for an existing app, or npm create fastgrid-svelte@latest for a generated project. For licensing and registered runtime questions, see Licensing.

FastGrid Documentation

FastGrid Svelte Data Grid and FastSheet Spreadsheet