Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ You can merge the range of cells in the following ways,
* Select the range of cells and apply merge by selecting the desired option from ribbon toolbar.
* Use [`merge`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#merge) method to merge the range of cells, once the component is loaded.

The available merge options in spreadsheet are,
The following merge options are available in the Spreadsheet:

| Type | Action |
|-------|---------|
| Merge All | Combines all the cells in a range in to a single cell (default). |
| Merge Horizontally | Combines cells in a range as row-wise. |
| Merge Vertically | Combines cells in a range as column-wise. |
| Merge All | Combines all the cells in a range into a single cell (default). |
| Merge Horizontally | Combines cells in a range across multiple columns (row-wise). |
| Merge Vertically | Combines cells in a range across multiple rows (column-wise). |
| UnMerge | Splits the merged cells into multiple cells. |

The following code example shows the merge cells operation in spreadsheet.
The following code example shows the merge cells operation in the Spreadsheet.

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Wrap Text in React Spreadsheet component | Syncfusion
description: Learn here how apply wrap text to cells in React Spreadsheet component of Syncfusion Essential JS 2 and more.
description: Learn how to apply wrap text to cells in the React Spreadsheet component of Syncfusion Essential JS 2 and more.
control: Spreadsheet
platform: document-processing
documentation: ug
---

# Wrap text in React Spreadsheet

Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowwrap) property to enable or disable the wrap text support in spreadsheet.
Wrap text allows you to display large content as multiple lines in a single cell. By default, wrap text support is enabled in the Spreadsheet. Use the [`allowWrap`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowwrap) property to enable or disable wrap text support.

Wrap text can be applied or removed to a cell or range of cells in the following ways,
You can apply or remove wrap text to a cell or range of cells in any of the following ways:

* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load.
* Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range.
* Using the `wrap` property in a `cell`, you can enable or disable wrap text to a cell at initial load.
* Select or deselect the **Wrap Text** button from the ribbon **Home** tab to apply or remove wrap text for the selected range.
* Using the [`wrap`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#wrap) method, you can apply or remove the wrap text once the component is loaded.

The following code example shows the wrap text functionality in spreadsheet.
The following code example shows the wrap text functionality in the Spreadsheet.

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Customize Charts in React Spreadsheet component | Syncfusion
description: Learn here how to customize charts in React Spreadsheet component of Syncfusion Essential JS 2 and more.
title: How to Customize a Chart in React Spreadsheet component | Syncfusion
description: Learn how to customize the appearance and structure of a chart in the React Spreadsheet component of Syncfusion Essential JS 2 and more.
control: Spreadsheet
platform: document-processing
documentation: ug
---

# Customize Chart Appearance in React Spreadsheet

Once a chart is inserted into the worksheet, you can customize its appearance and structure to make it clearer and more informative.
Once a chart is inserted into the worksheet, you can customize its appearance and structure from the **Chart Design** tab in the ribbon.

## Move a Chart

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ The following types of charts are available in the Spreadsheet.
>* Area Chart
>* Line Chart
>* Pie Chart
>* Doughnut Chart
>* Scatter Chart

## How Charts Stay Synchronized
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ You can remove a chart from your worksheet either through the user interface or

To delete a chart:

1. **Select the chart** by clicking on it
2. **Press Delete** or **Backspace** to remove it immediately
1. **Select the chart** by clicking on it. Selection handles appear around the chart's border.
2. **Press `Delete` or `Backspace`** to remove the chart immediately.

**Alternative method:**
- **Select the chart** and choose **Clear All** from the ribbon (this clears the selected chart)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,17 @@ The UI Builder delivers full implementations, covering layout, components, and s

### Individual Tools

You can directly invoke individual tools by name for more targeted assistance (especially useful for specialized tasks). In addition to the main UI Builder, tools like layout, style, and component are available. For more details, see the [individual tools documentation](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/getting-started#individual-tools).
You can directly invoke individual tools by name for more targeted assistance (especially useful for specialized tasks). In addition to the main UI Builder, tools like `layout`, `style`, and `component` are available. For more details, see the [individual tools documentation](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/getting-started#individual-tools).

### Tips & Best Practices

- Enable **Agent mode** in your IDE for smooth, multi-step execution with confirmation prompts.
- Use higher-capability models (**Claude Sonnet 4.5 or newer, GPT-5**) as they typically produce more accurate, higher-quality code.

### Troubleshooting

- If a step times out or becomes unresponsive, cancel it and retry the current step.
- If the generated code does not match expectations, refine your prompt and run the command again.
- Always review the generated code and commands before accepting or applying them in production.

### See also
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Getting Started with the React Spreadsheet Editor in Create React App

This article provides a step-by-step guide for setting up a React application using Create React App and integrating React Spreadsheet Editor.
This article provides a step-by-step guide for setting up a React application using Create React App(CRA) and integrating React Spreadsheet Editor.

> **Note:** Create React App (CRA) is no longer actively maintained, and the React team recommends modern build tools such as [Vite](https://vitejs.dev/) or [Next.js](https://nextjs.org/) for new projects. This guide remains available for existing CRA-based projects. To start a new project with Next.js, see [Getting Started with the React Spreadsheet Component in a Next.js Project](./nextjs-getting-started).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ To get started quickly with Formatting, you can check this video:

## Note

You can refer to our [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data.
You can refer to our [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights.

## See Also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ documentation: ug

# Conditional Formatting

Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowconditionalformat) property.
Conditional formatting helps you format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowconditionalformat) property.

> * The default value for the `allowConditionalFormat` property is `true`.

## Apply Conditional Formatting

You can apply conditional formatting by using one of the following ways,
You can apply conditional formatting by using one of the following ways:

* Select the conditional formatting icon in the Ribbon toolbar under the Home Tab.
* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#conditionalformat) method to define the condition.
* Using the `conditionalFormats` in sheets model.
* Select the conditional formatting icon in the Ribbon toolbar under the **Home** tab.
* Use the [`conditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#conditionalformat) method to define the condition.
* Use the `conditionalFormats` property in the sheets model.

Conditional formatting has the following types in the spreadsheet,
The Spreadsheet supports the following conditional formatting types:

## Highlight Cells Rules

Expand Down Expand Up @@ -77,16 +77,16 @@ Using the custom format for conditional formatting you can set cell styles like

In the MAY and JUN columns, we have applied conditional formatting custom format.

>* In the Conditional format, custom format supported for **Highlight cell rules** and **Top bottom rules**.
>* Custom Format is supported only for **Highlight Cells Rules** and **Top Bottom Rules**.

## Clear Rules

You can clear the defined rules by using one of the following ways,
You can clear defined rules by using one of the following ways:

* Using the `Clear Rules` option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells.
* Using the [`clearConditionalFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules.

The following code sample shows how to apply different types of conditional formatting, colors, and styles in the Spreadsheet
The following code sample shows how to apply different types of conditional formatting, colors, and styles in the Spreadsheet.

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand All @@ -105,7 +105,7 @@ The following code sample shows how to apply different types of conditional form

{% previewsample "/document-processing/code-snippet/spreadsheet/react/conditional-formatting-cs1" %}

## Limitations of Conditional formatting
## Limitations of Conditional Formatting

The following features have some limitations in Conditional Formatting:

Expand All @@ -116,7 +116,7 @@ The following features have some limitations in Conditional Formatting:

## Note

You can refer to our [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data.
You can refer to our [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights.

## See Also

Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
---
layout: post
title: Number Formatting in React Spreadsheet component | Syncfusion
description: Learn here all about Number formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
control: Formatting
title: Number Formatting in the React Spreadsheet component | Syncfusion
description: Learn here all about Number formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.control: Formatting
platform: document-processing
documentation: ug
---

# Number Formatting in React Spreadsheet component
# Number Formatting in the React Spreadsheet component

Number formatting defines the type of data displayed in the Spreadsheet. You can enable or disable the number formatting using the [`allowNumberFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allownumberformatting) property. The Spreadsheet supports the following number formatting types:

Expand All @@ -22,19 +21,19 @@ Number formatting defines the type of data displayed in the Spreadsheet. You can
| Time | `h:mm:ss AM/PM` | NA |
| Percentage | `0.00%` | 10 |
| Fraction | `# ?/?` | 12 |
| Scientific |`0.00E+00` | 11 |
| Scientific | `0.00E+00` | 11 |
| Text | `@` | 49 |

Number formatting can be applied in following ways,
* Using the [format](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#format) property in `cell`, you can set the desired format to each cell at initial load.
* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set the number format to a cell or range of cells.
* Selecting the number format option from ribbon toolbar.
* Using the [format](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#format) property on a `cell`, you can set the desired format for each cell at initial load.
* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set the number format on a cell or a range of cells.
* Selecting the number format option from the ribbon toolbar.

## Custom Number Formatting

Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the pre-defined number formats do not meet your needs, you can set your own custom formats using custom number formats dialog or [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method.
The Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the predefined formats do not meet your needs, you can set your own custom formats using the custom number formats dialog or the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method.

The different types of custom number format populated in the custom number format dialog are,
The custom number formats available in the custom number formats dialog are:

| Type | Format Code | Format ID |
|-------|---------|---------|
Expand All @@ -53,8 +52,8 @@ The different types of custom number format populated in the custom number forma
| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 |
| Percentage | `0%` | 9 |
| Percentage | `0.00%` | 10 |
| Scientific |`0.00E+00` | 11 |
| Scientific |`##0.0E+0` | 48 |
| Scientific | `0.00E+00` | 11 |
| Scientific | `##0.0E+0` | 48 |
| Fraction | `# ?/?` | 12 |
| Fraction | `# ??/??` | 13 |
| ShortDate | `m/d/yyyy` | 14 |
Expand All @@ -75,11 +74,11 @@ The different types of custom number format populated in the custom number forma
| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 |
| Accounting | `_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)` | 43 |

Custom Number formatting can be applied in following ways,
* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format to a cell or range of cells.
* Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells.
You can apply a custom number format in the following ways:
* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format on a cell or a range of cells.
* Selecting the custom number format option from the custom number formats dialog, or typing your own format in the dialog input and clicking **Apply**, applies the custom format to the selected cells.

The following code example shows the number formatting in cell data.
The following code example shows number formatting applied to cell data.

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand All @@ -102,11 +101,11 @@ The following code example shows the number formatting in cell data.

Earlier, the custom format dialog always showed formats using English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version **27.1.\***, the dialog now displays formats according to the applied culture. You can select a culture-based number format or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. After that, click **Apply** to apply the culture-specific custom format to the selected cells.

The Spreadsheet supports customizing formats in the dialog using the `configureLocalizedFormat` method. In this method, you pass a collection of default number format IDs along with their corresponding format codes. The dialog will then display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference.
The Spreadsheet supports customizing the formats shown in the dialog using the `configureLocalizedFormat` method. Pass a collection of default number format IDs and their corresponding format codes; the dialog then displays the customized formats. See the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat) in the Excel built-in number format reference.

Compared to Excel, the date, time, currency, and accounting formats vary across different cultures. For example, when an Excel file with the date format `'m/d/yyyy'` is imported in the `en-US` culture, the spreadsheet displays the date in that format. However, when the same file is imported in the German culture, the date format changes to `'dd.MM.yyyy'`, which is the default for that region. The default number format ID for the date is 14. To customize the date format based on the culture, you should map the default number format ID to the appropriate culture-specific format code, like this: `{ id: 14, code: 'dd.MM.yyyy' }` in the `configureLocalizedFormat` method.

> The format code should use the default decimal separator (.) and group separator (,).
> The format code must use the default decimal separator (`.`) and group separator (`,`).

The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture.

Expand Down Expand Up @@ -160,7 +159,7 @@ The following code example demonstrates how to configure culture-based formats f

## Note

You can refer to our [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data.
You can refer to our [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights.

## See Also

Expand Down
Loading