### Install Project Dependencies and Start Development Server

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/spreadjs-with-individual-modules/spreadjs-with-rollup

Installs all project dependencies defined in package.json and starts the Rollup development server.

```shell
npm install
npm run start
```

--------------------------------

### Complete Presence Server Example

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-presence/presence-server

A full example demonstrating the setup of a SpreadJS collaboration server with both OT and Presence features enabled.

```typescript
import { createServer } from 'http';
import { Server } from 'js-collaboration';
import * as OT from 'js-collaboration-ot';
import { presenceFeature } from 'js-collaboration-presence';

OT.TypesManager.register(xx.type);

const httpServer = createServer();
const server = new Server({ httpServer });

server.useFeature(OT.documentFeature());
server.useFeature(presenceFeature());

httpServer.listen(8080);
```

--------------------------------

### Complete Server Initialization Example

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/initalizing-documentservices

A full example demonstrating the registration of an OT type, server creation, and integration of the OT document feature.

```typescript
import { Server } from '@mescius/js-collaboration';
import { documentFeature, TypesManager } from '@mescius/js-collaboration-ot';

// Define the OT Type
const textType = {
    uri: 'text',
    create: (data) => data || '',
    transform: (op1, op2, side) => {
        if (op1.pos < op2.pos) return op1;
        return { pos: op1.pos + op2.text.length, text: op1.text };
    },
    apply: (snapshot, op) => {
        return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
    }
};
// Register the OT Type
TypesManager.register(textType);

// Create the server
const server = new Server({ port: 8080 });

// Integrate OT functionality
server.useFeature(documentFeature());

// Optional: Listen for connection events
server.on('connect', ({ connection }) => {
    console.log(`Client ${connection.id} has connected`);
});
```

--------------------------------

### Get and Set Slicer Border Width

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.SlicerBorder

Demonstrates how to create a slicer, style its border, and then get and set the border width using the borderWidth() method. This example requires a SpreadJS workbook setup.

```javascript
//create a table
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
//style info
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
var border = new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green");

console.log(border.borderWidth()); // 3
border.borderWidth(5);
console.log(border.borderWidth()); // 5

hstyle.borderBottom(border);
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.hoveredSelectedItemWithDataStyle(hstyle);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
slicer.style(style1);
```

--------------------------------

### Set and Get Pivot Table Position

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1

Illustrates how to set the starting row, column, and sheet name for a pivot table, and then retrieve its position. This example requires a workbook, source data, and an existing pivot table.

```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var sourceSheet = spread.getSheet(0);
var sheet = spread.getSheet(1);
var toSheet = spread.getSheet(2);
var sourceData = [["Date","Buyer","Type","Amount"],
                  ["01-Jan","Mom","Fuel",74],
                  ["15-Jan","Mom","Food",235],
                  ["17-Jan","Dad","Sports",20],
                  ["21-Jan","Kelly","Books",125]];
sourceSheet.setArray(0, 0, sourceData );
sourceSheet.tables.add('sourceData', 0, 0, 5, 4);
var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
var options = {showRowHeader: true, showColumnHeader: true};
var pivotTable = sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
pivotTable.position(10,10,toSheet.name());
pivotTable.position(); //{row:10,col:10, sheetName: "Sheet3"}
```

--------------------------------

### Initialize Project Folder and Navigate

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer

Create a new project folder and navigate into it using bash commands.

```bash
mkdir spread-collaboration
cd spread-collaboration
```

--------------------------------

### Start Collaboration Server

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-

Navigate to the collaboration-server directory and run the start script to launch the backend server. Ensure the server is running to enable real-time synchronization.

```auto
cd collaboration-server
npm run start
```

--------------------------------

### Get Custom SparklineEx Name

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Barcode.Codabar

Illustrates how to create a custom SparklineEx, define its necessary methods, and then retrieve its name using the name() method. This example shows the basic setup for a custom sparkline and how to access its identifier.

```javascript
window.MySparklineEx = function(color) {
    GC.Spread.Sheets.Sparklines.SparklineEx.apply(this, arguments);
    this.typeName = 'MySparklineEx';
    this.color = color;
}
MySparklineEx.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
MySparklineEx.prototype.createFunction = function () {
    var func = new GC.Spread.CalcEngine.Functions.Function('CIRCLE', 0, 0);
    func.evaluate = function (args) {
          return {};
    };
    return func;
 };
MySparklineEx.prototype.paint = function (context, value, x, y, width, height) {
     context.beginPath();
     context.arc(x + width / 2, y + height / 2, (Math.min(width, height) - 6) / 2, 0, Math.PI * 2);
     context.strokeStyle = this.color;
     context.stroke();
};
let sparkline = new MySparklineEx('green');
console.log(sparkline.name())
```

--------------------------------

### Create Project Directory and Initialize npm

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-

Creates a new directory for the collaboration server and initializes it with npm. This is the first step in setting up the project.

```bash
mkdir	collaboration-server &&	cd	collaboration-server
npm init -y
```

--------------------------------

### Getting Outline Start Index in SpreadJS

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Outlines.OutlineInfo

Retrieves the start index of a row or column outline group. The start index is inclusive.

```javascript
activeSheet.rowOutlines.group(2, 10);
var outlineInfo = activeSheet.rowOutlines.find(2, 0);
console.log(outlineInfo.start); // 2
```

--------------------------------

### Initialize Project Folder

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration/tutorial-real-time-chat-room

Create a new directory for the chat room project and navigate into it.

```bash
mkdir chat-room
cd chat-room
```

--------------------------------

### Get and Set CameraShape Start Row

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Retrieves the current starting row index of a shape and sets a new starting row index.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startRow();
heart.startRow(n + 2);
```

--------------------------------

### Create Frontend Project Directory

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-

Initializes a new project directory and navigates into it.

```bash
mkdir collaboration-client && cd collaboration-client
npm init -y
```

--------------------------------

### Get and Set CameraShape Start Column

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Retrieves the current starting column index of a shape and sets a new starting column index.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startColumn();
heart.startColumn(n + 2);
```

--------------------------------

### Fetch and View Creation Example

Source: https://developer.mescius.com/spreadjs/docs/features/data-manager/table-operations/fetch---reload

Shows how to use fetch to initialize a table, create a view, and then bind the view to a TableSheet. Always call fetch before using the table.

```javascript
const table = dataManager.addTable("products", {
  data: [
    { id: 1, name: "Pen" },
    { id: 2, name: "Notebook" }
  ]
});

const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

// Always call fetch before using the table
table.fetch().then(function () {

  const view = table.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

});
```

--------------------------------

### Get or Set Chart Start Column Offset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

Use startColumnOffset to get or set the offset relative to the chart's start column. A numerical value sets the offset, while calling without arguments retrieves it.

```javascript
let colOffset = sheet.charts.all()[0].startColumnOffset();
sheet.charts.all()[0].startColumnOffset(10);
```

--------------------------------

### Start Collaboration Server with npm

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration/tutorial-real-time-chat-room/tutorial-add-authentication

Execute this command to start the backend server for the real-time chat room.

```bash
npm run start
```

--------------------------------

### Get Sheet Count in SpreadJS

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook

This example demonstrates how to get the total number of sheets in the workbook and display it.

```javascript
//This example uses the getSheetCount method.
var index = spread.getSheetCount();
alert(index);
```

--------------------------------

### Initialize Project Folder

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/tutorial-real-time-collaborative-text-editor

Create a new project folder and navigate into it using bash commands.

```bash
mkdir ot-text-editor
cd ot-text-editor
```

--------------------------------

### Initialize Workbook with Options

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook

Demonstrates creating a new Workbook instance with different configuration options for sheet count and appearance.

```javascript
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3, font:"12pt Arial"});
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3, newTabVisible:false});
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3, tabEditable: false });
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3, tabStripVisible:false});
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3, allowUserResize:false});
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3, allowUserZoom: false});
```

--------------------------------

### Get or Set Chart Start Row Offset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

Use startRowOffset to get or set the offset relative to the chart's start row. Provide a numerical value to set the offset, or call without arguments to retrieve it.

```javascript
let rowOffset = sheet.charts.all()[0].startRowOffset();
sheet.charts.all()[0].startRowOffset(5);
```

--------------------------------

### Create React Project

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/designer-javaScript-frameworks/designer-react

Use these commands to create a new React project and start the development server.

```Shell
npm install -g create-react-app
create-react-app designercomponent
cd designercomponent
npm start
```

--------------------------------

### Get or Set Chart Start Row

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

The startRow method allows you to get or set the starting row index for the chart's position. Pass a number to set the row, or call without arguments to retrieve the current value.

```javascript
let startRow = sheet.charts.all()[0].startRow();
sheet.charts.all()[0].startRow(10);
```

--------------------------------

### Navigate and Run Next.js Project

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/spreadjs-with-nextjs

After creating the project, navigate into the project directory and start the development server.

```bash
cd nextjs-with-spreadjs
npm run dev
```

--------------------------------

### Get or Set Chart Start Column

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

The startColumn method is used to get or set the starting column index for the chart's position. Provide a number to set the column, or call without arguments to retrieve the current value.

```javascript
let startCol = sheet.charts.all()[0].startColumn();
sheet.charts.all()[0].startColumn(5);
```

--------------------------------

### FINDB Function Example 2

Source: https://developer.mescius.com/spreadjs/docs/formulareference/FormulaFunctions/text-functions/FINDB

Finds the starting position of 'to' within 'rheabuto'. The search starts from the first character.

```javascript
FINDB("to","rheabuto")
```

--------------------------------

### Initialize Project and Create Source Directory

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/spreadjs-with-individual-modules/spreadjs-with-rollup

Creates a new project directory and a source folder for the application code.

```shell
mkdir -p my-rollup-project/src
cd my-rollup-project
```

--------------------------------

### FINDB Function Example 1

Source: https://developer.mescius.com/spreadjs/docs/formulareference/FormulaFunctions/text-functions/FINDB

Finds the starting position of 'ea' within 'rheabuto'. The search starts from the first character.

```javascript
FINDB("ea","rheabuto")
```

--------------------------------

### Run the Project

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/UsingSpreadSheetswithReact

Start the development server to see the React application with SpreadJS integrated.

```bash
npm run dev
```

--------------------------------

### Complete SharedDoc Initialization Example

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/initalizing-shareddoc

A comprehensive example demonstrating the complete process of initializing a SharedDoc, including OT type registration, client connection, and SharedDoc instantiation.

```typescript
import { Client } from '@mescius/js-collaboration-client';
import { SharedDoc, TypesManager } from '@mescius/js-collaboration-ot-client';

// Define the OT Type
const textType = {
    uri: 'rich-text-ot-type',
    create: (data) => data || '', // Initialize as an empty string
    transform: (op1, op2, side) => {
        if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
            return { pos: op1.pos + op2.text.length, text: op1.text };
        }
        return op1;
    },
    apply: (snapshot, op) => {
        return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
    }
};

// Register the OT Type
TypesManager.register(textType);

// Initialize the client
const client = new Client();
const connection = client.connect('room1');
const doc = new SharedDoc(connection);
```

--------------------------------

### Get Formula as Text

Source: https://developer.mescius.com/spreadjs/docs/formulareference/FormulaFunctions/lookup-reference-functions/FORMULATEXT

This example shows how to use the FORMULATEXT function to get the formula of cell B7 as a string.

```SpreadJS Formulas
FORMULATEXT(B7)
```

--------------------------------

### startColumn

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.ShapeBase

Gets or sets the starting column index of the shape position. If no value is provided, it returns the current starting column index.

```APIDOC
## startColumn

### Description
Gets or sets the starting column index of the shape position.

### Method
`startColumn(value?: number): any`

### Parameters
#### Path Parameters
- **value** (number) - Optional - The starting column index of the shape position.

### Returns
`any` - If no value is set, returns the starting column index of the shape.

### Example
```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startColumn();
heart.startColumn(n + 2);
```
```

--------------------------------

### Get Row Count

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet

Retrieves the number of rows in the specified sheet area. The example shows how to get the row count for the viewport.

```javascript
var count = activeSheet.getRowCount(GC.Spread.Sheets.SheetArea.viewport);
alert(count);
```

--------------------------------

### Create React App Project

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/spreadjs-with-individual-modules/spreadjs-with-create-react-app

Use these commands to create a new React application and start the development server.

```shell
npx create-react-app my-app
cd my-app 
npm start
```

--------------------------------

### Get and Set CameraShape Start Row Offset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Retrieves the current offset relative to the start row of a shape and sets a new offset.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startRowOffset();
heart.startRowOffset(0);
```

--------------------------------

### Build and Run Collaboration Server

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/tutorial-real-time-collaborative-text-editor/tutorial-configure-database-adapter

Build the client-side code and start the collaboration server to enable real-time editing with database persistence.

```bash
npm run build
npm run start
```

--------------------------------

### Initial Load and Later Reload Example

Source: https://developer.mescius.com/spreadjs/docs/features/data-manager/table-operations/fetch---reload

Demonstrates an initial data load and subsequent reload triggered by a button click. It shows setting up a data manager, adding a table with a remote source, creating a view, and handling the reload event.

```javascript
const dataManager = spread.dataManager();
const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

const products = dataManager.addTable("products", {
  remote: {
    read: {
      url: "https://demodata.mescius.io/northwind/api/v1/products",
    }
  }
});

// Initial load
products.fetch().then(() => {

  const view = products.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

  // Later: force reload
  document.getElementById("refreshBtn").addEventListener("click", () => {
    products.fetch(true).then(() => {
      tableSheet.setDataView(view);
      console.log("Table data reloaded.");
    });
  });

});
```

--------------------------------

### Get and Set CameraShape Start Column Offset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Retrieves the current offset relative to the start column of a shape and sets a new offset.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startColumnOffset();
heart.startColumnOffset(0);
```

--------------------------------

### Install npm Packages

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-presence/presence-client

Install the necessary npm packages for the collaboration client and presence client.

```bash
npm install @mescius/js-collaboration-client @mescius/js-collaboration-presence-client
```

--------------------------------

### Get Row Height

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet

Retrieves the height of a specified row in pixels or its dynamic size. The example demonstrates getting the height for a row in the viewport.

```javascript
var rheight = activeSheet.getRowHeight(1,GC.Spread.Sheets.SheetArea.viewport);
alert(rheight);
```

--------------------------------

### Get and Set Printability for Shape

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Gets or sets whether this shape is printable. This example shows how to disable printing for a shape and then print the workbook.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var state = heart.canPrint(); // Get whether the shape is printable, defaulat value is true.
workbook.print(); // The heart shape is printed.
heart.canPrint(false);
workbook.print(); // The heart shape is not printed.
```

--------------------------------

### Create Basic Directory Structure

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration/tutorial-real-time-chat-room

Set up the essential files and folders for the chat room application, including server-side logic, client-side files, and configuration files.

```bash
/ (project root)
├── public/
│   ├── index.html      # Main page
│   ├── styles.css      # Style file
│   └── client.js       # Client-side logic
├── server.js           # Server-side logic
├── package.json        # Project configuration
└── webpack.config.js   # Webpack configuration
```

--------------------------------

### Get and Set Allow Rotate for Shape

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Gets or sets whether to disable rotating the shape. This example demonstrates toggling the allowRotate property.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var state = heart.allowRotate();
heart.allowRotate(!state);
```

--------------------------------

### Install Server and Client Dependencies

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration/tutorial-real-time-chat-room

Install the necessary npm packages for the server and client-side collaboration.

```bash
npm install @mescius/js-collaboration @mescius/js-collaboration-client express
```

--------------------------------

### Create a Report Sheet with Sample Data and Pagination

Source: https://developer.mescius.com/spreadjs/docs/features/reportsheet/templatesheet/fill-blank-data

Generates sample data, configures a table, creates a report sheet with a template, sets up data binding, and applies pagination settings. This example demonstrates how to handle data that doesn't divide evenly by the page size.

```javascript
let spread = new GC.Spread.Sheets.Workbook("spreadjs-host");

// Create Data Source
var sheet = spread.getActiveSheet();
const headers = ['orderId', 'name', 'employeeId', 'unitPrice', 'quantity'];
const rows = [];
const productNames = ['Pencil', 'Notebook', 'Eraser'];
for (let i = 1; i <= 23; i++) {
  const name = productNames[(i - 1) % productNames.length]; // 1->Pencil, 2->Notebook, 3->Eraser, 4->Pencil...
  rows.push([
    `A${String(i).padStart(3, '0')}`,
    name,
    String((i % 2) + 1),
    1.5,
    (i % 3) + 1
  ]);
}
sheet.setArray(0, 0, [headers, ...rows]);
sheet.tables.add('table1', 0, 0, 24, 5, GC.Spread.Sheets.Tables.TableThemes.light1);
// convert table1 to a data manager table
sheet.tables.convertToDataTable('table1');

// Create a Template Sheet
const reportSheet = spread.addSheetTab(1, 'report', GC.Spread.Sheets.SheetType.reportSheet);
reportSheet.renderMode('Design');
const templateSheet = reportSheet.getTemplate();

// set value and binding for the template
const columns = ['name','employeeId', 'orderId', 'unitPrice', 'quantity'];
columns.forEach((columnName, i) => {
    templateSheet.setValue(0, i, `${columnName[0].toUpperCase()}${columnName.substring(1)}`);
    templateSheet.setTemplateCell(1, i, {
      type: 'List',
      binding: `table1[${columnName}]`,
    });
});

// Set Table End
templateSheet.setValue(2,0,'Current Page:');
templateSheet.setFormula(2,1,'=R.CURRENTPAGE()');
templateSheet.setValue(2,2,'Total Pages:');
templateSheet.setFormula(2,3,'=R.PAGESCOUNT()');

// set border style for the template
const style = new GC.Spread.Sheets.Style();
style.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
templateSheet.getRange('A:E').setStyle(style);

// Set Pagination
templateSheet.setPaginationSetting({
   rowPagination: {
        paginationDataCell: 'C2',
        rowCountPerPage: 10,
   },
   titleRow: {
        start: 0,
        end: 0,
   },
   endRow: {
        start: 2,
        end: 2,
   },
});

// refresh the report
reportSheet.refresh();
reportSheet.renderMode('PaginatedPreview');
```

--------------------------------

### Get and Set Allow Move for Shape

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Gets or sets whether to disable moving the shape. This example demonstrates toggling the allowMove property.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var state = heart.allowMove();
heart.allowMove(!state);
```

--------------------------------

### Install Collaboration Server Package

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration/initalizing-server

Install the necessary server package using npm.

```bash
npm install @mescius/js-collaboration
```

--------------------------------

### startRowOffset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTableItemSlicer

Gets or sets the startRowOffset of the slicer. This property controls the offset from the starting row. Returns the slicer instance when setting, or the current startRowOffset when getting.

```APIDOC
## startRowOffset

### Description
Gets or sets the startRowOffset of the slicer. This property controls the offset from the starting row.

### Method
`startRowOffset(value?: number): any`

### Parameters
#### Path Parameters
- **value** (number) - Optional - The new start row offset value to set.

### Returns
`any` - If a value is provided, returns the slicer instance. If no value is provided, returns the current start row offset.
```

--------------------------------

### JavaScript: Set and Get Start Connector Info

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.ConnectorShape

Demonstrates setting the start connector for a shape and then retrieving its information. This is useful for establishing connections between shapes.

```javascript
var shape1 = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 62 * 9, 0, 200, 200);
var shape2 = sheet.shapes.addConnector("myShape", GC.Spread.Sheets.Shapes.ConnectorType.straight, 220, 120, 300, 120);
shape2.startConnector({name: shape1.name(), index: 2});
console.log(shape2.startConnector());
```

--------------------------------

### Complete Presence Client Example

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-presence/presence-client

A comprehensive example demonstrating the integration of the presence client, including subscription, state submission, and event handling. Ensure all placeholder values ('xxx') are replaced with actual data.

```typescript
import { Client } from "@mescius/js-collaboration-client";
import { Presence } from "@mescius/js-collaboration-presence-client";

const conn = new Client('ws://localhost:8080/').connect('room1');
const presence = new Presence(conn);
const uiComponent = new xxx.uiComponent(); // Replace with your UI component

presence.subscribe().then(() => {
    uiComponent.showPresences(presence.otherStates); // Replace with your UI component's function to display presences.

    presence.submitLocalState({ userId: xxx, selection: xxx }); // Replace with actual user ID and selection information

    uiComponent.on('selectionChanges', () => {
        // Partial update of presence, only updating selection, Replace with actual selection information.
        presence.submitLocalStateField('selection', xxx);
    });

    presence.on('add', () => {
        uiComponent.showPresences(presence.otherStates);
    });
    presence.on('update', () => {
        uiComponent.showPresences(presence.otherStates);
    });
    presence.on('remove', () => {
        uiComponent.showPresences(presence.otherStates);
    });
});
```

--------------------------------

### startRow

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Gets or sets the starting row index of the shape position. This property determines the vertical starting point of the shape within the sheet grid.

```APIDOC
## startRow

Gets or sets the starting row index of the shape position.

### Method Signature

▸ **startRow**(`value?`): `any`

### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `number` | The starting row index of the shape position. |

### Returns

`any`

If no value is set, returns the starting row index of the shape.

### Example

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startRow();
heart.startRow(n + 2);
```
```

--------------------------------

### Initialize and Configure NameBox Options

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.NameBox.NameBox

Demonstrates how to create a NameBox instance and set various configuration options to control its behavior, such as disabling custom name addition and navigation, hiding the custom name list, and setting the maximum height of the dropdown.

```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var div = document.createElement('div');
div.id = 'nameBox';
div.style.width = '300px';
div.style.height = '50px';
document.getElementById('panel').appendChild(div);

var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('nameBox'), spread);
nameBox.options.enableAddCustomName = false; // cannot add custom name with inputting in name box input box now.
nameBox.options.enableNavigateToRange = false; // cannot swap the selected range to the value of the name box input box now.
nameBox.options.showCustomNameList = false; // cannot open the custom name list by down arrow button right side and the button will be hidden now.
nameBox.options.dropDownMaxHeight = 100; // the custom name list host DOM element height will no larger than 100px now.
```

--------------------------------

### Create and Configure ReportSheet

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Report.ReportSheet

This example shows how to create a new ReportSheet, load data from a remote source, and configure the template sheet with styles, column widths, and data bindings. The ReportSheet is then refreshed to display the data.

```javascript
const spread = new GC.Spread.Sheets.Workbook('spread-host', { sheetCount: 0 });
const reportSheet = spread.addSheetTab(0, 'orders-report', GC.Spread.Sheets.SheetType.reportSheet);
const templateSheet = reportSheet.getTemplate();

const ordersTable = spread.dataManager().addTable('Orders', {
    remote: {
        read: {
            url: 'https://demodata.mescius.io/northwind/api/v1/orders'
        }
    }
});

// load the data from remote.
ordersTable.fetch().then(() => {
    // set style for the template.
    const headerStyle = new GC.Spread.Sheets.Style();
    headerStyle.backColor = '#80CBC4';
    headerStyle.foreColor = '#424242';
    headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
    headerStyle.font = '12px Maine';
    const dataStyle = new GC.Spread.Sheets.Style();
    dataStyle.foreColor = '#424242';
    dataStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
    dataStyle.font = '12px Maine';
    const border = new GC.Spread.Sheets.LineBorder('#E0E0E0', 1);
    dataStyle.borderBottom = border;
    dataStyle.borderTop = border;
    dataStyle.borderLeft = border;
    dataStyle.borderRight = border;
    const colWidthArray = [90, 90, 90, 80, 220, 150, 110];
    colWidthArray.forEach((width, i) => {
        templateSheet.setColumnWidth(i, width);
    });
    templateSheet.getRange('A1:G1').setStyle(headerStyle);
    templateSheet.getRange('A2:G2').setStyle(dataStyle);
    templateSheet.setFormatter(1, 2, 'yyyy-MM-dd');

    // set value and binding for the template.
    const columns = ['orderId', 'customerId', 'orderDate', 'freight', 'shipName', 'shipCity', 'shipCountry'];
    columns.forEach((columnName, i) => {
        templateSheet.setValue(0, i, `${columnName[0].toUpperCase()}${columnName.substring(1)}`);
        templateSheet.setTemplateCell(1, i, {
            type: 'List',
            binding: `Orders[${columnName}]`,
        });
    });

    reportSheet.refresh();
});
```

--------------------------------

### startColumn

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Gets or sets the starting column index of the shape position. This property determines the horizontal starting point of the shape within the sheet grid.

```APIDOC
## startColumn

Gets or sets the starting column index of the shape position.

### Method Signature

▸ **startColumn**(`value?`): `any`

### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `number` | The starting column index of the shape position. |

### Returns

`any`

If no value is set, returns the starting column index of the shape position.

### Example

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startColumn();
heart.startColumn(n + 2);
```
```

--------------------------------

### Create Vue Project

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/designer-javaScript-frameworks/designer-vue

Initializes a new Vue project. Select 'Yes' for TypeScript during setup.

```Shell
npm init vue@latest sjs-designer-vue-app
cd sjs-designer-vue-app
```

--------------------------------

### Get Active Row Index in SpreadJS

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet

This example demonstrates how to get the active row index after setting the active cell and binding to cell events.

```javascript
//This example gets the active row.
sheet.setActiveCell(5,5);
alert(sheet.getActiveColumnIndex());
alert(sheet.getActiveRowIndex());
spread.bind(GC.Spread.Sheets.Events.EnterCell, function (event, data) {
    alert(data.col);
    alert(data.row);
  });
spread.bind(GC.Spread.Sheets.Events.LeaveCell, function (event, data) {
    alert(data.col);
    alert(data.row);
  });
```

--------------------------------

### Create a Create Vue Project

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/spreadjs-with-individual-modules/spreadjs-with-create-vue

Use these commands to create a new Create Vue project and start the development server.

```shell
npm create vue@3
cd vue-project
npm install
npm run dev
```

--------------------------------

### Get Index of Spilled Cells in ReportSheet

Source: https://developer.mescius.com/spreadjs/docs/llms.txt

This tutorial explains how to get the index of spilled cells in a SpreadJS ReportSheet. It includes UI and code examples.

```javascript
import * as GC from "@grapecity/spread-sheets";

const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
const sheet = spread.getActiveSheet();

// Set a formula that spills
sheet.setFormula(0, 0, "=SEQUENCE(5)");

// Get the range of spilled cells
const spilledRange = sheet.getSpilledRange(0, 0);

// Get the index of the spilled cells
if (spilledRange) {
  console.log("Spilled range: " + spilledRange.toString());
  // You can then use spilledRange.row, spilledRange.col, spilledRange.rowCount, spilledRange.colCount
}
```

--------------------------------

### Get and Set Resize Mode for Shape

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.CameraShape

Gets or sets the resize mode of the shape. This example sets the resize mode to maintain aspect ratio.

```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var state = heart.allowResize();
heart.allowResize(GC.Spread.Sheets.Shapes.ResizeMode.aspect);
```

--------------------------------

### Initialize Node.js Project

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer

Create a package.json file for a Node.js project using npm init.

```bash
npm init -y
```

--------------------------------

### startRowOffset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.PictureShape

Gets or sets the offset relative to the start row of the shape.

```APIDOC
## startRowOffset

### Description
Gets or sets the offset relative to the start row of the shape.

### Method
`startRowOffset(value?: number): any`

### Parameters
#### Path Parameters
- **value** (number) - Optional - The offset relative to the start row of the shape.

### Returns
`any` - If no value is set, returns the offset relative to the start row of the shape.

### Example
```javascript
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var n = heart.startRowOffset();
heart.startRowOffset(0);
```
```

--------------------------------

### Define Project Scripts and Dependencies

Source: https://developer.mescius.com/spreadjs/docs/javascript-frameworks/spreadjs-with-individual-modules/spreadjs-with-rollup

Configures the package.json file with project metadata, scripts for starting the development server, and necessary development dependencies.

```json
{
    "name": "my-rollup-project",    
    "version": "1.0.0",    
    "type": "module",    
    "description": "",    
    "scripts": {
        "start": "rollup --config"    
    },
    "keywords": [],    
    "author": "",    
    "license": "ISC",    
    "devDependencies": {
        "@rollup/plugin-alias": "^5.0.0",        
        "@rollup/plugin-commonjs": "^25.0.2",       
        "@rollup/plugin-node-resolve": "^15.1.0",       
        "rollup": "^3.26.0"   
         }
    }
```

--------------------------------

### Get and Set startRow for Slicer

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTableItemSlicer

Shows how to get the current startRow of a slicer and how to set a new value. This property controls the starting row position of the slicer.

```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var pivotTable = activeSheet.pivotTables.add("pivotTable1", "table1", 6, 1);
var slicer = activeSheet.slicers.add("slicer", "pivotTable1", "Name", GC.Spread.Sheets.Slicers.SlicerStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
var oldValue = slicer.startRow();
console.log(oldValue);
slicer.startRow(10);
var newValue = slicer.startRow();
console.log(newValue);
```

--------------------------------

### Execute Database Initialization Script

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/tutorial-real-time-collaborative-text-editor/tutorial-configure-database-adapter

Run the Node.js script to create the database tables required for collaboration data persistence.

```bash
node init-database.js
```

--------------------------------

### Install Server and Client Dependencies

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/tutorial-real-time-collaborative-text-editor

Install the necessary npm packages for js-collaboration, js-collaboration-ot, express, the client-side libraries, and Quill.

```bash
npm install @mescius/js-collaboration @mescius/js-collaboration-ot express
npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client quill
npm install rich-text
```

--------------------------------

### Get Rank of Spilled Cells using R.RANK

Source: https://developer.mescius.com/spreadjs/docs/features/reportsheet/templatesheet/formula-functions/hierarchical-cell-index/get-rank

Use the R.RANK formula to get the rank of spilled cells. This example also shows R.INDEX for context.

```javascript
templateSheet.setFormula(1, 3, "R.RANK(C2)");
templateSheet.setFormula(1, 4, "R.INDEX(C2,A2)");
```

--------------------------------

### firstPageNumber

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Print.PrintInfo

Gets or sets the starting page number for printing. Accepts a number.

```APIDOC
## firstPageNumber

### Description
Gets or sets the page number to print on the first page when printing starts.

### Method
`firstPageNumber(value?: number): any`

### Parameters
#### Path Parameters
- `value` (number) - Optional - The starting page number.

### Returns
`any` - Returns the print setting information if a value is set, otherwise returns the current first page number.
```

--------------------------------

### Create and Configure a Table Theme

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Tables.TableTheme

This example demonstrates how to create a new TableTheme, define styles for the entire table and its header row, and then add a table to the active sheet with these styles.

```javascript
//This example creates a table.
var tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
var thinBorder = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.dotted);
tableStyle.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle("aliceblue", "green", "bold 10pt arial", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder));
var tableStyleInfo = new GC.Spread.Sheets.Tables.TableStyle(
    "black",
    "white",
    "bold 11pt arial",
    new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin),
    new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.thick),
    new GC.Spread.Sheets.LineBorder("yellow", GC.Spread.Sheets.LineStyle.thin),
    new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.thick));
tableStyle.headerRowStyle(tableStyleInfo);
var table = activeSheet.tables.add("table1", 1, 1, 5, 5, tableStyle);
```

--------------------------------

### Get and Set startColumn for Slicer

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTableItemSlicer

Demonstrates how to get the current start column of a slicer and then set it to a new value. The startColumn property defines the column where the slicer begins.

```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var pivotTable = activeSheet.pivotTables.add("pivotTable1", "table1", 6, 1);
var slicer = activeSheet.slicers.add("slicer", "pivotTable1", "Name", GC.Spread.Sheets.Slicers.SlicerStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
var oldValue = slicer.startColumn();
console.log(oldValue);
slicer.startColumn(10);
var newValue = slicer.startColumn();
console.log(newValue);
```

--------------------------------

### Create and Initialize TableSlicerData

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.TableSlicerData

This example demonstrates how to create a table, initialize TableSlicerData with that table, and then create an ItemSlicer using the TableSlicerData. It also shows how to append the slicer's DOM element to a host element.

```javascript
//This example creates a slicer for the table.
var activeSheet = spread.getActiveSheet();
//create table
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table);
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
document.getElementById("slicerHost").append(slicer.getDOMElement());
```

--------------------------------

### startRowOffset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

Gets or sets the offset relative to the start row of the chart. If no value is set, returns the offset relative to the start row of the chart; otherwise, returns the chart.

```APIDOC
## startRowOffset

### Description
Gets or sets the offset relative to the start row of the chart.

### Method
GET/SET

### Parameters
#### Path Parameters
- **value** (number) - Optional - The offset relative to the start row of the chart.

### Returns
#### Success Response (200)
- **any** - If no value is set, returns the offset relative to the start row of the chart; otherwise, returns the chart.
```

--------------------------------

### Create a Table with Sample Data

Source: https://developer.mescius.com/spreadjs/docs/features/data-manager/view/view-basics-

Creates a table instance using the DataManager and populates it with sample data.

```javascript
var myTable = dataManager.addTable("myTable", {
    data: sampleData
});
```

--------------------------------

### startRow

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

Gets or sets the starting row index of the chart position. If no value is set, returns the starting row index of the chart position; otherwise, returns the chart.

```APIDOC
## startRow

### Description
Gets or sets the starting row index of the chart position.

### Method
GET/SET

### Parameters
#### Path Parameters
- **value** (number) - Optional - The starting row index of the chart position.

### Returns
#### Success Response (200)
- **any** - If no value is set, returns the starting row index of the chart position; otherwise, returns the chart.
```

--------------------------------

### Install js-collaboration-client

Source: https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration/initalizing-client

Install the npm package for the js-collaboration-client library.

```bash
npm install @mescius/js-collaboration-client
```

--------------------------------

### startColumnOffset

Source: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart

Gets or sets the offset relative to the start column of the chart. If no value is set, returns the offset relative to the start column of the chart; otherwise, returns the chart.

```APIDOC
## startColumnOffset

### Description
Gets or sets the offset relative to the start column of the chart.

### Method
GET/SET

### Parameters
#### Path Parameters
- **value** (number) - Optional - The offset relative to the start column of the chart.

### Returns
#### Success Response (200)
- **any** - If no value is set, returns the offset relative to the start column of the chart; otherwise, returns the chart.
```

--------------------------------

### Initialize Designer with Custom Configuration

Source: https://developer.mescius.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.Designer

Demonstrates how to create a new Designer instance with a custom configuration object. The configuration allows for defining custom ribbon tabs, context menu items, file menu buttons, and side panel layouts.

```javascript
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var customConfig = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
var customDesigner = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv2"), customConfig);
```