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-react@latest
Import the component and render it. This is the shortest working example:
import { useMemo } from "react";
import { FastGrid } from "fastgrid-react";
export default function App() {
const src = useMemo(() => ({
Cols: ["Name", "Value"],
Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }],
Body: [
{ V: { Name: "Alice", Value: 120 } },
{ V: { Name: "Bob", Value: 85 } }
]
}), []);
return (
<FastGrid src={src} style={{ height: "500px" }} />
);
}
Browser runtime: FastGrid renders in the browser. In SSR frameworks such as Next.js, Remix or Astro, initialize the component on the client. See SSR and browser rendering below.
Use the project generator for quick-starts, tutorials, server examples, SQL database, PDF export, TypeScript examples, and complex demos:
npm create fastgrid-react@latest my-fastgrid-app
Open FastGrid live examples to test the grid and spreadsheet features before integrating them into your application.
fastgrid-react is the library package. Install it in an existing React project and use its <FastGrid /> component.
create-fastgrid-react 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 React example project with
npm create fastgrid-react@latest my-fastgrid-app
The generator lets you choose which template to create:
1 - quick-start - basic example with one simple grid in React.
2 - quick-start-typescript - the same basic example with one simple grid in React using TypeScript instead of JavaScript.
3 - tutorials - package contains:
- four basic and advanced tutorials of using FastGrid React Data Grid and FastSheet Spreadsheet
- four basic and advanced tutorials of using FastGrid React 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 React library can be added to your React project with the following command
npm install fastgrid-react@latest
Import the FastGrid React library into your .jsx / .tsx file with
import { FastGrid } from "fastgrid-react";
FastGrid can be created and displayed in a React 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.
React integration note: Keep the src object stable with useMemo or define it outside the component. Recreating the source object on every React render can recreate the grid unnecessarily.
Created FastGrid object can be accessed by React ref created with useRef and this object can be used to invoke FastGrid API methods. The grid object is accessible as gridRef.current.
FastGrid API events are exposed as React props such as onSetValue, onReady and onClick.
The full simple React application using FastGrid API methods and events:
import React, { useMemo, useRef } from "react";
import { FastGrid } from "fastgrid-react"; // Required to use FastGrid library
export default function App() {
const src = useMemo(() => ({ 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. Memo is used for simple object created inside the App function to avoid re-creating grid on every React App render.
const gridRef = useRef(null); // FastGrid reference assigned in <FastGrid ref .../> and used in functions like readValue
function readValue() { alert("Read value from cell [1,A]: "+ gridRef.current?.Get(1,"A")); } // Function called from Read value sample button
function changeValue(gridRef,row,col,val) { gridRef.current?.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 ... />
return(<>
{/* 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"} onSetValue={onSetValue} onReady={onReady} onClick={onClick} style={{height:"500px"}} />
<button onClick={readValue}>Read value [1,A]</button> {/*. Button to run universal API function with parameters in grid. */}
<button onClick={() => { changeValue(gridRef,1,"A","XXX"); } }>Change value [1,A]</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 React 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:
import React, { useMemo, useRef } from "react";
import { FastGrid } from "fastgrid-react"; // Required to use FastGrid library
export default function App() {
const src = {
Events: { OnSetValue: (grid,row,col,val,changes) => { grid.Component.onSetValue(grid,row,col,val,changes) } }, // Defines OnSetValue API event handler that calls React 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 React 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 React 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 = useRef(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.current?.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 componentApi = useMemo(function(){ return { readValue, onSetValue }; },[readValue, onSetValue]); // Object passed to <FastGrid component ... /> with exposed React functions readValue and onSetValue to be accessible in FastGrid events and functions code
return (<>
{/* Places the grid with data in src to page. Passes exposed React functions in component attribute. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. */}
<FastGrid src={src} ref={gridRef} id="Grid1" onSetValue={onSetValue} onClick={onClick} component={componentApi} style={{height:"500px"}} />
</>)
}
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:
import { FastGrid } from "fastgrid-react"; // Required to use FastGrid library
export default function App() {
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
]
}
return (<>
<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. */}
</>)
}
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.
Grid ref is typed as TGridRef.
API events can be defined without parameter types using TFGrid[event_name] function type definition.
The full simple React application using FastGrid API methods and events in TypeScript:
import React, { useMemo, useRef } from "react";
import { FastGrid } from "fastgrid-react"; // Required to use FastGrid library
export default function App() {
const src = useMemo(() => ({ 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. Memo is used for simple object created inside the App function to avoid re-creating grid on every React App render.
const gridRef = useRef<TGrid|null>(null); // Grid reference received for grid, access the grid object as gridRef.current, the gridRef is of type TGridRef
function readValue() : void { alert("Read value from cell [1,A]: "+ gridRef.current?.Get(1,"A")); } // Function called from Read value sample button
function changeValue(gridRef:TGridRef,row:TRow|string|number,col:TCol|string|number,val:any) : void { // Function called from Change value sample button
gridRef.current?.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.
return(<>
{/* 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 src={src} ref={gridRef} id={"Book1"} onSetValue={onSetValue} onReady={onReady} onClick={onClick} style={{height:"500px"}} />
<button onClick={readValue}>Read value [1,A]</button> {/* Button to run universal API function with parameters in grid. */}
<button onClick={() => { changeValue(gridRef,1,"A","XXX"); } }>Change value [1,A]</button> {/* Button to run universal API function with parameters in grid. */}
</>)
}
FastSheet can be shown in React 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:
import React, { useMemo, useRef } from "react";
import { FastGrid } from "fastgrid-react"; // Required to use FastGrid library
export default function App() {
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 = useRef(null); // Grid reference received for grid, access the grid object as gridRef.current
function readValue() { alert("Read value from cell [1,A]: "+ gridRef.current?.Get(1,"A")); } // Function called from Read Value button
function changeValue(gridRef,row,col,val) { gridRef.current?.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 .../>
return(<>
{/* 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"} onSetValue={onSetValue} onReady={onReady} onClick={onClick} style={{height:"500px"}} />
<button onClick={readValue}>Read value [1,A]</button> {/* Button to run universal API function with parameters in grid. */}
<button onClick={() => { changeValue(gridRef,1,"A","XXX"); } }>Change value [1,A]</button> {/* Button to run universal API function with parameters in grid. */}
</>)
}
import { FastGrid } from "fastgrid-react";
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-react/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.
// Example pattern for Next.js
"use client";
import { FastGrid } from "fastgrid-react";
export default function ClientGrid() {
return <FastGrid src={/* your sources */} style={{ height: "500px" }} />;
}
For a page that must be server-rendered, render a placeholder during SSR and mount the FastGrid component only in the browser. See the framework-specific SSR documentation of your application framework as well as the FastGrid lifecycle documentation.
npm install fastgrid-react@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-react@latest for an existing app, or
npm create fastgrid-react@latest for a generated project.
For licensing and registered runtime questions, see Licensing.