### Initialize Jspreadsheet with Formula Pro
Source: https://github.com/jspreadsheet/pro/blob/master/docs/docs/formulas/functions/pv.md
Examples showing the setup of Jspreadsheet and the Formula Pro extension in different frontend frameworks.
```html
```
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import formula from "@jspreadsheet/formula-pro";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set license
jspreadsheet.setLicense('###license###');
// Set the extensions
jspreadsheet.setExtensions({ formula });
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Worksheet data
const data = [
[
"Rate",
"Periods",
"Payment",
"Future Value",
"Present Value"
],
[
0.08,
10,
-1000,
0,
"=PV(A2/12,B2,C2,D2,0)"
],
[
0.06,
15,
-500,
5000,
"=PV(A3/12,B3,C3,D3,0)"
],
[
0.05,
20,
-750,
10000,
"=PV(A4/12,B4,C4,D4,0)"
]
];
// Render component
return (
);
}
```
```vue
```
```angularjs
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import * as formula from "@jspreadsheet/formula-pro";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('###license###');
// Set the extensions
jspreadsheet.setExtensions({ formula });
@Component({
standalone: true,
selector: "app-root",
template: ``
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
[
"Rate",
"Periods",
"Payment",
"Future Value",
"Present Value"
],
[
0.08,
10,
-1000,
0,
"=PV(A2/12,B2,C2,D2,0)"
],
[
0.06,
15,
-500,
5000,
"=PV(A3/12,B3,C3,D3,0)"
],
[
0.05,
20,
-750,
10000,
"=PV(A4/12,B4,C4,D4,0)"
]
]
}]
});
}
}
```
--------------------------------
### REDUCE function usage examples
Source: https://github.com/jspreadsheet/pro/blob/master/docs/docs/formulas/functions/reduce.md
Examples demonstrating how to apply a LAMBDA function to an array starting from an initial value.
```text
REDUCE(0, [1, 2, 3, 4], MyLambdaFunction) returns the accumulated result of applying MyLambdaFunction to each element in the array.
REDUCE(100, [10, 20, 30], AnotherLambda) returns the accumulated result of applying AnotherLambda to each element in the array starting from the initial value 100.
REDUCE(1, [2, 3, 4], SomeOtherLambda) returns the accumulated result of applying SomeOtherLambda to each element in the array starting from the initial value 1.
```
--------------------------------
### Initialize Jspreadsheet with Formula Extension
Source: https://github.com/jspreadsheet/pro/blob/master/docs/docs/formulas/functions/delta.md
Examples showing the setup of Jspreadsheet and the formula-pro extension in different frontend frameworks.
```html
```
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import formula from "@jspreadsheet/formula-pro";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set license
jspreadsheet.setLicense('###license###');
// Set the extensions
jspreadsheet.setExtensions({ formula });
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Worksheet data
const data = [
[
"Expected",
"Actual",
"Match"
],
[
100,
100,
"=DELTA(A2,B2)"
],
[
250,
245,
"=DELTA(A3,B3)"
],
[
75,
75,
"=DELTA(A4,B4)"
],
[
180,
185,
"=DELTA(A5,B5)"
]
];
// Render component
return (
);
}
```
```vue
```
```angularjs
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import * as formula from "@jspreadsheet/formula-pro";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('###license###');
// Set the extensions
jspreadsheet.setExtensions({ formula });
@Component({
standalone: true,
selector: "app-root",
template: ``
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
[
"Expected",
"Actual",
"Match"
],
[
100,
100,
"=DELTA(A2,B2)"
],
[
250,
245,
"=DELTA(A3,B3)"
],
[
75,
75,
"=DELTA(A4,B4)"
],
[
180,
185,
"=DELTA(A5,B5)"
]
]
}]
});
}
}
```
--------------------------------
### Initialize Formula Pro in Browser
Source: https://github.com/jspreadsheet/pro/blob/master/docs/products/formulas.md
Standalone setup for browser environments including license activation and precision adjustment.
```html
```
--------------------------------
### Getting Started with Top Menu Plugin
Source: https://github.com/jspreadsheet/pro/blob/master/docs/plugins/topmenu.md
Guides on how to include and initialize the Top Menu plugin in your Jspreadsheet project, covering HTML setup, CDN, NPM, and basic initialization.
```APIDOC
## Get Started
### Header on page
```html
// Initialize plugin on jSpreadsheet
```
### CDN
```html
```
### NPM
```bash
npm install @jspreadsheet/topmenu
```
```javascript
import jss_topmenu from '@jspreadsheet/topmenu';
```
```
--------------------------------
### GET /api/:guid - Get Spreadsheet Configuration
Source: https://github.com/jspreadsheet/pro/blob/master/docs/docs/server/api/others.md
Retrieves the configuration settings for a specified spreadsheet.
```APIDOC
## GET /api/:guid
### Description
Get spreadsheet config.
### Method
GET
### Endpoint
/api/:guid
### Parameters
#### Path Parameters
- **guid** (string) - Required - The unique identifier of the spreadsheet.
### Request Example
```javascript
import { Client } from "@intrasheets/client";
const client = new Client({
baseUrl: "http://localhost:8009/api",
token: "YOUR_AUTH_TOKEN"
});
const guid = '15eb1171-5a64-45bf-be96-f52b6125a045';
const spreadsheet = client.getSpreadsheet(guid);
spreadsheet.getConfig().then((config) => {
console.log(config);
});
```
#### Manual request
```
https://jspreadsheet.com/api/15eb1171-5a64-45bf-be96-f52b6125a045
```
### Response
#### Success Response (200)
- **config** (object) - The configuration object of the spreadsheet.
```
--------------------------------
### LET function usage examples
Source: https://github.com/jspreadsheet/pro/blob/master/docs/docs/formulas/functions/let.md
Examples demonstrating how to assign names to calculations and use them within formulas.
```text
LET(x, A1 + B1) + LET(y, A2 + B2) returns the sum of the values in cells A1 through B2, with the intermediate results stored in the names x and y, respectively
LET(area, PI() * radius ^ 2) returns the area of a circle with radius defined elsewhere in the worksheet
LET(total_sales, SUM(A1:A10)) / LET(num_salespeople, COUNTA(B1:B10)) returns the average sales per salesperson for the range A1:A10, with the intermediate results stored in the names total_sales and num_salespeople, respectively.
```
--------------------------------
### Installation
Source: https://github.com/jspreadsheet/pro/blob/master/docs/products/topmenu.md
Instructions for installing the Top Menu extension using NPM or a CDN.
```APIDOC
## Installation
### Using NPM
```bash
$ npm install @jspreadsheet/topmenu
```
### Using a CDN
```html
```
```
--------------------------------
### Install Client API
Source: https://github.com/jspreadsheet/pro/blob/master/docs/docs/server/api.md
Install the client-side API package.
```bash
npm install @jspreadsheet/client-api
```
--------------------------------
### Vue Topmenu Setup
Source: https://github.com/jspreadsheet/pro/blob/master/docs/products/topmenu.md
Implement the Topmenu extension in a Vue.js application using the Jspreadsheet Vue component. This example shows the template and script setup.
```vue