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-angular
Import FastGridComponent into a standalone component and render the grid:
import { Component } from "@angular/core";
import { FastGridComponent } from "fastgrid-angular";
@Component({
selector: "app-root",
standalone: true,
imports: [FastGridComponent],
template: `
<fast-grid [src]="src" style="height:500px;" ></fast-grid>
`
})
export class App {
readonly src = {
Cols: ["Name", "Value"],
Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }],
Body: [
{ V: { Name: "Alice", Value: 120 } },
{ V: { Name: "Bob", Value: 85 } }
]
};
}
Browser runtime: FastGrid renders in the browser. With Angular SSR or hydration, keep the grid in a browser-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, and complex demos:
npm create fastgrid-angular@latest my-fastgrid-app
Open FastGrid live examples to test the grid and spreadsheet features before integrating them into your application.
fastgrid-angular is the library package. Install it in an existing Angular project and use its <fast-grid ></fast-grid > component.
create-fastgrid-angular is the optional examples and project-generator package. It creates a new example project, is not required in an existing application.
Generate a new FastGrid Angular example project with
npm create fastgrid-angular@latest my-fastgrid-app
The generator creates an Angular project and lets you choose which FastGrid template to generate:
1 - quick-start - basic example with one simple grid in Angular.
2 - tutorials - package contains:
- four basic and advanced tutorials of using FastGrid in Angular
- all the FastGrid Live Tutorials showing general FastGrid usage.
3 - 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 Angular library can be added to your Angular project with the following command
npm install fastgrid-angular
Import the FastGrid Angular library into your Angular .ts file with
import { FastGridComponent, type FastGridOutputEvent } from "fastgrid-angular";
and add FastGridComponent to @Component imports as
@Component({ ... imports:[ FastGridComponent ] ... })
FastGrid can be created and displayed in an Angular application as a 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>
If needed, it is also possible to create FastGrid dynamically from script:
const grid: TGrid = 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 Angular FastGridComponent created as @ViewChild(FastGridComponent) grid! : FastGridComponent and this object can be used to invoke FastGrid API methods.
FastGrid comes with full TypeScript definitions for its API, see FastGrid.TypeScript.API.d.ts
There are basic types: FastGridComponent / TGrid for grid object, TRow for row object, TCol for column object, TToolbar for toolbar object and TTool for toolbar cell object.
FastGrid API events are exposed as Angular inputs and outputs on the <fast-grid> component.
There are two ways of assigning events to FastGrid in Angular, input and output.
Input events are assigned as function object: [event] = "func" and can return value.
Input events can be defined without parameter types using TFGrid[fastgrid_event_name] function type definition. fastgrid_event_name is e.g. "OnEndEdit".
Output events are assigned as function call: (event) = "func($event)" and its return value is ignored.
Output events are defined as function with one parameter event: FastGridOutputEvent<"angular_event_name"> and the event object has attributes as the API event properties. angular_event_name is e.g. "endEdit".
The full simple Angular application using FastGrid API methods and events:
app.component.ts:
import { Component, ViewChild } from "@angular/core";
import { FastGridComponent, type FastGridOutputEvent } from "fastgrid-angular"; // Required to use FastGrid library
@Component({ selector:"app-root", standalone:true, imports:[ FastGridComponent ], templateUrl:"./app.component.html" })
export class AppComponent {
readonly 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
@ViewChild(FastGridComponent) grid! : FastGridComponent; // FastGrid reference received for grid, access the grid object directly as this.grid
readValue() : void { alert("Read value from cell [1,A]: "+this.grid.Get(1,"A")); } // Function called from Read Value sample button
changeValue(grid:FastGridComponent,row:TRow|string|number,col:TCol|string|number,val:any) : void { // Function called from Change Value sample button with different parameters
grid.Set(row,col,"",val,1);
}
onSetValue(event:FastGridOutputEvent<"setValue">) : void { if(event.changes) console.log("Value "+event.value+" set to cell ["+event.row?.id+","+event.col?.id+"]"); } // FastGrid API event OnSetValue handler, output event handler assigned to the grid in ( )
onEndEdit: TFGrid["OnEndEdit"] = (grid,row,col,value,save) => { // Definition of event handler returning value, Input event handler assigned to the grid in [ ]
if(!save||!value||!isNaN(Number(value))) return null; // Number or empty or cancel, finishes editing normally
grid.ShowMessage("Enter string?","Confirm",(but:string) => { if(but==="Ok") grid.EndEdit(1,1); }); // String, asks for accept editing
return true; // Continues editing
};
onClick(event: FastGridOutputEvent<"click">) : void { if(event.row&&event.col) console.log("Clicked",event.row.id,event.col.id); } // FastGrid API event OnClick handler, output event handler assigned to the grid in ( )
onReady(event: FastGridOutputEvent<"ready">) : void { console.log("FastGrid "+event.grid.id+" is ready"); } // FastGrid API event OnReady handler, output event handler assigned to the grid in ( )
}
app.component.html:
<!-- 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 -->
<fast-grid [src]="src" (setValue)="onSetValue($event)" (click)="onClick($event)" (ready)="onReady($event)" [onEndEdit]="onEndEdit" style="height:500px;"></fast-grid>
<button (click)="readValue()">Read value</button> <!-- Button to run dedicated API function in grid -->
<button (click)="changeValue(grid, 1, 'A', 'XXX')">Change value</button> <!-- Button to run universal API function with parameters in grid -->
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 Angular functions can be called from any outside code that knows grid object as (Grid.Component as AppComponent).func2(...),
but the Component must be assigned in onTag event as onTag(event: FastGridOutputEvent<"tag">) : void { event.grid.Component = this; }
and assigned as <fast-grid (tag)="onTag($event)" ... ></fast-grid>.
For example:
app.component.ts:
import { Component, ViewChild } from "@angular/core";
import { FastGridComponent, type FastGridOutputEvent } from "fastgrid-angular"; // Required to use FastGrid library
@Component({ selector:"app-root", standalone:true, imports:[ FastGridComponent ], templateUrl:"./app.component.html" })
export class AppComponent {
readonly src = {
Events: { OnSetValue: ((grid,row,col,val,changes) => { (grid.Component as AppComponent)?.onSetValue(grid,row,col,val,changes) }) satisfies TFGrid["OnSetValue"] }, // Defines OnSetValue API event handler that calls Angular onSetValue function
Script: { LogClick: ((grid,row,col) => { if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid.GetValue(row,col)); }) satisfies TFGrid["OnClick"] }, // Defines custom function LogClick that is called from Angular 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 Angular 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.
};
@ViewChild(FastGridComponent) grid! : FastGridComponent; // FastGrid reference received for grid, access the grid object directly as this.grid
readValue() : void { alert("Read value from cell [1,A]: "+this.grid.Get(1,"A")); } // Function called from Read Value sample button
onSetValue: TFGrid["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: TFGrid["OnClick"] = (grid,row,col) => { grid.Script.LogClick(grid,row,col); } // FastGrid OnClick API event handler assigned to <fast-grid [onClick] ... ></fast-grid>. Calls custom function LogClick defined in src.Script
onTag(event: FastGridOutputEvent<"tag">) : void { event.grid.Component = this; } // To permit calling onSetValue from OnSetValue defined in Events
}
app.component.html:
<fast-grid id="Grid1" [src]="src" [onClick]="onClick" (tag)="onTag($event)" style="height:500px;"></fast-grid> <!-- Places the grid with data in src to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
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:
app.component.ts:
import { Component, ViewChild } from "@angular/core";
import { FastGridComponent, type FastGridOutputEvent } from "fastgrid-angular"; // Required to use FastGrid library
@Component({ selector:"app-root", standalone:true, imports:[ FastGridComponent ], templateUrl:"./app.component.html" })
export class AppComponent {
readonly 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.
}
}
readonly 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
]
}
}
app.component.ts:
<fast-grid id="Grid1" [src]="[srcLayout,srcData]" style="height:500px;"></fast-grid> <!-- Places the grid with data in src to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->
FastSheet can be shown in Angular 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:
app.component.ts:
import { Component, ViewChild } from "@angular/core";
import { FastGridComponent, type FastGridOutputEvent } from "fastgrid-angular"; // Required to use FastGrid library
@Component({ selector:"app-root", standalone:true, imports:[ FastGridComponent ], templateUrl:"./app.component.html" })
export class AppComponent {
readonly 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" ];
@ViewChild(FastGridComponent) grid! : FastGridComponent; // FastGrid reference received for grid, access the grid object directly as this.grid
readValue() : void { alert("Read value from cell [1,A]: "+this.grid.Get(1,"A")); } // Function called from Read Value sample button
changeValue(grid:FastGridComponent,row:TRow|string|number,col:TCol|string|number,val:any) : void { // Function called from Change Value sample button with different parameters
grid.Set(row,col,"",val,1);
}
onSetValue(event:FastGridOutputEvent<"setValue">) : void { if(event.changes) console.log("Value "+event.value+" set to cell ["+event.row?.id+","+event.col?.id+"]"); } // FastGrid API event OnSetValue handler, output event handler assigned to the grid in ( )
onEndEdit: TFGrid["OnEndEdit"] = (grid,row,col,value,save) => { // Definition of event handler returning value, Input event handler assigned to the grid in [ ]
if(!save||!value||!isNaN(Number(value))) return null; // Number or empty or cancel, finishes editing normally
grid.ShowMessage("Enter string?","Confirm",(but:string) => { if(but==="Ok") grid.EndEdit(1,1); }); // String, asks for accept editing
return true; // Continues editing
};
onClick(event: FastGridOutputEvent<"click">) : void { if(event.row&&event.col) console.log("Clicked",event.row.id,event.col.id); } // FastGrid API event OnClick handler, output event handler assigned to the grid in ( )
onReady(event: FastGridOutputEvent<"ready">) : void { console.log("FastGrid "+event.grid.id+" is ready"); } // FastGrid API event OnReady handler, output event handler assigned to the grid in ( )
}
app.component.html:
<!-- 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 -->
<fast-grid [src]="src" (setValue)="onSetValue($event)" (click)="onClick($event)" (ready)="onReady($event)" [onEndEdit]="onEndEdit" style="height:500px;"></fast-grid>
<button (click)="readValue()">Read value</button> <!-- Button to run dedicated API function in grid -->
<button (click)="changeValue(grid, 1, 'A', 'XXX')">Change value</button> <!-- Button to run universal API function with parameters in grid -->
import { FastGridComponent } from "fastgrid-angular";
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 { FastGridComponent } from "fastgrid-angular/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.
import { isPlatformBrowser } from "@angular/common";
import { Inject, PLATFORM_ID } from "@angular/core";
const browser = isPlatformBrowser(this.platformId);
// Create or display the grid only when browser === true.
npm install fastgrid-angular@latest and the <fast-grid> 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-angular@latest for an existing app, or
npm create fastgrid-angular@latest for a generated project.
For licensing questions and registered runtime questions, see Licensing.