========================
CODE SNIPPETS
========================
TITLE: SpreadJS Designer Installation Guide
DESCRIPTION: Provides step-by-step instructions for installing the SpreadJS Designer application across different platforms (Windows, Mac, Linux), including initial setup and licensing.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/getstarted

LANGUAGE: APIDOC
CODE:
```
Installation Steps:
1. Save the downloaded ZIP file (SpreadJSDesigner.zip) to a temporary directory on your system, and then unzip the files to a directory.
2. Run the setup file for your environment.
3. Run the designer, select the lock icon, and enter your license key to unlock the SpreadJS Designer.

Platform Specific Setups:
  Platform: Windows
  Setup: SpreadJS-Designer.x.x.x.exe

  Platform: Mac
  Setup: SpreadJS-Designer.x.x.x.dmg

  Platform: Linux
  Setup: SpreadJS-Designer.x.x.x.AppImage

Default Designer Folder:
  Install Directory: %Program Files (x86)%\\MESCIUS\\SpreadJS Designer\\x.x.x
  Description: Designer directory for product
```

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

TITLE: Create React Project with create-react-app
DESCRIPTION: This snippet provides commands to set up a new React application using `create-react-app`. It guides the user through global installation, project creation, directory navigation, and starting the development server. This is a foundational step for any React development.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/javascript-frameworks/UsingSpreadSheetswithReact/UsingtheChartElement

LANGUAGE: Shell
CODE:
```
npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start
```

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

TITLE: Full Server-Side Presence Implementation Example
DESCRIPTION: A comprehensive TypeScript example illustrating the setup of an HTTP server, initialization of the `js-collaboration` server, registration of the OT document feature, and integration of the `presenceFeature` for a complete real-time collaboration setup.

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

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

OT.types.register(type);

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

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

httpServer.listen(8080);
```

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

TITLE: Install Dependencies and Start Rollup Build
DESCRIPTION: Executes 'npm install' to install project dependencies and 'npm run start' to trigger the Rollup build process.

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

LANGUAGE: shell
CODE:
```
npm install
npm run start
```

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

TITLE: Initialize Vite Project and Start Development Server
DESCRIPTION: Commands to create a new Vite project, select 'Vanilla' framework with 'TypeScript' variant, navigate into the project directory, install initial dependencies, and start the development server.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/javascript-frameworks/spreadjs-with-individual-modules/spreadjs-with-vite

LANGUAGE: shell
CODE:
```
npm create vite@latest

√ Project name: ... vite-project
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

cd vite-project
npm install
npm run dev
```

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

TITLE: Get or Set Slicer Start Row (startRow) API and Example
DESCRIPTION: Gets or sets the starting row position of the slicer on the sheet. When setting, it accepts a number representing the row index. When getting, it returns the current row index.

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

LANGUAGE: APIDOC
CODE:
```
Method: startRow(value?: number): any
Description: Gets or sets the startRow of the slicer.
Parameters:
  value?: number - The row index to set.
Returns: any - If no value is set, returns the startRow of the slicer; otherwise, returns the slicer.
```

LANGUAGE: JavaScript
CODE:
```
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);
```

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

TITLE: Start Node.js Collaboration Server
DESCRIPTION: Executes the `npm run start` command. This command initiates the Node.js server, making the collaborative application accessible and ready to handle client connections.

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

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Get or Set Slicer Start Column (startColumn) API and Example
DESCRIPTION: Gets or sets the starting column position of the slicer on the sheet. When setting, it accepts a number representing the column index. When getting, it returns the current column index.

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

LANGUAGE: APIDOC
CODE:
```
Method: startColumn(value?: number): any
Description: Gets or sets the startColumn of the slicer.
Parameters:
  value?: number - The column index to set.
Returns: any - If no value is set, returns the startColumn of the slicer; otherwise, returns the slicer.
```

LANGUAGE: JavaScript
CODE:
```
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);
```

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

TITLE: Start Collaborative Workbook Server
DESCRIPTION: Execute the npm start command to launch the configured server, making the collaborative workbook accessible.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-database-adapter

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Create React App Project Setup
DESCRIPTION: Commands to initialize a new Create React App project, navigate into its directory, and start the development server.

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

LANGUAGE: shell
CODE:
```
npx create-react-app my-app
cd my-app
npm start
```

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

TITLE: Get or Set Slicer Start Row Offset (startRowOffset) API and Example
DESCRIPTION: Gets or sets the vertical offset of the slicer from its starting row. This allows fine-tuning the slicer's position within a row. When setting, it accepts a number representing the offset. When getting, it returns the current offset.

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

LANGUAGE: APIDOC
CODE:
```
Method: startRowOffset(value?: number): any
Description: Gets or sets the startRowOffset of the slicer.
Parameters:
  value?: number - The row offset to set.
Returns: any - If no value is set, returns the startRowOffset of the slicer; otherwise, returns the slicer.
```

LANGUAGE: JavaScript
CODE:
```
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.startRowOffset();
console.log(oldValue);
slicer.startRowOffset(15);
var newValue = slicer.startRowOffset();
console.log(newValue);
```

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

TITLE: Start Server with npm
DESCRIPTION: Executes the `start` script defined in the project's `package.json` to launch the backend server component of the application, typically making it accessible via a specified port.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/tutorial-real-time-collaborative-text-editor/tutorial-add-history-functionality

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Get or Set Slicer Start Column Offset (startColumnOffset) API and Example
DESCRIPTION: Gets or sets the horizontal offset of the slicer from its starting column. This allows fine-tuning the slicer's position within a column. When setting, it accepts a number representing the offset. When getting, it returns the current offset.

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

LANGUAGE: APIDOC
CODE:
```
Method: startColumnOffset(value?: number): any
Description: Gets or sets the startColumnOffset of the slicer.
Parameters:
  value?: number - The column offset to set.
Returns: any - If no value is set, returns the startColumnOffset of the slicer; otherwise, returns the slicer.
```

LANGUAGE: JavaScript
CODE:
```
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.startColumnOffset();
console.log(oldValue);
slicer.startColumnOffset(15);
var newValue = slicer.startColumnOffset();
console.log(newValue);
```

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

TITLE: Build Client-Side Application Code
DESCRIPTION: Executes the `npm run build` command. This step compiles and bundles the client-side application code, preparing it for deployment and ensuring all assets are ready.

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

LANGUAGE: bash
CODE:
```
npm run build
```

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

TITLE: Get and Set Slicer Start Row
DESCRIPTION: This example shows how to get and set the startRow property of a slicer in a SpreadJS worksheet. It sets up a workbook, adds a table and a slicer, then retrieves the current start row, updates it, and logs both values.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Slicers.Slicer

LANGUAGE: APIDOC
CODE:
```
Method: startRow(value?)
Description: Gets or sets the startRow of the slicer.
Parameters:
  value?: number
Returns: any (If no value is set, returns the startRow of the slicer; otherwise, returns the slicer.)
```

LANGUAGE: javascript
CODE:
```
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 slicer = activeSheet.slicers.add("slicer", "table1", "Name");
var oldValue = slicer.startRow();
console.log(oldValue);
slicer.startRow(10);
var newValue = slicer.startRow();
console.log(newValue);
```

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

TITLE: Install Project Dependencies
DESCRIPTION: Commands to install required server-side and client-side packages (`@mescius/js-collaboration`, `express`) and frontend bundling tools (`webpack`, `webpack-cli`).

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

LANGUAGE: bash
CODE:
```
npm install @mescius/js-collaboration @mescius/js-collaboration-client express
npm install webpack webpack-cli --save-dev
```

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

TITLE: Retrieving the Start Index of an OutlineInfo Group
DESCRIPTION: Shows how to get the `start` index of an `OutlineInfo` object, which represents the first row or column included in the group. The example groups rows and then logs the start index.

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

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

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

TITLE: Start SpreadJS Collaboration Server
DESCRIPTION: This command line snippet demonstrates how to start the backend server for the SpreadJS collaboration application. It uses `npm run start` to launch the server, enabling client connections and real-time document synchronization.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-presence

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Get and Set Slicer Start Row Offset in JavaScript
DESCRIPTION: This JavaScript example demonstrates how to retrieve and update the start row offset of a SpreadJS slicer. It initializes a workbook, adds a table and pivot table, then creates a timeline slicer. The code then gets the current start row offset, sets a new offset, and logs both values to the console.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Pivot.PivotTableTimelineSlicer

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

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

TITLE: Create Project Folder
DESCRIPTION: Commands to create a new directory for the chat room project and navigate into it.

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

LANGUAGE: bash
CODE:
```
mkdir chat-room
cd chat-room
```

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

TITLE: Project Directory Structure
DESCRIPTION: Illustrates the recommended directory and file structure for the chat room project.

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

LANGUAGE: bash
CODE:
```
/ (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
```

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

TITLE: JavaScript: Adjust Shape Start Row Index
DESCRIPTION: This example demonstrates how to use the 'startRow' method to retrieve and then update the starting row index of a shape. It adds a heart shape, gets its current start row, and then shifts it two rows down.

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

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

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

TITLE: JavaScript: Adjust Shape Start Column Index
DESCRIPTION: This example demonstrates how to use the 'startColumn' method to retrieve and then update the starting column index of a shape. It adds a heart shape, gets its current start column, and then shifts it two columns to the right.

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

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

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

TITLE: Install Collaboration Client Dependencies
DESCRIPTION: This command installs the necessary npm packages for client-side collaboration, including `@mescius/js-collaboration-client` for server connection and `@mescius/js-collaboration-ot-client` for OT functionality and SharedDoc.

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

LANGUAGE: bash
CODE:
```
npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client
```

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

TITLE: Adjust Shape Start Row in SpreadJS
DESCRIPTION: This JavaScript example shows how to retrieve the current starting row index of a shape and then update it. It adds a heart shape, gets its current `startRow`, and then increments it by 2.

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

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

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

TITLE: Install JavaScript Collaboration Client npm Package
DESCRIPTION: This command installs the `@mescius/js-collaboration-client` package using npm, which is the prerequisite for utilizing the client-side library to establish bidirectional communication with a server.

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

LANGUAGE: bash
CODE:
```
npm install @mescius/js-collaboration-client
```

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

TITLE: Start Collaboration Server
DESCRIPTION: Command to start the collaboration server.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-permissions

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Adjust Shape Start Column in SpreadJS
DESCRIPTION: This JavaScript example shows how to retrieve the current starting column index of a shape and then update it. It adds a heart shape, gets its current `startColumn`, and then increments it by 2.

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

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

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

TITLE: Set Shape Start Row Offset in SpreadJS
DESCRIPTION: This JavaScript example demonstrates how to get the current offset relative to the start row of a shape and then set it to zero. It adds a heart shape, retrieves its `startRowOffset`, and then resets it.

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

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

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

TITLE: Navigate and Run Nuxt.js Project
DESCRIPTION: Navigates into the newly created Nuxt.js project directory, installs necessary dependencies, and starts the development server.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/javascript-frameworks/spreadjs-with-nuxtjs

LANGUAGE: Shell
CODE:
```
cd nuxt3WithSJS
npm install
npm run dev
```

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

TITLE: Set Shape Start Column Offset in SpreadJS
DESCRIPTION: This JavaScript example demonstrates how to get the current offset relative to the start column of a shape and then set it to zero. It adds a heart shape, retrieves its `startColumnOffset`, and then resets it.

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

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

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

TITLE: Execute SQLite Database Initialization Script
DESCRIPTION: Run the `init-database.js` file using Node.js to create the required tables in the SQLite database. This step is a one-time setup or for resetting the database.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-database-adapter

LANGUAGE: bash
CODE:
```
node init-database.js
```

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

TITLE: Set Shape Start Row Offset in SpreadJS (JavaScript)
DESCRIPTION: Demonstrates how to get and set the offset relative to the start row of a shape using the `startRowOffset` method in SpreadJS. The example creates a heart shape and resets its row offset to 0.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Shapes.Shape

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

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

TITLE: Configure package.json scripts for project
DESCRIPTION: Adds start and build scripts to the package.json file, enabling server startup and webpack bundling.

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

LANGUAGE: json
CODE:
```
{
  "name": "spread-collaboration",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "build": "webpack"
  },
  "dependencies": {}
}
```

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

TITLE: Complete SharedDoc Initialization Example
DESCRIPTION: This comprehensive TypeScript example demonstrates the full workflow for initializing `SharedDoc`, including defining and registering an OT type, creating a client, connecting to a room, and finally instantiating the `SharedDoc` for collaborative editing.

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

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

// 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);
```

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

TITLE: Set Shape Start Column Offset in SpreadJS (JavaScript)
DESCRIPTION: Demonstrates how to get and set the offset relative to the start column of a shape using the `startColumnOffset` method in SpreadJS. The example creates a heart shape and resets its column offset to 0.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Shapes.Shape

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

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

TITLE: JavaScript: Get Connected PivotTable Names from Slicer Example
DESCRIPTION: Demonstrates a SpreadJS timeline slicer setup, including connecting and disconnecting a PivotTable. The example then logs all associated PivotTables using `getAllPivotTables`, despite being presented under the `getConnectedPivotTableNameList` method documentation.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Pivot.PivotTableTimelineSlicer

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

timeline.connectPivotTable('pivotTable1');
timeline.isConnectedPivotTable('pivotTable1');
console.log(timeline.getAllPivotTables());
timeline.disconnectPivotTable('pivotTable1');
timeline.isConnectedPivotTable('pivotTable1');
console.log(timeline.getAllPivotTables());
```

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

TITLE: Initialize Node.js Project
DESCRIPTION: Command to initialize a Node.js project and create the `package.json` file.

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

LANGUAGE: bash
CODE:
```
npm init -y
```

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

TITLE: JavaScript: Reset Shape Start Column Offset
DESCRIPTION: This example illustrates how to use the 'startColumnOffset' method to retrieve and then reset the offset of a shape relative to its starting column. It adds a heart shape, gets its current offset, and then sets it to zero.

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

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

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

TITLE: Set Floating Object Start Row Offset in SpreadJS
DESCRIPTION: This snippet documents and demonstrates how to use the `startRowOffset` method to get or set the offset relative to the start row of a floating object in SpreadJS. It includes the API signature, parameters, return values, and a JavaScript example.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject

LANGUAGE: APIDOC
CODE:
```
startRowOffset(value?: number): any
  Description: Gets or sets the offset relative to the start row of the floating object.
  Parameters:
    value?: number
  Returns: any
    Description: If no value is set, returns the offset relative to the start row of the floating object; otherwise, returns the floating object.
```

LANGUAGE: javascript
CODE:
```
//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
```

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

TITLE: Build Client-Side Application Code
DESCRIPTION: Execute the npm build command to compile and prepare the client-side application for deployment or execution.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-database-adapter

LANGUAGE: bash
CODE:
```
npm run build
```

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

TITLE: Complete HTML File for SpreadJS Designer Component Setup
DESCRIPTION: This comprehensive HTML snippet provides the full, ready-to-use code for setting up the SpreadJS Designer Component. It integrates all necessary elements: the basic HTML structure, references to all SpreadJS core and Designer CSS/JavaScript files, the `designerHost` DOM element, and the JavaScript initialization logic encapsulated within a `window.onload` function for proper execution.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-designer-component/quick-start-designer

LANGUAGE: HTML
CODE:
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

    <!--CSS files--> 
    <!--Spreadsheet CSS file--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
    <!--Designer Component CSS file--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />

    <!--Script files-->
    <!--Spreadsheet JS files--> 
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>

    <!--Designer Component JS files--> 
    <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>

    <script>
        window.onload = function () {

            //Set License Key
            //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
            //GC.Spread.Sheets.LicenseKey = "XXXX";

            var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
        }
    </script>
</head>
<body>
    <!--DOM element-->
    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>
</html>
```

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

TITLE: JavaScript: Example of Removing Rows from Slicer Data with onRowsRemoved
DESCRIPTION: This example demonstrates how to initialize a GeneralSlicerData instance, add rows using onRowsAdded for setup, and then use the onRowsRemoved method to delete one row starting at index 2. It shows the 'Name' column data before and after the removal.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Slicers.GeneralSlicerData

LANGUAGE: javascript
CODE:
```
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
     [
          [
               { value: 'Bob', text: 'Bob' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1968/6/8"), text: '6/8/1968' },
               { value: 10000, text: '10 000' }
          ],
          [
               { value: 'Betty', text: 'Betty' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1972/7/3"), text: '7/3/1972' },
               { value: 8000, text: '8 000' }
          ]
     ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onRowsAdded(1, 2);
console.log(slicerData.getData('Name')); // ['Bob', undefined, undefined, 'Betty']
slicerData.onRowsRemoved(2, 1);
console.log(slicerData.getData('Name')); // ['Bob', undefined, 'Betty']
```

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

TITLE: Start Real-Time Chat Server with npm
DESCRIPTION: This command initiates the server process for the real-time chat application. It typically executes a script defined in `package.json` that starts the Node.js server, making the application accessible via a specified port.

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

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Install SQLite3 and Collaboration OT SQLite Dependencies
DESCRIPTION: Install the required npm packages for SQLite3 database integration and the SpreadJS collaboration operational transformation SQLite adapter.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-database-adapter

LANGUAGE: bash
CODE:
```
npm install sqlite3 @mescius/js-collaboration-ot-sqlite
```

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

TITLE: Configure Repeat Row Start for Printing in SpreadJS
DESCRIPTION: This method gets or sets the starting row for content that should be repeated at the top of each printed page. It's useful for ensuring headers or titles appear consistently across multi-page printouts. The example demonstrates setting the first two rows to repeat.

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

LANGUAGE: APIDOC
CODE:
```
Method: repeatRowStart(value?): any
Description: Gets or sets the first row of a range of rows to print at the top of each page.
Parameters:
  value?: number
Returns: any
Return Description: If no value is set, returns the first row of a range of rows to print at the top of each page; otherwise, returns the print setting information.
```

LANGUAGE: javascript
CODE:
```
activeSheet.setArray(0, 0, [['Title 1'], ['Title 2']]);
activeSheet.setArray(2, 0, Array.from({ length: 60 }, (_, i) => [i]));
var printInfo = new GC.Spread.Sheets.Print.PrintInfo();
printInfo.repeatRowStart(0);
printInfo.repeatRowEnd(1);
activeSheet.printInfo(printInfo);
spread.print(); // "Title 1" and "Title 2" will be printed repeatedly on each page.
```

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

TITLE: JavaScript: Set and Get Connector Start Point
DESCRIPTION: This example demonstrates how to use the 'startConnector' method to link a connector shape's start point to another shape. It creates two shapes (a rectangle and a straight connector), then sets the connector's start point to the rectangle's second connection point, and finally logs the updated connector information.

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

LANGUAGE: javascript
CODE:
```
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());
```

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

TITLE: Get FormulaTextBox Instance with findControl (JavaScript)
DESCRIPTION: Demonstrates how to initialize a SpreadJS workbook and a FormulaTextBox, then retrieve the FormulaTextBox instance using the `findControl` function by its host element or ID. This example shows a complete setup within a window.onload event.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/modules/GC.Spread.Sheets.FormulaTextBox

LANGUAGE: javascript
CODE:
```
window.onload = function(){
     var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
     var rangeSelector = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("ftb"), {rangeSelectMode: true});
     rangeSelector.workbook(spread);
     var rangeSelectorInstance = GC.Spread.Sheets.FormulaTextBox.findControl("ftb");
}
```

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

TITLE: Complete JavaScript and HTML Sample for SpreadJS File Import/Export
DESCRIPTION: A full sample demonstrating SpreadJS file import and export. It initializes SpreadJS, handles file loading based on type (SJS, XLSX, SSJSON), manages export functionality, and sets up event listeners for user interactions. Includes all necessary SpreadJS library references.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/getstarted/quick-start/importing-files

LANGUAGE: javascript
CODE:
```
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>SpreadJS SJSIO Sample</title>
	<script src="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
	<script src="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/scripts/gc.spread.sheets.io.0.0.0.min.js"></script>
	<script src="https://developer.mescius.com/spreadjs/demos/spread/source/js/FileSaver.js"></script>
	<link href="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/css/gc.spread.sheets.excel2013white.0.0.0.css" rel="stylesheet" />

  <script>
	window.onload = function () {
		const spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadjs_host"));
		const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };

		function getFileType(fileName) {
			return fileName?.split(".").pop();
		}

		// Load Files
		function loadFile(file) {
			const type = getFileType(file.name);
			const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

			if (type === fileTypeMap.sjs) {
				spread.open(file, () => console.log("SJS File Loaded"), console.error);
			} else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
				spread.import(file, () => console.log("File Loaded"), console.error, { fileType });
			} else {
				console.error("Unsupported file type");
			}
		}

		// Export Files
		function exportFile() {
			const type = document.getElementById('exportFileType').value;
			const fileName = `export.${type}`;
			const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

			if (type === fileTypeMap.sjs) {
				spread.save(blob => saveAs(blob, fileName), console.error);
			} else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
				spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
			}
		}

		document.getElementById('selectedFile').addEventListener("change", e => loadFile(e.target.files[0]));
		document.getElementById('exportBtn').addEventListener("click", exportFile);

		spread.getActiveSheet().setValue(0, 0, "Sample");
	};
  </script>
</head>

<body>
	<input id = "selectedFile" type = "file" accept=".sjs, .xlsx, .ssjson" />

	<label for = "exportFileType">File Type:</label>
	<select id = "exportFileType">
		<option value = "xlsx">Excel</option>
		<option value = "ssjson">SSJson</option>
		<option value = "sjs">SJS</option>
	</select>
	<button id = "exportBtn">Export</button>

	<div id = "spreadjs_host" style = "width:100%; height:85vh; border:1px solid darkgray;"></div>
</body>

</html>
```

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

TITLE: Get or Set Shape Start Column Index in SpreadJS
DESCRIPTION: Gets or sets the starting column index for the shape's position. This property defines the column where the shape begins. If no value is provided, it returns the current starting column index.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Shapes.GroupShape

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

LANGUAGE: APIDOC
CODE:
```
startColumn(value?: number): any
  Description: Gets or sets the starting column index of the shape position.
  Parameters:
    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.
  Inherited from: ShapeBase.startColumn
```

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

TITLE: Set Up SpreadJS Collaboration HTML Page
DESCRIPTION: This HTML file defines the basic structure for a SpreadJS application, including the necessary script bundle and a div element to host the SpreadJS workbook. It serves as the entry point for the client-side collaboration application.

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

LANGUAGE: html
CODE:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpreadJS Collaboration</title>
    <script src="/client.bundle.js"></script>
</head>
<body>
    <div id="ss" style="width:100vw;height:95vh;border:1px solid darkgray;float:left"></div>
</body>
</html>
```

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

TITLE: Install Webpack and CSS loaders for front-end bundling
DESCRIPTION: Installs Webpack, webpack-cli, style-loader, and css-loader for bundling front-end assets, specifically CSS files.

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

LANGUAGE: bash
CODE:
```
npm install webpack webpack-cli --save-dev
npm install --save-dev style-loader
npm install --save-dev css-loader
```

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

TITLE: Get or Set Shape Start Row Offset
DESCRIPTION: Demonstrates the `startRowOffset` method for getting or setting the offset of a shape relative to its starting row. This method is inherited from `ShapeBase`.

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

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

LANGUAGE: APIDOC
CODE:
```
startRowOffset(value?: number): any
  Description: Gets or sets the offset relative to the start row of the shape.
  Parameters:
    value?: number - 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.
  Inherited from: ShapeBase.startRowOffset
```

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

TITLE: Get or Set Shape Start Column Offset
DESCRIPTION: Illustrates the `startColumnOffset` method for getting or setting the offset of a shape relative to its starting column. This method is inherited from `ShapeBase`.

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

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

LANGUAGE: APIDOC
CODE:
```
startColumnOffset(value?: number): any
  Description: Gets or sets the offset relative to the start column of the shape.
  Parameters:
    value?: number - The offset relative to the start column of the shape.
  Returns: any - If no value is set, returns the offset relative to the start column of the shape.
  Inherited from: ShapeBase.startColumnOffset
```

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

TITLE: Start Collaboration Server
DESCRIPTION: This command initiates the collaboration server, making it accessible for client connections. The output indicates the server's running address, usually `http://localhost:8080`.

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

LANGUAGE: bash
CODE:
```
npm run start
```

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

TITLE: Install core SpreadJS collaboration and Express dependencies
DESCRIPTION: Installs necessary npm packages for SpreadJS collaboration, operational transformation (OT), and the Express web framework.

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

LANGUAGE: bash
CODE:
```
npm install @mescius/js-collaboration @mescius/js-collaboration-ot 
npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client
npm install @mescius/spread-sheets-collaboration @mescius/spread-sheets-collaboration-client
npm install @mescius/spread-sheets @mescius/spread-sheets-collaboration-addon
npm install express
```

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

TITLE: Get or Set Start Row Index of SpreadJS Shape
DESCRIPTION: This method gets or sets the starting row index for a shape's position. It can be used to retrieve the current start row or update it by providing a new value. The method returns the current start row if no value is provided, otherwise it returns 'any'.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Shapes.FormControlShape

LANGUAGE: APIDOC
CODE:
```
startRow(value?: number): any
  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.
Inherited from: Shape.startRow
```

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

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

TITLE: Get or Set Shape Start Row Index
DESCRIPTION: Shows how to use the `startRow` method to get or set the starting row index for a shape's position. This method is inherited from `ShapeBase`.

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

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

LANGUAGE: APIDOC
CODE:
```
startRow(value?: number): any
  Description: Gets or sets the starting row index of the shape position.
  Parameters:
    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.
  Inherited from: ShapeBase.startRow
```

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

TITLE: Complete HTML Example: Integrate SpreadJS Designer with Existing Spreadsheet
DESCRIPTION: This comprehensive HTML file demonstrates full integration of the SpreadJS Designer Component with an existing spreadsheet. It includes all necessary references, initializes a SpreadJS workbook with sample data and a treemap chart, then links the Designer Component to this pre-configured spreadsheet.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-designer-component/quick-start-designer

LANGUAGE: HTML
CODE:
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
    <!--CSS files--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
    <!--Designer Component CSS file--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />

    <!--Script files-->
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>  
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>  
    <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>  
    <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>  
    <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
    
    <!--Designer Component JS files--> 
    <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>

    <script>
        $(document).ready(function () {
            // initialize Spread
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            // Get the activesheet
            var sheet = spread.getSheet(0);
            // Set Column Width
            sheet.setColumnWidth(2, 100);
            sheet.setColumnWidth(4, 100);
            // Create Data Array
            var dataArray =
                [
                    ['Region', 'Subregion', 'country', 'Population'],
                    ['Asia', 'Southern', 'India', 1354051854],
                    [, , 'Pakistan', 200813818],
                    [, , 'Bangladesh', 166368149],
                    [, , 'Others', 170220300],
                    [, 'Eastern', 'China', 1415045928],
                    [, , 'Japan', 127185332],
                    [, , 'Others', 111652273],
                    [, 'South-Eastern', , 655636576],
                    [, 'Western', , 272298399],
                    [, 'Central', , 71860465],
                    ['Africa', 'Eastern', , 433643132],
                    [, 'Western', , 381980688],
                    [, 'Northern', , 237784677],
                    [, 'Others', , 234512021],
                    ['Europe', , , 742648010],
                    ['Others', , , 1057117703]
                ];
            // Set Array
            sheet.setArray(1, 1, dataArray);
            var treemapChart = sheet.charts.add('chart1',
            GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
            
            // Initialize designer components and use above created spread component
            var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);

        });
    </script>
</head>
<body>
    <div id="ss"></div>
</body>
</html>
```

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

TITLE: Execute SQLite Database Initialization Script
DESCRIPTION: Runs the `init-database.js` script using Node.js. This command executes the JavaScript code that creates the required tables in the SQLite database, preparing it for data storage.

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

LANGUAGE: bash
CODE:
```
node init-database.js
```

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

TITLE: Get or Set Shape Start Column Index
DESCRIPTION: Demonstrates how to use the `startColumn` method to get or set the starting column index for a shape's position. This method is inherited from `ShapeBase`.

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

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

LANGUAGE: APIDOC
CODE:
```
startColumn(value?: number): any
  Description: Gets or sets the starting column index of the shape position.
  Parameters:
    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.
  Inherited from: ShapeBase.startColumn
```

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

TITLE: Create Project Folder
DESCRIPTION: Creates a new directory for the project and navigates into it.

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

LANGUAGE: bash
CODE:
```
mkdir spread-collaboration
cd spread-collaboration
```

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

TITLE: Example: Get All Sheet Tab Styles
DESCRIPTION: Illustrates how to retrieve the status styles of sheet tabs. The first example gets styles for 'Sheet1' and 'Sheet2'. The second retrieves styles for all sheet tabs.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.SheetTabStyleManager

LANGUAGE: javascript
CODE:
```
spread.sheetTabStyles.all(["Sheet1", "Sheet2"]);
spread.sheetTabStyles.all();
```

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

TITLE: SJS.STARTWITH Function Usage Examples
DESCRIPTION: Provides practical examples demonstrating how to use the SJS.STARTWITH function, illustrating both case-sensitive and case-insensitive matching scenarios.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/formulareference/FormulaFunctions/text-functions/sjsstartwith

LANGUAGE: SpreadJS Formula
CODE:
```
=SJS.STARTWITH("Little red Riding Hood's red hood","Little") // true
=SJS.STARTWITH("Little red Riding Hood's red hood","LITTLE") // false
=SJS.STARTWITH("Little red Riding Hood's red hood","LITTLE", 1) // true
```

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

TITLE: API: Get or Set Chart Start Row Offset
DESCRIPTION: Gets or sets the offset relative to the start row of the chart. When a value is provided, it sets the offset; otherwise, it returns the current offset.

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

LANGUAGE: APIDOC
CODE:
```
startRowOffset(value?: number): any
  Description: Gets or sets the offset relative to the start row of the chart.
  Parameters:
    value?: number - The offset relative to the start row of the chart.
  Returns:
    any - If no value is set, returns the offset relative to the start row of the chart; otherwise, returns the chart.
```

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

TITLE: Server Class Constructor
DESCRIPTION: Documents the constructor for the "Server" class, explaining how to instantiate a new server instance. It details the optional configuration parameter that can be used during initialization.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/collaboration/js-collaboration/classes/Server

LANGUAGE: APIDOC
CODE:
```
constructor(config?: IServerConfig)
  Parameters:
    config?: IServerConfig - Optional configuration for the server.
```

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

TITLE: API: Get or Set Chart Start Column Offset
DESCRIPTION: Gets or sets the offset relative to the start column of the chart. When a value is provided, it sets the offset; otherwise, it returns the current offset.

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

LANGUAGE: APIDOC
CODE:
```
startColumnOffset(value?: number): any
  Description: Gets or sets the offset relative to the start column of the chart.
  Parameters:
    value?: number - The offset relative to the start column of the chart.
  Returns:
    any - If no value is set, returns the offset relative to the start column of the chart; otherwise, returns the chart.
```

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

TITLE: SEQUENCE Function Example: Generating a 4x5 Array
DESCRIPTION: An example demonstrating the use of the SEQUENCE function to generate a 4x5 array of sequential numbers, starting from 1.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/formulareference/FormulaFunctions/math-trig-functions/sequence

LANGUAGE: APIDOC
CODE:
```
=SEQUENCE(4,5)
```

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

TITLE: Get and Set Slicer Start Row Offset
DESCRIPTION: This example illustrates how to access and modify the startRowOffset property of a slicer in a SpreadJS worksheet. It initializes a workbook, creates a table and slicer, then logs the initial offset, sets a new one, and logs the updated offset.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Slicers.Slicer

LANGUAGE: APIDOC
CODE:
```
Method: startRowOffset(value?)
Description: Gets or sets the startRowOffset of the slicer.
Parameters:
  value?: number
Returns: any (If no value is set, returns the startRowOffset of the slicer; otherwise, returns the slicer.)
```

LANGUAGE: javascript
CODE:
```
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 slicer = activeSheet.slicers.add("slicer", "table1", "Name");
var oldValue = slicer.startRowOffset();
console.log(oldValue);
slicer.startRowOffset(15);
var newValue = slicer.startRowOffset();
console.log(newValue);
```

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

TITLE: Install SQLite and Collaboration OT SQLite Dependencies
DESCRIPTION: Installs the `sqlite3` and `@mescius/js-collaboration-ot-sqlite` npm packages. These dependencies are required for integrating a SQLite database and its adapter with the collaboration server for data persistence.

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

LANGUAGE: bash
CODE:
```
npm install sqlite3 @mescius/js-collaboration-ot-sqlite
```

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

TITLE: API: Get or Set Chart Start Row Index
DESCRIPTION: Gets or sets the starting row index of the chart position. When a value is provided, it sets the row index; otherwise, it returns the current index.

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

LANGUAGE: APIDOC
CODE:
```
startRow(value?: number): any
  Description: Gets or sets the starting row index of the chart position.
  Parameters:
    value?: number - The starting row index of the chart position.
  Returns:
    any - If no value is set, returns the starting row index of the chart position; otherwise, returns the chart.
```

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

TITLE: Install Collaboration Presence Dependencies
DESCRIPTION: Install the necessary npm packages for SQLite database integration and SpreadJS collaboration presence features, including client and server components.

SOURCE: https://developer.mescius.com/spreadjs/docs/v18/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-presence

LANGUAGE: bash
CODE:
```
npm install sqlite3 @mescius/js-collaboration-ot-sqlite
npm install @mescius/js-collaboration-presence-client @mescius/js-collaboration-presence
```

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

TITLE: API: Get or Set Shape Start Column Index
DESCRIPTION: Documents the `startColumn` method, used to get or set the starting column index for a shape's position. This method helps in anchoring shapes relative to grid columns.

SOURCE: https://developer.mescius.com/spreadjs/api/v18/classes/GC.Spread.Sheets.Shapes.FormControlShape

LANGUAGE: APIDOC
CODE:
```
Method: startColumn
Description: Gets or sets the starting column index of the shape position.
Signature: startColumn(value?: number): any
Parameters:
  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.
Inherited from: Shape.startColumn
```

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

TITLE: Complete Collaboration Presence Client Usage Example
DESCRIPTION: A comprehensive example demonstrating the full workflow: initializing the client, subscribing to presence, submitting initial and updated local states, and handling presence change events.

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

LANGUAGE: typescript
CODE:
```
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);
    });
});
```