From 794d91d566a8384e328f25a10bf31c5208cc592c Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Wed, 22 Jul 2026 11:17:24 +0530 Subject: [PATCH 1/6] 1041836: Enhanced Documentation Quality in react platform --- .../React/cell-ranges-and-operations/merge-cells.md | 12 ++++++------ .../React/cell-ranges-and-operations/wrap-text.md | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md b/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md index fe7e69a11f..dcf347da49 100644 --- a/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md +++ b/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md @@ -1,7 +1,7 @@ --- layout: post title: Merge Cells in React Spreadsheet component | Syncfusion -description: Learn here how to apply merge to a cell range in React Spreadsheet component of Syncfusion Essential JS 2 and more. +description: Learn how to merge cell ranges in the React Spreadsheet component of Syncfusion Essential JS 2. control: Spreadsheet platform: document-processing documentation: ug @@ -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" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/wrap-text.md b/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/wrap-text.md index 05879e36b6..8bfe1d2749 100644 --- a/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/wrap-text.md +++ b/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/wrap-text.md @@ -1,7 +1,7 @@ --- 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 @@ -9,15 +9,15 @@ 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" %} From eacc9937d779216ca839a6ac97c8a50b7c1a9952 Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Wed, 22 Jul 2026 14:29:44 +0530 Subject: [PATCH 2/6] 1041836: Enhanced Documentation Quality in react platform --- .../customize-chart-appearance.md | 6 +- .../charts-and-visualizations/overview.md | 1 + .../remove-charts.md | 4 +- .../agentic-builder.md | 6 +- .../create-react-app.md | 4 +- .../Spreadsheet/React/formatting-overview.md | 2 +- .../formatting/conditional-formatting.md | 22 +++---- .../React/formatting/number-formatting.md | 37 ++++++------ .../React/formatting/rich-text-formatting.md | 35 ++++++----- .../React/formatting/text-cell-formatting.md | 60 +++++++++---------- 10 files changed, 92 insertions(+), 85 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/customize-chart-appearance.md b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/customize-chart-appearance.md index c1e9661955..91f9cdeb2b 100644 --- a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/customize-chart-appearance.md +++ b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/customize-chart-appearance.md @@ -1,7 +1,7 @@ --- 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 @@ -9,7 +9,7 @@ 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 diff --git a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/overview.md b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/overview.md index 0a2e11e348..790f793148 100644 --- a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/overview.md +++ b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/overview.md @@ -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 diff --git a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/remove-charts.md b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/remove-charts.md index 9f3e84813d..69b1a90e52 100644 --- a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/remove-charts.md +++ b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations/remove-charts.md @@ -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) diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md index 420052f316..75f9e478a6 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md @@ -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 diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index c09c19f3fb..51a3695782 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -7,9 +7,9 @@ platform: document-processing documentation: ug --- -# Getting Started with the React Spreadsheet Editor in Create React App +# Getting Started with the Syncfusion 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.md). diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md b/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md index 6595d5fe65..fc46d594ec 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md @@ -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. You can also explore our [React Spreadsheet example](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to learn how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md index 10fa27cd74..956c74b871 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md @@ -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 @@ -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" %} @@ -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: @@ -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. You can also explore our [React Spreadsheet example](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to learn how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md index 86039a6a23..f71109d1bf 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md @@ -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: @@ -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 | |-------|---------|---------| @@ -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 | @@ -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" %} @@ -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. @@ -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. You can also explore our [React Spreadsheet example](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to learn how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/rich-text-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/rich-text-formatting.md index 6b201dcbe6..957af12688 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/rich-text-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/rich-text-formatting.md @@ -1,6 +1,6 @@ --- layout: post -title: Rich Text Formatting in React Spreadsheet component | Syncfusion +title: Rich Text Formatting in React Spreadsheet Component | Syncfusion description: Learn how to apply rich text formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Formatting platform: document-processing @@ -37,28 +37,31 @@ You can apply subscript and superscript formatting in following ways: 2. You can define the [`richText`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#richtext) property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded. ```javascript - cells: [ - { - value: 'H2O', - richText: [ - { text: 'H' }, - { text: '2', style: { verticalAlign: 'sub' } }, - { text: 'O' } - ] - } - ] +cells: [ + { + value: 'H2O', + richText: [ + { text: 'H' }, + { text: '2', style: { verticalAlign: 'sub' } }, + { text: 'O' } + ] + } +] ``` 3. You can also apply subscript and superscript dynamically using the [`updateCell`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#updatecell) method. ```javascript - spreadsheet.updateCell({ value: 'X2', richText: [ - { text: 'X' }, - { text: '2', style: { verticalAlign: 'super' } } - ] }, 'A5'); +spreadsheet.updateCell({ + value: 'X2', + richText: [ + { text: 'X' }, + { text: '2', style: { verticalAlign: 'super' } } + ] +}, 'A5'); ``` -The following code example shows the subscript and superscript formatting in cells of the spreadsheet. +The following code example shows subscript and superscript formatting in cells of the Spreadsheet. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md index 9fe6465f23..41ce1805f8 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md @@ -1,6 +1,6 @@ --- layout: post -title: Text & Cell Formatting in React Spreadsheet component | Syncfusion +title: Text & Cell Formatting in React Spreadsheet Component | Syncfusion description: Learn here all about Text and cell formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Formatting platform: document-processing @@ -38,7 +38,7 @@ You can align text in cells using the following options: | Alignment Type | Options | Description | |----------------|---------|-------------| | [`textAlign`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/textalign) | Left, Center, Right | Aligns text horizontally from left to right within the cell. | -| [verticalAlign](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/verticalalign) | Top, Middle, Bottom | Aligns text from top to bottom within the cell. | +| [`verticalAlign`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/verticalalign) | Top, Middle, Bottom | Aligns text from top to bottom within the cell. | ## Indents @@ -73,39 +73,39 @@ The React Spreadsheet Editor allows you to apply borders to a cell or a range of ### Border Types -The Spreadsheet supports many types of borders. Each type adds a border to a specific side or area of the selected cells: - -| Types | Actions | -|-------|---------| -| **Top Border** | Specifies the top border of a cell or range of cells.| -| **Left Border** | Specifies the left border of a cell or range of cells.| -| **Right Border** | Specifies the right border of a cell or range of cells.| -| **Bottom Border** | Specifies the bottom border of a cell or range of cells.| -| **No Border** | Used to clear the border from a cell or range of cells.| -| **All Border** | Specifies all border of a cell or range of cells.| -| **Horizontal Border** | Specifies the top and bottom border of a cell or range of cells.| -| **Vertical Border** | Specifies the left and right border of a cell or range of cells.| -| **Outside Border** | Specifies the outside border of a range of cells.| -| **Inside Border** | Specifies the inside border of a range of cells.| +The following border types are supported. Each type adds a border to a specific side or area of the selected cells: + +| Type | Description | +|------|-------------| +| **Top Border** | Specifies the top border of a cell or range of cells. | +| **Left Border** | Specifies the left border of a cell or range of cells. | +| **Right Border** | Specifies the right border of a cell or range of cells. | +| **Bottom Border** | Specifies the bottom border of a cell or range of cells. | +| **No Border** | Clears the border from a cell or range of cells. | +| **All Border** | Specifies all borders of a cell or range of cells. | +| **Horizontal Border** | Specifies the top and bottom borders of a cell or range of cells. | +| **Vertical Border** | Specifies the left and right borders of a cell or range of cells. | +| **Outside Border** | Specifies the outer perimeter of a range of cells. | +| **Inside Border** | Specifies the inside borders of a range of cells. | ### Customize Border Colors and Styles -You can also change how the border looks by adjusting its size and style. The Spreadsheet supports the following options: +You can change the appearance of a border by adjusting its size, style, and color. The Spreadsheet supports the following options: -| Types | Actions | -|-------|---------| -| **Thin** | Specifies the `1px` border size (default).| -| **Medium** | Specifies the `2px` border size.| -| **Thick** | Specifies the `3px` border size.| -| **Solid** | Used to create the `solid` border (default).| -| **Dashed** | Used to create the `dashed` border.| -| **Dotted** | Used to create the `dotted` border.| -| **Double** | Used to create the `double` border.| +| Style | Description | +|-------|-------------| +| **Thin** | Specifies the `1px` border size (default). | +| **Medium** | Specifies the `2px` border size. | +| **Thick** | Specifies the `3px` border size. | +| **Solid** | Creates a `solid` border (default). | +| **Dashed** | Creates a `dashed` border. | +| **Dotted** | Creates a `dotted` border. | +| **Double** | Creates a `double` border. | -Borders can be applied in the following ways, +Borders can be applied in the following ways: -- Using the `border`, `borderLeft`, `borderRight`, `borderBottom` properties, you can set the desired border to each cell at initial load. The [border](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#border) property is part of [CellStyleModel](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel) and is applied via the cell's `style` object. -- Using the [setBorder](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setborder) method, you can set various border options to a cell or range of cells. +- Using the `border`, `borderTop`, `borderLeft`, `borderRight`, `borderBottom` properties, you can set the desired border on each cell at initial load. The [border](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#border) property is part of [CellStyleModel](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel) and is applied via the cell's `style` object. +- Using the [setBorder](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setborder) method, you can set various border options on a cell or range of cells. - Selecting the border options from the ribbon toolbar. The following code sample shows how to apply different typed border, colors and styles in the Spreadsheet. @@ -136,7 +136,7 @@ The following features are not supported in 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. You can also explore our [React Spreadsheet example](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to learn how to present and manipulate data. ## See Also From 68a220ead8ccb297f821676502fa5cfd9ced452f Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Wed, 22 Jul 2026 17:16:16 +0530 Subject: [PATCH 3/6] 1041836: Addressed review corrections --- .../Excel/Spreadsheet/React/formatting-overview.md | 2 +- .../Spreadsheet/React/formatting/conditional-formatting.md | 2 +- .../Excel/Spreadsheet/React/formatting/number-formatting.md | 2 +- .../Excel/Spreadsheet/React/formatting/text-cell-formatting.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md b/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md index fc46d594ec..61640c6b20 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting-overview.md @@ -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://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) 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 diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md index 956c74b871..f35cc37e87 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md @@ -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://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) 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. You can also explore our [React Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/conditional-formatting) to learn how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md index f71109d1bf..fb11598676 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md @@ -159,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://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) 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. You can also explore our [React Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/number-formatting) to learn how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md index 41ce1805f8..f3a86847bd 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md @@ -136,7 +136,7 @@ The following features are not supported in 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://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) 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 From f4378671048aa8dd1cd299f4743a9d71d70e2ca6 Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Wed, 22 Jul 2026 17:24:18 +0530 Subject: [PATCH 4/6] 1041836: Addressed review corrections --- .../Excel/Spreadsheet/React/formatting/text-cell-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md index f3a86847bd..be4fbb834a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md @@ -136,7 +136,7 @@ The following features are not supported in 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 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://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/cell-formatting) to learn how to present and manipulate data. ## See Also From 327d40ed15ddfcf36fe9f42ec4d4a7073fd40d66 Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Wed, 22 Jul 2026 17:44:54 +0530 Subject: [PATCH 5/6] 1041836: Addressed review corrections --- .../Spreadsheet/React/formatting/conditional-formatting.md | 2 +- .../Excel/Spreadsheet/React/formatting/number-formatting.md | 2 +- .../Excel/Spreadsheet/React/formatting/text-cell-formatting.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md index f35cc37e87..924e2681f1 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/conditional-formatting.md @@ -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://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/conditional-formatting) 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 diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md index fb11598676..c7ffad4349 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/number-formatting.md @@ -159,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://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/number-formatting) 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 diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md index be4fbb834a..f3a86847bd 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting/text-cell-formatting.md @@ -136,7 +136,7 @@ The following features are not supported in 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://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/cell-formatting) 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 From 55cf5c5c190b6c4b6df9e5e355887b0b7325d2be Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Wed, 22 Jul 2026 18:39:33 +0530 Subject: [PATCH 6/6] 1041836: Resolved front matter issues --- .../Spreadsheet/React/cell-ranges-and-operations/merge-cells.md | 2 +- .../React/environment-integration/create-react-app.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md b/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md index dcf347da49..e55576fec9 100644 --- a/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md +++ b/Document-Processing/Excel/Spreadsheet/React/cell-ranges-and-operations/merge-cells.md @@ -1,7 +1,7 @@ --- layout: post title: Merge Cells in React Spreadsheet component | Syncfusion -description: Learn how to merge cell ranges in the React Spreadsheet component of Syncfusion Essential JS 2. +description: Learn here how to apply merge to a cell range in React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Spreadsheet platform: document-processing documentation: ug diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index e616847d8c..a0b4159c70 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -7,7 +7,7 @@ platform: document-processing documentation: ug --- -# Getting Started with the Syncfusion React Spreadsheet Editor in Create React App +# 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(CRA) and integrating React Spreadsheet Editor.