### Install Dependencies with npm

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Install project dependencies and start the development server using npm.

```bash
npm install
npm run dev
```

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

### Install Dependencies and Start Dev Server (Yarn)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/vuejs_integration.md

Install project dependencies and start the development server using Yarn. This command is used for Yarn package manager users.

```bash
yarn
yarn start // or yarn dev
```

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

### Install Dependencies and Start Dev Server

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/angular_integration.md

Install project dependencies using yarn and start the development server to run the Angular application.

```bash
yarn
yarn start
```

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

### Install Dependencies with Yarn

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Install project dependencies and start the development server using Yarn.

```bash
yarn
yarn dev
```

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

### Install Dependencies for Documentation

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/README.md

Install the necessary project dependencies using Yarn.

```bash
$ yarn
```

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

### Install React Spreadsheet

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/nextjs.md

Install the React Spreadsheet package using npm.

```bash
npx create-next-app@latest my-spreadsheet-app
cd my-spreadsheet-app
npm install @dhtmlx/trial-react-spreadsheet
```

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

### Install Commercial Version (Private npm)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/installation.md

Install the commercial version from the DHTMLX private npm registry after configuring the registry.

```bash
npm install @dhx/react-spreadsheet
```

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

### Start the development server

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/quick-start.md

Run the development server to view the React Spreadsheet application in the browser.

```bash
npm run dev
```

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

### Install Dependencies

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/state/redux-toolkit.md

Installs the necessary packages for DHTMLX React Spreadsheet and Redux Toolkit using npm.

```bash
npm create vite@latest my-rtk-spreadsheet -- --template react-ts
cd my-rtk-spreadsheet
npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux
```

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

### Minimal React Spreadsheet Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/overview.md

Renders a basic spreadsheet with one sheet, formatted cells, and custom styles. Ensure you have the necessary license and have installed the package.

```tsx
import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

function App() {
    const [sheets] = useState<SheetData[]>([
        {
            id: "sheet1",
            name: "Sales",
            cells: {
                A1: { value: "Product", css: "bold" },
                B1: { value: "Revenue", css: "bold", format: "currency" },
                A2: { value: "Widget" },
                B2: { value: 15000, format: "currency" },
            },
        },
    ]);

    const styles = {
        bold: { "font-weight": "bold" },
    };

    return <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />;
}

```

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

### Full Toolbar Configuration Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_toolbarblocks_config.md

This example demonstrates how to configure a spreadsheet with a comprehensive set of toolbar blocks, including additional options like 'lock', 'clear', 'columns', 'rows', 'file', and 'help'.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    // full toolbar
    toolbarBlocks: [
        "undo",
        "colors",
        "font",
        "decoration",
        "align",
        "cell",
        "format",
        "actions", 
        "lock",
        "clear",
        "columns",
        "rows",
        "file",
        "help"
    ]
});
```

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

### Run Documentation Server Locally

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/README.md

Start the DHTMLX Spreadsheet documentation on a local server using Yarn.

```bash
$ yarn start
```

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

### Install Evaluation Version (Private npm)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/installation.md

Install the evaluation version from the DHTMLX private npm registry after configuring the registry.

```bash
npm install @dhx/trial-react-spreadsheet
```

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

### Install Evaluation Version (Public npm with Yarn)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/installation.md

Use this command to install the public evaluation version of the React Spreadsheet via yarn.

```bash
yarn add @dhtmlx/trial-react-spreadsheet
```

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

### Install Evaluation Version (Public npm)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/installation.md

Use this command to install the public evaluation version of the React Spreadsheet via npm.

```bash
npm install @dhtmlx/trial-react-spreadsheet
```

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

### Custom Toolbar Configuration

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_toolbarblocks_config.md

This example shows how to create a custom toolbar by specifying a subset of available button blocks in a desired order.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"]
});
```

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

### Create Svelte Project with Vite

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Use npm to create a new Svelte project. This command initiates the project setup process.

```bash
npm create vite@latest
```

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

### Styles Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Shows how to define named styles and apply them to cells using the `styles` prop and `CellData.css`.

```tsx
const styles = {
    header: {
        "font-weight": "bold",
        "background": "#e3f2fd",
        "color": "#1565c0",
    },
    highlight: {
        "background": "#ffeb3b",
        "color": "#333",
    },
};

<ReactSpreadsheet sheets={sheets} styles={styles} />
```

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

### Theme Switching Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Allows dynamic switching between different themes (light, dark, contrast) using the `theme` prop.

```tsx
const [theme, setTheme] = useState<SpreadsheetTheme>("light");

<select onChange={(e) => setTheme(e.target.value as SpreadsheetTheme)}>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
    <option value="contrast-light">Contrast Light</option>
    <option value="contrast-dark">Contrast Dark</option>
</select>

<ReactSpreadsheet sheets={sheets} theme={theme} />
```

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

### Bootstrap the Angular application with AppModule

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/angular_integration.md

Update src/main.ts to bootstrap the AppModule, ensuring the application starts correctly with the SpreadsheetComponent.

```typescript
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
```

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

### SheetData Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/types.md

Provides an example of a complete SheetData object, illustrating how to define cell values, column widths, and freeze panes for a spreadsheet sheet.

```ts
const sheet: SheetData = {
    id: "sheet1",
    name: "Inventory",
    cells: {
        A1: { value: "Product", css: "bold" },
        B1: { value: "Quantity", css: "bold" },
        A2: { value: "Laptop" },
        B2: { value: 42 },
    },
    cols: { 0: { width: 200 } },
    freeze: { row: 1 },
};
```

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

### Navigate to Project Directory

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/vuejs_integration.md

Change the current directory to your newly created Vue project. This is a necessary step before installing dependencies.

```bash
cd my-vue-spreadsheet-app
```

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

### Spreadsheet Ref Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/types.md

Demonstrates how to use the `SpreadsheetRef` to imperatively interact with the DHTMLX Spreadsheet instance, including serialization, selection, and undo/redo operations.

```tsx
const ref = useRef<SpreadsheetRef>(null);

// Serialize data
const data = ref.current?.instance?.serialize();

// Programmatic selection
ref.current?.instance?.selection.setSelectedCell("A1:C5");

// Undo/redo
ref.current?.instance?.undo();
ref.current?.instance?.redo();
```

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

### Spreadsheet Custom Localization Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_localization_config.md

This example demonstrates how to initialize a DHTMLX Spreadsheet with a custom localization object. It overrides default settings for decimal, thousands, currency, date, and time formats.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    localization: {
        decimal: ",", 
        thousands: " ", 
        currency: "¥",  
        dateFormat: "%D/%M/%Y",
        timeFormat: 24
    }
});

spreadsheet.parse(dataset);
```

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

### Loading Data from URL Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Loads spreadsheet data from a specified URL and format using the `loadUrl` and `loadFormat` props.

```tsx
<ReactSpreadsheet loadUrl="/api/spreadsheet-data" loadFormat="json" />
```

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

### Import Spreadsheet PRO Version

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Import Spreadsheet source files for the PRO version when installing from a local folder. Ensure the CSS path is correct.

```html
<script>
import { Spreadsheet } from 'dhx-spreadsheet-package';
import 'dhx-spreadsheet-package/codebase/spreadsheet.css';
</script>
```

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

### Apply Same Style to a Range of Cells

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_setstyle_method.md

This example demonstrates how to apply a single style to all cells within a specified range.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// setting the same style for a range of cells
spreadsheet.setStyle("A1:D1", {color: "blue"});
```

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

### Toolbar Customization Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Customizes the spreadsheet toolbar by specifying which blocks to display using the `toolbarBlocks` prop.

```tsx
<ReactSpreadsheet
    sheets={sheets}
    toolbarBlocks={["undo", "colors", "decoration", "align", "format"]}
/>
```

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

### Log All User Actions

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/events.md

The `onAfterAction` prop can be used to log details about any user action that completes. This example logs the action type and the affected cell to the console.

```tsx
<ReactSpreadsheet
    sheets={sheets}
    onAfterAction={(action, config) => {
        console.log("Action:", action, "Cell:", config.cell);
    }}
/>
```

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

### DHTMLX Spreadsheet Snippet Tool

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/functions.md

Interactive example demonstrating DHTMLX Spreadsheet formulas and functions. This snippet allows for live testing and viewing of results.

```html
<iframe src="https://snippet.dhtmlx.com/wux2b35b?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
```

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

### Sheets with Cell Data Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Demonstrates how to define sheet data including cells, row/column sizing, merged ranges, and a frozen header row.

```tsx
const [sheets, setSheets] = useState<SheetData[]>([
    {
        id: "sheet1",
        name: "Budget",
        cells: {
            A1: { value: "Item", css: "header" },
            B1: { value: "Amount", css: "header", format: "currency" },
            A2: { value: "Rent" },
            B2: { value: 2000, format: "currency" },
            A3: { value: "=SUM(B2:B3)" },
        },
        rows: { 0: { height: 40 } },
        cols: { 0: { width: 150 }, 1: { width: 120 } },
        merged: [{
            from: { row: 0, column: 0 },
            to: { row: 0, column: 1 }
        }],
        freeze: { row: 1 },
    },
]);

<ReactSpreadsheet sheets={sheets} activeSheet="sheet1" />
```

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

### Get Style with Sheet Name Prefix

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getstyle_method.md

Starting with v4.1, you can specify the sheet name before the cell reference to get styles from a specific tab. If omitted, styles from the active tab are returned.

```javascript
const style = spreadsheet.getStyle("sheet1!A2"); 
//-> {justify-content: "flex-end", text-align: "right"}
```

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

### Retrieve a Sheet by ID

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/sheetmanager_get_method.md

Use the get() method on the sheets collection to fetch a sheet object. This requires the sheet's unique ID. The example shows how to get a sheet and log its name.

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

const sheet = spreadsheet.sheets.get("sheet_1");
console.log(sheet.name); // "Sheet 1"
```

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

### Get Format with Sheet Name

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getformat_method.md

Starting with v4.1, you can specify the sheet name along with the cell ID to get the format from a specific sheet. If the sheet name is omitted, the format from the active sheet is returned.

```javascript
// returns "number"
const cellFormat = spreadsheet.getFormat("sheet1!A2");
```

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

### Get Cell Formula

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/functions.md

Retrieves the formula applied to a specific cell using its ID. This method is available starting from v4.1.

```javascript
var formula = spreadsheet.getFormula("B2");
// -> "ABS(C2)"
```

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

### Get Cell Value with Sheet Name (v4.1+)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getvalue_method.md

Starting with v4.1, you can specify the sheet name along with the cell reference to retrieve a value from a specific tab. If the sheet name is omitted, the value from the active tab is returned.

```javascript
const cellValue = spreadsheet.getValue("sheet1!A2"); //-> 25000
```

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

### Create Vue Project

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/vuejs_integration.md

Use npm to create a new Vue project. This command scaffolds a new Vue application using the official scaffolding tool.

```bash
npm create vue@latest
```

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

### Constructor

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/api_overview.md

Initializes a new instance of the DHTMLX Spreadsheet.

```APIDOC
## Constructor

### Description
Initializes a new instance of the DHTMLX Spreadsheet.

### Parameters

- `container` (string | HTMLElement) - The HTML container element or its ID where the spreadsheet will be rendered.
- `config` (object) - A hash of configuration options. See documentation for available options.

### Example

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    rowsCount: 20,
    colsCount: 20
});
```
```

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

### Create a new React project with Vite

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/quick-start.md

Use npm to create a new React TypeScript project with Vite and navigate into the project directory.

```bash
npm create vite@latest my-spreadsheet-app -- --template react-ts
cd my-spreadsheet-app
```

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

### FIND Function

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/functions.md

Returns the starting position of a substring within a larger string. Allows specifying a starting search position.

```spreadsheet formula
=FIND(find_text, within_text, [start_num])
```

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

### Navigate to Project Directory

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Change the current directory to your newly created Svelte project.

```bash
cd my-svelte-spreadsheet-app
```

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

### Start Editing Selected Cell

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_startedit_method.md

Starts editing in the currently selected cell. Ensure the spreadsheet is initialized and data is parsed before calling this method.

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// starts editing the currently selected cell
spreadsheet.startEdit();
```

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

### Get Focused Cell

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/selection_getfocusedcell_method.md

Use this snippet to get the ID of the currently focused cell after setting it. Requires an initialized Spreadsheet instance and parsed data.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    // config parameters
});
spreadsheet.parse(data);

// setting focus on a cell
spreadsheet.selection.setFocusedCell("D4");

// getting the focused cell
const focused = spreadsheet.selection.getFocusedCell(); // ->"D4"
```

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

### get()

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/sheetmanager_get_method.md

Returns a single sheet object by its identifier.

```APIDOC
## get()

### Description
Returns a single sheet object by its identifier.

### Method
get

### Parameters
#### Path Parameters
- **id** (string | number) - required - the unique identifier of the sheet to retrieve.

### Returns
#### Success Response
- **ISheet** (object) - the sheet object matching the given id.

### Example
```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

const sheet = spreadsheet.sheets.get("sheet_1");
console.log(sheet.name); // "Sheet 1"
```
```

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

### Getting a sheet by id

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/working_with_sheets.md

Retrieve a specific sheet object by its ID using the sheets.get() method.

```APIDOC
## Getting a sheet by id

To retrieve a single sheet object by its id, use the [`sheets.get()`](api/sheetmanager_get_method.md) method:

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

const sheet = spreadsheet.sheets.get("sheet_1");
console.log(sheet.name); // "Sheet 1"
```
```

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

### Navigate to Project Directory

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/angular_integration.md

Change the current directory to the newly created Angular project folder.

```bash
cd my-angular-spreadsheet-app
```

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

### MID Function

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/functions.md

Extracts a specified number of characters from a text string, starting at a given position.

```spreadsheet formula
=MID(text, start, count)
```

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

### afterEditStart Event

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_aftereditstart_event.md

Fires after editing of a cell has started. The callback receives the cell ID and its current value.

```APIDOC
## afterEditStart Event

### Description

Fires after editing of a cell has started.

### Signature

`afterEditStart: (cell: string, value: string) => void;`

### Parameters

#### Callback Parameters

- **cell** (string) - Required - The id of a cell.
- **value** (string) - Required - The value of a cell.

### Example

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// subscribe on the "afterEditStart" event
spreadsheet.events.on("afterEditStart", function(cell, value){
    console.log("Editing has started");
    console.log(cell, value);
});
```
```

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

### Import Spreadsheet Trial Version

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Import Spreadsheet source files for the trial version. Note the specific package name and CSS file path.

```html
<script>
import { Spreadsheet } from '@dhx/trial-spreadsheet';
import '@dhx/trial-spreadsheet/codebase/spreadsheet.min.css';
</script>
```

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

### Initialize DHTMLX Spreadsheet

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/how_to_start.md

This HTML snippet demonstrates creating a DIV container and initializing the DHTMLX Spreadsheet component within it using the dhx.Spreadsheet constructor.

```html
<!DOCTYPE html>
<html>
<head>
    <title>How to Start with DHTMLX Spreadsheet</title>
    <script src="codebase/spreadsheet.js"></script>   
   
    <link href="codebase/spreadsheet.css" rel="stylesheet">  
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <div id="spreadsheet_container"></div>
    <script>
        const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
            //config options
        });
    </script>
</body>
</html>
```

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

### Configure Spreadsheet Rows and Columns Count

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/configuration.md

Set the initial number of columns and rows for the Spreadsheet grid using colsCount and rowsCount options. This example initializes the grid with 50 columns and 200 rows.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    colsCount: 50,
    rowsCount: 200
});
```

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

### Get Style of a Single Cell

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getstyle_method.md

Use this snippet to retrieve the style object for a specific cell by its ID.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// getting style of one cell
const style = spreadsheet.getStyle("A1");
// -> {background: "#8DE9E1", color: "#03A9F4"}
```

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

### Responding to User Actions with onAfterAction and ref

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/state/state-management-basics.md

Utilize the `onAfterAction` prop to react to user modifications. Combine it with a `ref` to access the underlying widget instance and serialize its current data.

```tsx
import { useRef } from "react";
import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet";

function App() {
    const ref = useRef<SpreadsheetRef>(null);
    const [sheets, setSheets] = useState<SheetData[]>([/* ... */]);

    const handleAfterAction = () => {
        const data = ref.current?.instance?.serialize();
        if (data) {
            // Sync widget state back to React state
            console.log("Spreadsheet data:", data);
        }
    };

    return (
        <ReactSpreadsheet
            ref={ref}
            sheets={sheets}
            onAfterAction={handleAfterAction}
        />
    );
}
```

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

### Export Spreadsheet Data to JSON

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/export_json_method.md

Exports data from a spreadsheet into a JSON file. This method is available starting from v4.3.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    // config parameters
});
spreadsheet.parse(data);

// exports data from a spreadsheet into a JSON file
spreadsheet.export.json();
```

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

### Configure Spreadsheet Component

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/vuejs_integration.md

Initializes the DHTMLX Spreadsheet instance in the `mounted` hook and parses the provided data. Ensures the Spreadsheet is destroyed when the component is unmounted.

```html
<script>
import { Spreadsheet } from "@dhx/trial-spreadsheet";
import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css";

export default {
    props: ["data"],

    mounted() {
        this.spreadsheet = new Spreadsheet(this.$refs.container, {});
        this.spreadsheet.parse(this.data);
    },

    unmounted() {
        this.spreadsheet.destructor();
    }
};
</script>

<template>
    <div ref="container" class="widget"></div>
</template>

```

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

### Cell Validation Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Restricts cell input to a predefined list of values by providing an array of strings to `CellData.validation`.

```tsx
const sheets: SheetData[] = [
    {
        id: "sheet1",
        name: "Form",
        cells: {
            A1: { value: "Status" },
            B1: { validation: ["Active", "Inactive", "Pending"] },
        },
    },
];

<ReactSpreadsheet sheets={sheets} />
```

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

### Toolbar Blocks Before v5.0

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/migration.md

Configuration of toolbar blocks using the deprecated `help` option before version 5.0.

```jsx
// default configuration 
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "help"
]
```

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

### Import DHTMLX Spreadsheet (PRO Version from Local Folder)

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/angular_integration.md

Import the Spreadsheet component from a local folder if you are using the PRO version.

```jsx
import { Spreadsheet } from 'dhx-spreadsheet-package';
```

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

### Get Focused Cell ID

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/working_with_cells.md

Retrieves the ID of the cell that currently has keyboard focus. Returns the ID as a string.

```jsx
// getting the focused cell 
var focused = spreadsheet.selection.getFocusedCell(); // -> "D4"
```

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

### Get Selected Cell IDs

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/working_with_cells.md

Retrieves the IDs of the currently selected cell(s). Returns a string representing the selection.

```jsx
const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8"
```

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

### redo()

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_redo_method.md

Applies the reverted action once again. This method does not take any arguments and returns void.

```APIDOC
## redo()

### Description
Applies the reverted action once again.

### Method
`redo(): void;`

### Example
```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// applies the reverted action once again
spreadsheet.redo();
```
```

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

### Initialize Spreadsheet Component in Svelte

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/svelte_integration.md

Create a Svelte component to initialize and manage the DHTMLX Spreadsheet instance. Includes lifecycle hooks for mounting and unmounting.

```html
<script>
    import { onMount, onDestroy } from "svelte";
    import { Spreadsheet } from "@dhx/trial-spreadsheet";
    import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css"

    let container; // initialize container for Spreadsheet
    let spreadsheet;
    
    onMount(() => {
        // initialize the Spreadsheet component
        spreadsheet = new Spreadsheet(container, {});
    });

    onDestroy(() => {
        spreadsheet.destructor(); // destruct Spreadsheet
    });
</script>

<div bind:this={container} class="widget"></div>
```

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

### Get Values from a Cell Range

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getvalue_method.md

Retrieves all values within a specified range of cells. The result is an array of values.

```javascript
const rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"]
```

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

### Custom Spreadsheet Formats Initialization

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_formats_config.md

Initialize a DHTMLX Spreadsheet with custom number formats. This example shows how to define new formats for U.S. Dollar, Euro, and Swiss Franc.

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    formats: [
        {
            name: "U.S. Dollar",
            id: "currency",
            mask: "$#,##0.00"
        },
        {
            name: "Euro",
            id: "euro",
            mask: "[$€]#.##0,00",
            example: "1000.50"
        },
        {
            name: "Swiss franc",
            id: "franc",
            mask: "[$CHF ]#.##0,00"
        }
    ],
    // other config parameters
});
```

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

### beforeEditStart Event

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_beforeeditstart_event.md

Fires before editing of a cell has started. The event handler can return true to allow editing or false to prevent it.

```APIDOC
## beforeEditStart Event

### Description

Fires before editing of a cell has started.

### Method Signature

`beforeEditStart: (cell: string, value: string) => void | boolean;`

### Parameters

- **cell** (string) - Required - The id of a cell.
- **value** (string) - Required - The value of a cell.

### Returns

- `true` - To allow editing of the cell.
- `false` - To prevent editing of the cell.

### Example

```jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// subscribe on the "beforeEditStart" event
spreadsheet.events.on("beforeEditStart", function(cell, value){
     console.log("Editing is about to start");
    console.log(cell, value);
    return true;
});
```
```

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

### Load Data in Different Formats

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_load_method.md

Demonstrates how to load data from JSON, CSV, and XLSX files using the load() method. Specify the file URL and optionally the data type.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// load data in the JSON format (default)
spreadsheet.load("../common/data.json");

// load data in the CSV format
spreadsheet.load("../common/data.csv", "csv");

// load data in the Excel format, (.xlsx only)
spreadsheet.load("../common/data.xlsx", "xlsx");
```

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

### Toolbar Blocks From v5.0

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/migration.md

Configuration of toolbar blocks using the new `helpers` and `actions` options from version 5.0, replacing the deprecated `help` option.

```jsx
// default configuration
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "actions",
    "helpers"
]
```

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

### Read-Only Mode Example

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/props.md

Enables read-only mode for the spreadsheet by setting the `readonly` prop to `true`, preventing user edits.

```tsx
<ReactSpreadsheet sheets={sheets} readonly={true} />
```

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

### Multi-sheet with Formulas

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/overview.md

Demonstrates how to configure multiple sheets with cell values and a SUM formula, enabling sheet tabs for navigation.

```tsx
const [sheets] = useState<SheetData[]>([
    {
        id: "revenue",
        name: "Revenue",
        cells: {
            A1: { value: "Q1" }, B1: { value: "Q2" }, C1: { value: "Q3" }, D1: { value: "Q4" },
            A2: { value: 12000 }, B2: { value: 15000 }, C2: { value: 18000 }, D2: { value: 21000 },
            A3: { value: "Total" }, B3: { value: "=SUM(A2:D2)", format: "currency" },
        },
    },
    {
        id: "expenses",
        name: "Expenses",
        cells: {
            A1: { value: "Category" }, B1: { value: "Amount", format: "currency" },
            A2: { value: "Marketing" }, B2: { value: 5000, format: "currency" },
            A3: { value: "Operations" }, B3: { value: 8000, format: "currency" },
        },
    },
]);

<ReactSpreadsheet sheets={sheets} multiSheets={true} activeSheet="revenue" />
```

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

### Create React Spreadsheet component

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/react/quick-start.md

Create the main App component, import necessary modules, and render the ReactSpreadsheet component with initial data and styles.

```tsx
import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";
import { sheets as initialSheets, styles } from "./data";

function App() {
    const [sheets] = useState<SheetData[]>(initialSheets);

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />
        </div>
    );
}

export default App;
```

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

### Remove a toolbar control

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/customization.md

Delete a control from the toolbar by its ID using the `remove` method. This example removes the Undo button.

```jsx
spreadsheet.toolbar.data.remove("undo");
```

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

### Get Formula of a Cell

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getformula_method.md

Returns the formula of a cell in the active tab. Initialize the Spreadsheet and parse data before calling this method.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// returns "ABS(C2)"
const formula = spreadsheet.getFormula("B2");
```

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

### Clone Spreadsheet Documentation Repository

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/README.md

Clone the DHTMLX Spreadsheet documentation repository to your local machine using Git.

```bash
$ git clone git@github.com:DHTMLX/docs-spreadsheet.git
$ cd docs-spreadsheet
```

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

### Get Format of a Cell

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_getformat_method.md

Returns the number format applied to the value of a cell. Use this to retrieve the format of a specific cell.

```javascript
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// returns "currency"
const format = spreadsheet.getFormat("A1");
```

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

### Set Value on a Specific Sheet

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/api/spreadsheet_setvalue_method.md

Starting with v4.1, you can specify the sheet name in the cell reference to set a value on a particular tab.

```javascript
spreadsheet.setValue("sheet1!A1",5);
```

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

### Default Number Formats

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/number_formatting.md

An array of default number format objects, each with an id, mask, name, and example. These can be used with the setFormat() method.

```jsx
defaultFormats = [
    { name: "Common", id: "common", mask: "", example: "1500.31" },
    { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" },
    { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" },
    { name: "Currency", id: "currency", mask: "$"#,##0.00", example: "$1,500.31" },
    { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" },
    {
        name: "Time",
           id: "time",
           mask: hh:mm:ss am/pm || hh:mm:ss, // depending on the localization.timeFormat config
           example: "13:30:00"
    },
    { name: "Text", id: "text", mask: "@", example: "'1500.31'" },
    { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" }
];
```

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

### Configure Light Theme Specific Colors

Source: https://github.com/dhtmlx/docs-spreadsheet/blob/master/docs/themes/base_themes_configuration.md

This example shows how to override specific CSS variables for the 'light' theme by targeting the `[data-dhx-theme='light']` attribute. It includes overrides for border and color scheme variables.

```html
<style>
    [data-dhx-theme='light'] {
        /* border */
        --dhx-border-color: #ced4da;
        /* end border */

        /* color scheme */
        --dhx-h-primary: 210;
        --dhx-s-primary: 30%;
        --dhx-l-primary: 20%;

        --dhx-h-secondary: 185;
        --dhx-s-secondary: 5%;
        --dhx-l-secondary: 50%;

        --dhx-h-danger: 6;
        --dhx-s-danger: 78%;
        --dhx-l-danger: 57%;

        --dhx-h-success: 168;
        --dhx-s-success: 77%;
        --dhx-l-success: 42%;

        --dhx-l-background: 98%;
        /* end color scheme */
    }
</style>

<script>
    const spreadsheet = new dhx.Spreadsheet("spreadsheet",{});
    
    dhx.setTheme("light");
</script>
```