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 referenceDownload the current FGridE.js runtime and copy it to a folder served by your application: Download FGridE.js. For production applications, keep the runtime local and use the registered file supplied under the appropriate COQsoft license.
Or for basic testing you can use FGridE.js directly from treegrid.com as
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script>
Then include the script and create a grid with a valid <fast-grid> attribute:
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script>
<fast-grid
src='{ Cols:["Name","Value"], Head:[{ D:"Header", V:{Name:"Name",Value:"Value"} }], Body:[{ V:{Name:"Alice",Value:120} }, { V: { Name: "Bob", Value: 85 } }] }'
style="height:500px">
</fast-grid>
or create it dynamically from script by FGrid.FastGrid():
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script>
<div id="Grid1" style="height:500px"></div>
<script>
FGrid.FastGrid({ Cols:["Name","Value"], Head:[{ D:"Header", V:{Name:"Name",Value:"Value"} }], Body:[{ V:{Name:"Alice",Value:120} }, { V: { Name: "Bob", Value: 85 } }] }, "Grid1");
</script>
Runtime note: FastGrid is a browser component. It does not require a frontend framework, but it must be run on client side in a browser.
Use the project generator for quick-starts, tutorials, server examples, SQL database, PDF export, and complex demos:
npm create fastgrid-html@latest my-fastgrid-app
Then run the generated project according to its README. The generator is optional; it is not required when adding FGridE.js to an existing HTML application.
Download full package with quick-starts, tutorials, server examples, SQL database, PDF export, TypeScript definitions, and complex demos: FastGrid trial package.
Unzip the package to some directory and run the Index.html in its root directly in browser or from your localhost server.
Open FastGrid live examples to test the grid and spreadsheet features before integrating them into your application.
FastGrid HTML examples can be installed by command
npm create fastgrid-html@latest my-fastgrid-app
It allows you to choose which examples package you want to install and test:
1 - quick-start - basic example with one simple grid in HTML.
2 - examples - the package contains:
- four basic and advanced tutorials of using FastGrid in JavaScript
- all the FastGrid Live Tutorials showing general FastGrid usage
- six examples showing server communication and SQL database
- four examples showing server communication and file storage
- the eight complex FastGrid and FastSheet live examples
- sample Node.js server and PDF export scripts
FastGrid ASP.NET / PHP / JAVA / HTML examples can be downloaded at FastGrid trial package
This package contains:
- main FastGrid trial FGridE.js file
- support file FGridED.js for lazy loading of FGridE.js
- extra fonts for FastGrid
- FastGrid API TypeScript definitions in file FastGrid.TypeScript.API.d.ts
- four basic and advanced tutorials of using FastGrid in JavaScript
- all the FastGrid Live Tutorials showing general FastGrid usage
- six examples showing server communication and SQL database for ASP.NET C# & VB, PHP, JAVA JSP
- four examples showing server communication and file storage for ASP.NET C# & VB, PHP, JAVA JSP
- the eight complex FastGrid and FastSheet live examples
- PDF export scripts in ASP.NET C# & VB, PHP, JAVA JSP and NodeJS.
- full offline documentation for FastGrid.
- UTF8 Store scripts for ASP.NET C#, PHP, JAVA and JavaScript
FastGrid can be added to any project by copying FGridE.js file to the project where is visible to browser, usually in some public folder.
The newest FastGrid script can be downloaded from https://www.treegrid.com/attach/FGrid/FGridE.js
The runtime can be imported to any HTML page by including the FGridE.js file as
<script src="path/FGridE.js"></script>
Or it can be linked directly from treegrid.com as
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script>
FastGrid can be created and shown in HTML as tag
<fast-grid src="sources"></fast-grid>
where sources is JavaScript object that defines grid layout and data, for example:
<fast-grid src='{ Cols:["A","B","C"], Head:[ "Header" ], Body:[ { V:[1,2,3] }, { V:[4,5,6] }, { V:[7,8,9] } ] }' style='height:500px;'></fast-grid>
Note that <fast-grid> as custom html tag must have closing tag </fast-grid>.
Or FastGrid can be created by script in existing HTML tag as
FGrid.FastGrid(sources,tag);
where sources is JavaScript object that defines grid layout and data, and tag is HTML tag object or its id to create grid inside, for example:
<div id="GridTag" style="height:500px;"></div>
<script>var grid = FGrid.FastGrid({ Cols:["A","B","C"], Head:[ "Header" ], Body:[ { V:[1,2,3] }, { V:[4,5,6] }, { V:[7,8,9] } ] }, "GridTag")</script>
See FastGrid().
Created FastGrid object can be accessed globally by FGrid.Grids[grid_id].
The FastGrid API event handlers can be assigned in FastGrid sources in Events tag.
The full simple html application using FastGrid API methods and events:
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script> <!-- Links FastGrid library from treegrid.com, for real application download and place FGridE.js locally -->
<script>
function readValue() { alert("Read value from cell [1,A]: "+ FGrid.Grids.Simple_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
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
function onReady(grid){ console.log("FastGrid is ready"); } // FastGrid API event OnReady handler
FGrid.Sources.Layout1 = { // All layout and data for grid.
Cols: ["A", "B", { id: "C", Width:80 } ], // Simple columns definition
Head: [ "Header" ], // Adds header to grid to top, without defining captions, so column ids are shown
Body: [ { V:[100,200,300] }, { V:{A:400,B:500,C:600} }, { V:"|700|800|900" } ], // Simple data for 3 rows and 3 columns. shows 3 ways of passing values to grid
};
FGrid.Sources.Events1 = { Events: { OnSetValue: onSetValue, OnReady: onReady, OnClick: onClick } }; // Events assignment, the Events can be also merged with the Layout if needed, see onSetValue, onReady and onClick.
</script>
<!-- Places the grid with data in Layout1 and Events1 to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
<fast-grid src="['Layout1','Events1']" id="Simple_Grid" style="height:500px;"></fast-grid>
<button onClick="readValue()">Read value [1,A]</button> <!-- Button to run dedicated API function in grid -->
<button onClick="changeValue(FGrid.Grids.Simple_Grid,1,'A','XXX');">Change value [1,A]</button> <!-- Button to run universal API function with parameters in grid. -->
API events can be defined directly in FastGrid source object in Events tag or they can be dynamically added (and removed) by FGrid.AddEvent().
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].
If there is FastGrid wrapper, it can be assigned to grid.Component in OnTag API event and next the wrapper methods can be called from FastGrid event handlers like grid.Component.func2().
For example:
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script> <!-- Links FastGrid library from treegrid.com, for real application download and place FGridE.js locally -->
<div id="Test_Grid" style="height:500px;"> </div> <!-- Place for FastGrid, here will be the FastGrid created using TestGrid constructor. The tag has set fixed height, so the grid can show vertical scrollbars. See FastGrid size. -->
<button onclick="new TestGrid('Data1')">Create Test Grid 1</button> <!-- Creates the TestGrid class and FastGrid object from Data1 -->
<button onclick="new TestGrid('Data2')">Create Test Grid 2</button> <!-- Creates the TestGrid class and FastGrid object from Data2 -->
<script>
FGrid.Sources.Data1 = {
Events: { OnSetValue: (grid,row,col,val,changes) => { grid.Component.onSetValue(grid,row,col,val,changes) } }, // Defines OnSetValue API event handler that calls TestGrid onSetValue method
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 TestGrid method 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 TestGrid method 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.
};
FGrid.Sources.Data2 = { Cols:["A","B"], Body:[ { V:"|A|B" }, { V:"|C|D" }, { V:"|E|F" }] }; // Sample data for the second grid
class TestGrid {
constructor(src){ // constructor of the TestGrid class that creates FastGrid from given sources
FGrid.GetGrid("Test_Grid")?.Component.dispose(); // Deletes old grid if any
src = FGrid.MergeSources(src,{ Events: { OnTag: (grid) => { grid.Component = this; } } }); // Adds to sources event handler OnTag that assigns grid.Component to the TestGrid class on every grid create / re-create
this.Grid = FGrid.FastGrid(src,"Test_Grid"); // Creates new FastGrid in with sources src in HTML tag "Test_Grid"
this.Grid?.AddEvent("OnClick",this.onClick.bind(this)); // Adds OnClick event handler dynamically from script
console.log("Created grid "+this.Grid?.id);
}
dispose(){ console.log("Disposed grid "+this.Grid?.id); this.Grid?.Dispose(); this.Grid = null; } // destructor of the TestGrid class, disposes created grid
readValue(row,col) { alert("Read value from cell ["+row.id+","+col.id+"]: "+ this.Grid?.GetValue(row,col)); } // Function called from OnClick mouse/touch event handler assigned to column C
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
onClick(grid,row,col){ if(grid.Script.LogClick) grid.Script.LogClick(grid,row,col); } // FastGrid OnClick API event handler assigned by AddEvent in constructor. Calls custom function LogClick defined in src.Script
}
</script>
Grid layout and data can be fully defined in the sources object passed to <fast-grid src ... ></fast-grid> 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 src="https://www.treegrid.com/FGrid/FGridE.js"></script> <!-- Links FastGrid library from treegrid.com, for real application download and place FGridE.js locally -->
<script>
FGrid.Sources.Layout1 = { // 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.
}
}
FGrid.Sources.Data1 = { // 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>
<fast-grid src="['Layout1','Data1']" style="height:500px;"></fast-grid> <!-- 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. -->
FastGrid comes with full TypeScript definitions for its API, it can be downloaded from https://www.treegrid.com/attach/FGrid/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.
FastSheet can be shown 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 <fast-grid src ... ></fast-grid>.
<fast-grid id ... ></fast-grid> 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 src="https://www.treegrid.com/FGrid/FGridE.js"></script> <!-- Links FastGrid library from treegrid.com, for real application download and place FGridE.js locally -->
<script>
function readValue() { alert("Read value from cell [1,A]: "+ FGrid.GetGrid().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
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
function onReady(grid){ console.log("FastGrid is ready"); } // FastGrid API event OnReady handler
FGrid.Sources.Layout1 = { // 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: FGrid.Sources.Layout1 = { Cfg: { Style: 'Bare' } }; FGrid.Sources.Data1 = "https://www.treegrid.com/FExamples/Complex/05-Excel/Excel.xlsx";
FGrid.Sources.Events1 = { Sheet:".", Events: { OnSetValue: onSetValue, OnReady: onReady, OnClick: onClick } }; // Events assignment to all sheets, the Events can be also merged with the Layout if needed, see onSetValue, onReady and onClick.
</script>
<!-- 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 -->
<fast-grid src="['Layout1','Events1']" id="Book1" style="height:550px; width:100%;"></fast-grid>
<button onClick="readValue()">Read value [1,A]</button> <!-- Button to run dedicated API function in grid -->
<button onClick="changeValue(FGrid.GetGrid(),1,'A','XXX');">Change value [1,A]</button> <!-- Button to run universal API function with parameters in grid. -->
Need help choosing the integration?
Use live examples for evaluation, download FGridE.js for an existing HTML app, or use
npm create fastgrid-html@latest for a generated project.
For licensing and registered runtime questions, see Licensing.