FastGrid in Angular
FastGrid in React
FastGrid in Vue
FastGrid in Svelte
FastGrid in SalesForce LWC
FastGrid in any HTML / JavaScript
and in ASP.NET / PHP / JAVA
Changes log (txt file) Compare FastGrid & TreeGrid
Simple examples of creating FastGrid Create FastGrid Display grid Access grid by API Sheets, more grids switched in one place Layout and configuration Data rows, columns, toolbars, images Changes in data rows, columns, toolbars Saving changes to server Mark changes Loading children on expand parent Short format
Parts - ColParts and RowParts Part size Part scroll position Sets Column sets Row sets
Toolbar Cells Icon Height Width Toolbar position Dragging and manipulating cells Special toolbars
Row / column id Row / column index Row / column name
API to get grid objects Auto added columns & rows on scroll Blocks of rows / columns Adding / copying / moving Deleting Showing and hiding Layout menu Selecting rows and columns Fill cell values by dragging Locking grid against changes Undo & redo
Row and column tree Row tree Column tree Expand & collapse
Read and write any values by API Cell value Cell attributes Cell value & attributes in UTF8 Store
Editing During editing Validation and errors
Row cell side icons Icons definition Mark icons and charts Mark icons list Row cell floating images
Row height Column width Resizing rows and columns Padding Margin Cell span
Grid style and look Cell style permissions Cell style Cell outer border Cell inner border Alternate row & column background Animations in grid
Cell hyperlink Cell tooltip Static cells Other cell attributes Row & column attributes to speed up
Bool type Check side icon Bool type & Check side icon
JavaScript formulas Aggregate functions String aggregate functions Other functions
Formula rules Formula attributes Defined names for editable formulas Conditional functions Lookup functions Cell reference functions Logical functions Informational functions Mathematical functions Trigonometry functions Rounding numbers Number conversions String functions Date functions Summary functions
Dialog Dialog Place Dialog API Menu definition in Script Cell menu List Suggest
Sorting Sorting settings Comparing strings
Grouping Grouping settings Comparing strings Pivot grid
Filtering Filter settings Comparing strings
Search in cells Import files to gridExport files Export and copy to clipboard CSV data
Copy & paste Copy to clipboard Paste from clipboard
Basic AI concepts Basic AI settings Instructions for AI Built-in AI tools FastGrid AI tools Custom functions for AI tools AI UI settings API functions to control AI
Grid size Grid scrollbars Paging and view Media rules - responsive design
Saving settings in storage or cookiesFocus cell and cell ranges Mouse hover cells Highlight cells, rows and columns
Mouse events Key events API events
API for iterating rows and columns Paint and repaint Various API methods
Basic description Main advantages Basic usage License Download Documentation
Bits - small integers or enums Integers or enums with strings Date and time Floating point numbers Special strings
Integer 1 char String 1 char Date 1 char Bits 1 char Integer 2 chars String 2 chars Date 2 chars Float 2 chars Integer 3 chars String 3 chars Date 3 chars Integer and double float 5 chars String 5 chars Date 5 chars Fixed length string Separated strings Adjacent strings Prefix for escaping string Fixed length data Unused custom codes Prefix for stored separator or length Prefix for stored base number Unused basic ucodes
chars signed decimals multiple limits varstrings escape base chars2 signed2 decimals2 multiple2 limits2
Internal coding Profiling times for ucode options Function reference
Install the FastGrid library:
npm install fastgrid-vue@latest
Import the component and render it. This is the shortest working example:
<script setup>
import { FastGrid } from "fastgrid-vue";
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>
<template>
<FastGrid :src="src" style="height:500px;" />
</template>
Browser runtime: FastGrid renders in the browser. With Nuxt or another SSR setup, keep the grid in a client-only component or initialize it after the browser has mounted. See SSR and browser rendering.
Use the project generator for quick-starts, tutorials, server examples, SQL database, PDF export, TypeScript examples, and complex demos:
npm create fastgrid-vue@latest my-fastgrid-app
Open FastGrid live examples to test the grid and spreadsheet features before integrating them into your application.
fastgrid-vue is the library package. Install it in an existing Vue project and use its <FastGrid /> component.
create-fastgrid-vue is the optional examples and project-generator package. It creates a new example project; it is not required in an existing application.
Generate a new FastGrid Vue example project with
npm create fastgrid-vue@latest my-fastgrid-app
The generator lets you choose which template to create:
1 - quick-start - basic example with one simple grid in Vue.
2 - quick-start-typescript - the same basic example with one simple grid in Vue using TypeScript instead of JavaScript.
3 - tutorials - package contains:
- four basic and advanced tutorials of using FastGrid Vue Data Grid and FastSheet Spreadsheet
- four basic and advanced tutorials of using FastGrid Vue 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
The FastGrid Vue library can be added to your Vue project with the following command
npm install fastgrid-vue
Import the FastGrid Vue library into your .vue file with
import { FastGrid } from "fastgrid-vue";
FastGrid can be created and displayed in a Vue 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.
Created FastGrid object can be accessed by Vue ref created with ref and this object can be used to invoke FastGrid API methods. The grid object is accessible as gridRef.value.
When the gridRef is used in Vue @event handler, it is automatically passed to called functions as gridRef.value, so the function code uses it as the grid object, not reference.
FastGrid API events are exposed as Vue event listeners such as @set-value, @ready and @click.
The full simple Vue application using FastGrid API methods and events:
<script setup>
import { ref } from "vue";
import { FastGrid } from "fastgrid-vue"; // 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
const gridRef = ref(null); // FastGrid reference assigned in <FastGrid ref .../> and used in functions like readValue
function readValue() { alert("Read value from cell [1,A]: "+ gridRef.value?.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 @set-value .../>
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 @click .../>
function onReady(grid){ console.log("FastGrid "+grid.id+" is ready"); } // FastGrid OnReady API event handler assigned to <FastGrid @ready .../>
</script>
<template>
<!-- Places the grid with data in srcLayout and srcData to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
<!-- There are assigned three FastGrid API event handlers onSetValue, onReady and onClick. The event names start with a lowercase letter and are translated to FastGrid API event names starting uppercase -->
<FastGrid ref="gridRef" id="Simple_grid" :src="src" @set-value="onSetValue" @click="onClick" @ready="onReady" style="height:500px;"/>
<button @click="readValue">Read value</button> <!-- Button to run dedicated API function in grid -->
<button @click="changeValue(gridRef, 1, 'A', 'XXX')">Change value</button> <!-- Button to run universal API function with parameters in grid, gridRef is automatically passed as gridRef.value -->
</template>
FastGrid has a comprehensive API for reading, controlling and dynamically manipulating any part of the grid and its data from a script.
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 Vue functions can be called from any outside code that knows grid object as Grid.Component.func2(...), but the function must be exposed from Vue code as defineExpose({ func2 }).
For example:
<script setup>
import { ref } from "vue";
import { FastGrid } from "fastgrid-vue"; // 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 Vue 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 Vue 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 Vue 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.
};
const gridRef = ref(null); // FastGrid reference assigned in <FastGrid ref .../> and used in functions like readValue
function readValue(row,col) { alert("Read value from cell ["+row.id+","+col.id+"]: "+ gridRef.value?.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 @click .../>. Calls custom function LogClick defined in src.Script
defineExpose({ readValue, onSetValue }); // Exposes Vue functions readValue and onSetValue to be accessible in FastGrid events and functions code
</script>
<template>
<FastGrid ref="gridRef" id="Grid1" :src="src" @click="onClick" style="height:500px;"/> <!-- Places the grid with data in src to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
</template>
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 setup>
import { FastGrid } from "fastgrid-vue"; // 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>
<template>
<FastGrid :src="[srcLayout,srcData]" style="height:500px;"/> <!-- Places the grid with data in srcLayout and srcData to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
</template>
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.
API events can be defined without parameter types using TFGrid[event_name] function type definition.
The full simple Vue application using FastGrid API methods and events in TypeScript:
<script setup lang="ts">
import { ref } from "vue";
import { FastGrid } from "fastgrid-vue"; // 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
const gridRef = ref<TGrid|null>(null); // FastGrid reference assigned in <FastGrid ref .../> and used in functions like readValue
function readValue() : void { alert("Read value from cell [1,A]: "+ gridRef.value?.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 @set-value .../>. 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 @click .../>. 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 @ready .../>. Uses standard function definition.
</script>
<template>
<!-- Places the grid with data in srcLayout and srcData to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
<!-- There are assigned three FastGrid API event handlers onSetValue, onReady and onClick. The event names start with a lowercase letter and are translated to FastGrid API event names starting uppercase -->
<FastGrid ref="gridRef" id="Simple_grid" :src="src" @set-value="onSetValue" @click="onClick" @ready="onReady" style="height:500px;"/>
<button @click="readValue">Read value</button> <!-- Button to run dedicated API function in grid -->
<button @click="changeValue(gridRef, 1, 'A', 'XXX')">Change value</button> <!-- Button to run universal API function with parameters in grid, gridRef is automatically passed as gridRef.value -->
</template>
FastSheet can be shown in Vue 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 setup>
import { ref } from "vue";
import { FastGrid } from "fastgrid-vue"; // 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" ];
const gridRef = ref(null); // Grid reference received for grid, access the grid object as gridRef.value
function readValue() { alert("Read value from cell [1,A]: "+ gridRef.value?.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 @set-value .../>
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 @click .../>
function onReady(grid){ console.log("FastGrid "+grid.id+" is ready"); } // FastGrid API event OnReady handler assigned to <FastGrid @ready .../>
</script>
<template>
<!-- Places the grid with data in src to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
<!-- There are assigned three FastGrid API event handlers onSetValue, onReady and onClick. The event names start with a lowercase letter and are translated to FastGrid API event names starting uppercase -->
<FastGrid :src="src" ref="gridRef" id="Book1" @set-value="onSetValue" @ready="onReady" @click="onClick" style="height:550px; width:100%;" />
<button @click="readValue">Read value [1,A]</button> <!-- Button to run dedicated API function in grid -->
<button @click="() => changeValue(gridRef,1,'A','XXX')">Change value [1,A]</button> <!-- Button to run universal API function with parameters in grid, gridRef is automatically passed as gridRef.value. -->
</template>
import { FastGrid } from "fastgrid-vue";
Production applications must use a registered FastGrid/FastSheet runtime supplied under the appropriate COQsoft license.
Use the registered package entry point when integrating the licensed runtime:
import { FastGrid } from "fastgrid-vue/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.
<ClientOnly>
<FastGrid :src="src" style="height:500px;" />
</ClientOnly>
For other SSR frameworks, render a placeholder on the server and mount the FastGrid component only in the browser.
npm install fastgrid-vue 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-vue@latest for an existing app, or
npm create fastgrid-vue@latest for a generated project.
For licensing and registered runtime questions, see Licensing.