Skip to content

documentation(1013149): Update existing UG pages based on Diataxis guidelines #2374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eswaran-suyamprakasam wants to merge 3 commits into
base: development
Choose a base branch
from
Open

documentation(1013149): Update existing UG pages based on Diataxis guidelines #2374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f5fca2
1013149: Refined the content and titles by diataxis approach
eswaran-suyamprakasam Mar 6, 2026
d98cba5
Merge branch 'development' of https://github.com/syncfusion-content/d…
eswaran-suyamprakasam Mar 6, 2026
43d9189
1013149: Resolved the CI error in url
eswaran-suyamprakasam Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions Document-Processing/Excel/Spreadsheet/React/cell-range.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ To get start quickly with Cell Range, you can check on this video:

{% youtube "https://www.youtube.com/watch?v=izgXkfzUMBQ" %}

## Wrap text
## Wrap Text in Cells

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 can be applied or removed to a cell or range of cells in the following ways,

* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load.
* Using the [wrap](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#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`](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.
* 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.

Expand Down Expand Up @@ -51,15 +51,15 @@ The following features have some limitations in wrap text:
* Sorting with wrap text applied data.
* Merge with wrap text

## Merge cells
## Cell Merge and Span

Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use [`allowMerge`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowmerge) property to enable or disable the merge cells option in spreadsheet.

You can merge the range of cells in the following ways,

* Set the `rowSpan` and `colSpan` property in `cell` to merge the number of cells at initial load.
* Set the [rowSpan](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#rowspan) and [colSpan](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#colspan) property in `cell` to merge the number of cells at initial load.
* 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.
* 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,

Expand Down Expand Up @@ -98,12 +98,12 @@ The following features have some limitations in Merge:

## Auto Fill

Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the auto fill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default auto fill option which is available in `autoFillSettings`.
Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use [allowAutoFill](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowautofill) property to enable/disable the auto fill support. You can also use [showFillOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#showfilloptions) property to enable/disable the fill option and [fillType](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#filltype) property to change the default auto fill option which is available in [autoFillSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofillsettings).

You can do this by one of the following ways,

* Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element.
* Use the autoFill() method programmatically.
* Use the [autoFill()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method programmatically.

The available parameters in `autoFill()` method are,

Expand All @@ -121,14 +121,14 @@ In Auto Fill we have following options,
* Fill Formatting Only
* Fill Without Formatting

>* The default auto fill option is “FillSeries” which can be referred from `fillType` property.
>* The default auto fill option is “FillSeries” which can be referred from [fillType](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#filltype) property.

### Copy Cells

To copy the selected cell content to the adjacent cells. You can do this by one of the following ways,

* Using fill handle to select the adjacent cell range and “Copy Cells” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “CopyCells” as fill type in `autoFill` method to fill the adjacent cells.
* Using “CopyCells” as fill type in [autoFill()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells.

### Fill Series

Expand All @@ -137,7 +137,7 @@ To fill the series of numbers, characters, or dates based on selected cell conte
You can do this by one of the following ways,

* Using fill handle to select the adjacent cell range and “Fill Series” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “FillSeries” as fill type in `autoFill` method to fill the adjacent cells.
* Using “FillSeries” as fill type in [autoFill()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells.

### Fill Formatting Only

Expand All @@ -146,7 +146,7 @@ To fill the cell style and number formatting based on the selected cell content
You can do this by one of the following ways,

* Using fill handle to select the adjacent cell range and “Fill Formatting Only” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “FillFormattingOnly” as fill type in `autoFill` method to fill the adjacent cells.
* Using “FillFormattingOnly” as fill type in [autoFill()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells.

### Fill Without Formatting

Expand All @@ -155,9 +155,9 @@ To fill series of numbers, characters, or dates based on the selected cells to t
You can do this by one of the following ways,

* Using fill handle to select the adjacent cell range and “Fill Without Formatting” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “FillWithoutFormatting” as fill type in `autoFill` method to fill the adjacent cells.
* Using “FillWithoutFormatting” as fill type in [autoFill()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells.

In the following sample, you can enable/disable the fill option on the button click event by using the `showFillOptions` property in `autoFillSettings`.
In the following sample, you can enable/disable the fill option on the button click event by using the [showFillOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#showfilloptions) property in [autoFillSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofillsettings).

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand All @@ -183,11 +183,11 @@ The following features have some limitations in Autofill:
* Flash Fill option in Autofill feature.
* Fill with Conditional Formatting applied cells.

## Clear
## Clearing Cell Data and Formatting

Clear feature helps you to clear the cell contents (formulas and data), formats (including number formats, conditional formats, and borders) in a spreadsheet. When you apply clear all, both the contents and the formats will be cleared simultaneously.

### Apply Clear Feature
### Apply Cell Clear Feature

You can apply clear feature by using one of the following ways,

Expand All @@ -205,7 +205,7 @@ Clear has the following types in the spreadsheet,

### Methods

Clear the cell contents and formats in the Spreadsheet document by using the [clear](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. The [clear](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event.
Clear the cell contents and formats in the Spreadsheet document by using the [clear()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. The [clear()](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event.

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand All @@ -224,9 +224,21 @@ Clear the cell contents and formats in the Spreadsheet document by using the [cl

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

## Quick Lookup

- `allowWrap` - enables or disables wrap‑text support globally for the spreadsheet.
- `wrap(range, isWrap)` - applies or removes wrap text for the specified cell or range after the sheet is loaded.
- `allowDataValidation` - turns data‑validation features on or off for the spreadsheet.
- `addDataValidation(rule, range)` - applies a data‑validation rule to the given range (list, number, text length, date, etc.).
- `removeDataValidation(range)` - removes validation rules from the selected cell but keeps existing values.
- `addInvalidHighlight(range)` - highlights all cells that contain values violating their validation rules.
- `removeInvalidHighlight(range)` - clears the highlight applied to invalid cells without removing the rules.
- `allowAutoFill` - enables or disables the Auto Fill feature and fill‑handle interaction.
- `autoFill(fillRange, dataRange, direction, fillType)` - fills a target range by copying, generating series, or applying styles based on the source range.

## Note

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

## See Also

Expand Down
24 changes: 12 additions & 12 deletions Document-Processing/Excel/Spreadsheet/React/clipboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ platform: document-processing
documentation: ug
---

# Clipboard in React Spreadsheet component
# Clipboard actions in React Spreadsheet component

The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enableclipboard) property in Spreadsheet.
The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enableclipboard) property in Spreadsheet.

> By default, the `enableClipboard` property is true.
> By default, the `enableClipboard` property is `true`.

## Cut
## Cut Operation

It is used to cut the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard.

Expand All @@ -24,9 +24,9 @@ Cut can be done in one of the following ways.
* Using Cut button in the Ribbon’s HOME tab to perform cut operation.
* Using Cut option in the Context Menu.
* Using `Ctrl + X` | `Command + X` keyboard shortcut.
* Using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) method.
* Using the [`cut()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) method.

## Copy
## Copy Operation

It is used to copy the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard.

Expand All @@ -37,9 +37,9 @@ Copy can be done in one of the following ways.
* Using Copy button in the Ribbon’s HOME tab to perform copy operation.
* Using Copy option in the Context Menu.
* Using `Ctrl + C` | `Command + C` keyboard shortcut.
* Using the [`copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) method.
* Using the [`copy()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) method.

## Paste
## Paste Operation

It is used to paste the clipboard data to the selected range, rows or columns. You have the following options in Paste,

Expand All @@ -55,7 +55,7 @@ Paste can be done in one of the following ways.
* Using Paste button in the Ribbon’s HOME tab to perform paste operation.
* Using Paste option in the Context Menu.
* Using `Ctrl + V` | `Command + V` keyboard shortcut.
* Using the [`paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) method.
* Using the [`paste()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) method.

> If you use the Keyboard shortcut key for cut (`Ctrl + X`) / copy (`Ctrl + C`) from other sources, you should use `Ctrl + V` shortcut while pasting into the spreadsheet.

Expand All @@ -78,7 +78,7 @@ Paste can be done in one of the following ways.

## Prevent the paste functionality

The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#actionbegin) event, you can set `cancel` argument as false in paste request type.
The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can set `cancel` argument as false in paste request type.

{% tabs %}
{% highlight js tabtitle="app.jsx" %}
Expand All @@ -97,7 +97,7 @@ The following example shows, how to prevent the paste action in spreadsheet. In

{% previewsample "/document-processing/code-snippet/spreadsheet/react/clipboard-cs2" %}

## Limitations
## Limitations of Clipboard actions

* External clipboard is not fully supported while copying data from another source and pasting into a spreadsheet, it only works with basic supports (Values, Number, cell, and Text formatting).
* If you copy =SUM(A2,B2) and paste, the formula reference will change depending on the pasted cell address but we don't have support for nested formula(formula reference will be same).
Expand All @@ -106,4 +106,4 @@ The following example shows, how to prevent the paste action in spreadsheet. In

## Note

You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data.
You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data.
Loading