diff --git a/Document-Processing/Excel/Spreadsheet/React/border.md b/Document-Processing/Excel/Spreadsheet/React/border.md
new file mode 100644
index 0000000000..f2c0770524
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/border.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Border formatting in React Spreadsheet component | Syncfusion
+description: Learn here how to apply and customize borders in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Apply Borders to Cells
+
+The Syncfusion React Spreadsheet component allows you to apply borders to a cell or a range of cells. Borders help you separate sections, highlight data, or format tables clearly in your worksheet. You can apply borders in different styles, sizes, and colors based on your needs.
+
+## 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.|
+
+## 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:
+
+| 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.|
+
+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.
+- Selecting the border options from the ribbon toolbar.
+
+The following code sample shows how to apply borders in the Spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/border-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/border-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/border-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/border-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "/document-processing/code-snippet/spreadsheet/react/border-cs1" %}
+
+ ## Remove Borders
+
+To remove the border style on the target cells, use the UI "No Border" option in the ribbon.
+
+
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md b/Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md
new file mode 100644
index 0000000000..8d49a58efd
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md
@@ -0,0 +1,113 @@
+---
+layout: post
+title: Conditional Formatting in React Spreadsheet component | Syncfusion
+description: Conditional formatting rules, data bars, color scales and icon sets in Syncfusion React Spreadsheet.
+control: Formatting
+platform: document-processing
+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.
+
+> * The default value for the `allowConditionalFormat` property is `true`.
+
+## Apply Conditional Formatting
+
+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.
+
+Conditional formatting has the following types in the spreadsheet,
+
+## Highlight cells rules
+
+Highlight cells rules option in the conditional formatting enables you to highlight cells with a preset color depending on the cell's value.
+
+The following options can be given for the highlight cells rules as type,
+
+>* 'GreaterThan', 'LessThan', 'Between', 'EqualTo', 'ContainsText', 'DateOccur', 'Duplicate', 'Unique'.
+
+The following preset colors can be used for formatting styles,
+
+>* `"RedFT"` - Light Red Fill with Dark Red Text,
+>* `"YellowFT"` - Yellow Fill with Dark Yellow Text,
+>* `"GreenFT"` - Green Fill with Dark Green Text,
+>* `"RedF"` - Red Fill,
+>* `"RedT"` - Red Text.
+
+## Top bottom rules
+
+Top bottom rules option in the conditional formatting allows you to apply formatting to the cells that satisfy a statistical condition with other cells in the range.
+
+The following options can be given for the top bottom rules as type,
+
+>* 'Top10Items', 'Bottom10Items', 'Top10Percentage', 'Bottom10Percentage', 'BelowAverage', 'AboveAverage'.
+
+## Data Bars
+
+You can apply data bars to represent the data graphically inside a cell. The longest bar represents the highest value and the shorter bars represent the smaller values.
+
+The following options can be given for the data bars as type,
+
+>* 'BlueDataBar', 'GreenDataBar', 'RedDataBar', 'OrangeDataBar', 'LightBlueDataBar', 'PurpleDataBar'.
+
+## Color Scales
+
+Using color scales, you can format your cells with two or three colors, where different color shades represent the different cell values. In the Green-Yellow-Red(GYR) Color Scale, the cell that holds the minimum value is colored as red. The cell that holds the median is colored as yellow, and the cell that holds the maximum value is colored as green. All other cells are colored proportionally.
+
+The following options can be given for the color scales as type,
+
+>* 'GYRColorScale', 'RYGColorScale', 'GWRColorScale', 'RWGColorScale', 'BWRColorScale', 'RWBColorScale', 'WRColorScale', 'RWColorScale', 'GWColorScale', 'WGColorScale', 'GYColorScale', 'YGColorScale'.
+
+## Icon Sets
+
+Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%.
+
+The following options can be given for the icon sets as type,
+
+>* 'ThreeArrows', 'ThreeArrowsGray', 'FourArrowsGray', 'FourArrows', 'FiveArrowsGray', 'FiveArrows', 'ThreeTrafficLights1', 'ThreeTrafficLights2', 'ThreeSigns', 'FourTrafficLights', 'FourRedToBlack', 'ThreeSymbols', 'ThreeSymbols2', 'ThreeFlags', 'FourRating', 'FiveQuarters', 'FiveRating', 'ThreeTriangles', 'ThreeStars', 'FiveBoxes'.
+
+## Custom Format
+
+Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline.
+
+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.
+
+## Clear Rules
+
+You can clear the 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.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "/document-processing/code-snippet/spreadsheet/react/conditional-formatting-cs1" %}
+
+## Limitations of Conditional formatting
+
+The following features have some limitations in Conditional Formatting:
+
+* Insert row/column between the conditional formatting.
+* Conditional formatting with formula support.
+* Copy and paste the conditional formatting applied cells.
+* Custom rule support.
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/custom-number-formatting.md b/Document-Processing/Excel/Spreadsheet/React/custom-number-formatting.md
new file mode 100644
index 0000000000..59039dafa6
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/custom-number-formatting.md
@@ -0,0 +1,136 @@
+---
+layout: post
+title: Custom and Culture Number Formats | Syncfusion React Spreadsheet
+description: Custom number formats and culture-based formats in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Formatting
+platform: document-processing
+documentation: ug
+---
+
+# 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` method.
+
+The different types of custom number format populated in the custom number format dialog are,
+
+| Type | Format Code | Format ID |
+|-------|---------|---------|
+| General(default) | NA | 0 |
+| Number | `0` | 1 |
+| Number | `0.00` | 2 |
+| Number | `#,##0` | 3 |
+| Number | `#,##0.00` | 4 |
+| Number | `#,##0_);(#,##0)` | 37 |
+| Number | `#,##0_);[Red](#,##0)` | 38 |
+| Number | `#,##0.00_);(#,##0.00)` | 39 |
+| Number | `#,##0.00_);[Red](#,##0.00)` | 40 |
+| Currency | `$#,##0_);($#,##0)` | 5 |
+| Currency | `$#,##0_);[Red]($#,##0)` | 6 |
+| Currency | `$#,##0.00_);($#,##0.00)` | 7 |
+| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 |
+| Percentage | `0%` | 9 |
+| Percentage | `0.00%` | 10 |
+| Scientific |`0.00E+00` | 11 |
+| Scientific |`##0.0E+0` | 48 |
+| Fraction | `# ?/?` | 12 |
+| Fraction | `# ??/??` | 13 |
+| ShortDate | `m/d/yyyy` | 14 |
+| Custom | `d-mmm-yy` | 15 |
+| Custom | `d-mmm` | 16 |
+| Custom | `mmm-yy` | 17 |
+| Custom | `h:mm AM/PM` | 18 |
+| Custom | `h:mm:ss AM/PM` | 19 |
+| Custom | `h:mm` | 20 |
+| Custom | `h:mm:ss` | 21 |
+| Custom | `m/d/yyyy h:mm` | 22 |
+| Custom | `mm:ss` | 45 |
+| Custom | `mm:ss.0` | 47 |
+| Text | `@` | 49 |
+| Custom | `[h]:mm:ss` | 46 |
+| Accounting | `_($* #,##0_);_($* (#,##0);_($* "-"_);_(@_)` | 42 |
+| Accounting | `_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)` | 41 |
+| 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.
+
+The following code example shows the number formatting in cell data.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "/document-processing/code-snippet/spreadsheet/react/numberformat-cs1" %}
+
+## Configure culture-based custom format
+
+Previously, the custom format dialog always displayed formats using the English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version `27.1.*`, the custom format dialog will now display formats according to the applied culture. You can select a culture-based number format from the dialog or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. Then, click "Apply" to apply the culture-specific custom format to the selected cells.
+
+The spreadsheet allows customization of formats in the custom format dialog using the `configureLocalizedFormat` method. In this method, you need to pass a collection containing the default number format IDs and their corresponding format codes as arguments. Based on this collection, the custom format dialog will 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.
+
+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 code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture.
+
+```js
+import { configureLocalizedFormat } from '@syncfusion/ej2-react-spreadsheet';
+
+const deLocaleFormats = [
+ { id: 14, code: 'dd.MM.yyyy' },
+ { id: 15, code: 'dd. MMM yy' },
+ { id: 16, code: 'dd. MMM' },
+ { id: 17, code: 'MMM yy' },
+ { id: 20, code: 'hh:mm' },
+ { id: 21, code: 'hh:mm:ss' },
+ { id: 22, code: 'dd.MM.yyyy hh:mm' },
+ { id: 37, code: '#,##0;-#,##0' },
+ { id: 38, code: '#,##0;[Red]-#,##0' },
+ { id: 39, code: '#,##0.00;-#,##0.00' },
+ { id: 40, code: '#,##0.00;[Red]-#,##0.00' },
+ { id: 5, code: '#,##0 "€";-#,##0 "€"' },
+ { id: 6, code: '#,##0 "€";[Red]-#,##0 "€"' },
+ { id: 7, code: '#,##0.00 "€";-#,##0.00 "€"' },
+ { id: 8, code: '#,##0.00 "€";[Red]-#,##0.00 "€"' },
+ { id: 41, code: '_-* #,##0_-;-* #,##0_-;_-* "-"_-;_-@_-' },
+ { id: 42, code: '_-* #,##0 "€"_-;-* #,##0 "€"_-;_-* "-" "€"_-;_-@_-' },
+ { id: 43, code: '_-* #,##0.00_-;-* #,##0.00_-;_-* "-"??_-;_-@_-' },
+ { id: 44, code: '_-* #,##0.00 "€"_-;-* #,##0.00 "€"_-;_-* "-"?? "€"_-;_-@_-' }
+];
+
+// Mapping culture-based number formats for the "de" culture: The "spreadsheetRef.current" parameter is an instance of the spreadsheet component, and the "deLocaleFormats" parameter is an array containing format codes and their corresponding format IDs for the "de" culture.
+configureLocalizedFormat(spreadsheetRef.current, deLocaleFormats);
+```
+
+The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/globalization-cs1" %}
diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting.md
index 2595d8f999..4070767444 100644
--- a/Document-Processing/Excel/Spreadsheet/React/formatting.md
+++ b/Document-Processing/Excel/Spreadsheet/React/formatting.md
@@ -9,362 +9,31 @@ documentation: ug
# Formatting in React Spreadsheet component
-Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are,
-* Number Formatting
-* Text Formatting
-* Cell Formatting
+Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are:
-To get start quickly with Formatting, you can check on this video:
+- Number Formatting
+- Text Formatting
+- Cell Formatting
-{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %}
-
-## Number Formatting
-
-Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are,
-
-| Types | Format Code | Format ID |
-|---------|---------|---------|
-| General(default) | NA | 0 |
-| Number | `0.00` | 2 |
-| Currency | `$#,##0.00` | NA |
-| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 |
-| ShortDate | `m/d/yyyy` | 14 |
-| LongDate | `dddd, mmmm dd, yyyy` | NA |
-| Time | `h:mm:ss AM/PM` | NA |
-| Percentage | `0.00%` | 10 |
-| Fraction | `# ?/?` | 12 |
-| Scientific |`0.00E+00` | 11 |
-| Text | `@` | 49 |
-
-Number formatting can be applied in following ways,
-* Using the `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.
-
-### 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` method.
-
-The different types of custom number format populated in the custom number format dialog are,
-
-| Type | Format Code | Format ID |
-|-------|---------|---------|
-| General(default) | NA | 0 |
-| Number | `0` | 1 |
-| Number | `0.00` | 2 |
-| Number | `#,##0` | 3 |
-| Number | `#,##0.00` | 4 |
-| Number | `#,##0_);(#,##0)` | 37 |
-| Number | `#,##0_);[Red](#,##0)` | 38 |
-| Number | `#,##0.00_);(#,##0.00)` | 39 |
-| Number | `#,##0.00_);[Red](#,##0.00)` | 40 |
-| Currency | `$#,##0_);($#,##0)` | 5 |
-| Currency | `$#,##0_);[Red]($#,##0)` | 6 |
-| Currency | `$#,##0.00_);($#,##0.00)` | 7 |
-| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 |
-| Percentage | `0%` | 9 |
-| Percentage | `0.00%` | 10 |
-| Scientific |`0.00E+00` | 11 |
-| Scientific |`##0.0E+0` | 48 |
-| Fraction | `# ?/?` | 12 |
-| Fraction | `# ??/??` | 13 |
-| ShortDate | `m/d/yyyy` | 14 |
-| Custom | `d-mmm-yy` | 15 |
-| Custom | `d-mmm` | 16 |
-| Custom | `mmm-yy` | 17 |
-| Custom | `h:mm AM/PM` | 18 |
-| Custom | `h:mm:ss AM/PM` | 19 |
-| Custom | `h:mm` | 20 |
-| Custom | `h:mm:ss` | 21 |
-| Custom | `m/d/yyyy h:mm` | 22 |
-| Custom | `mm:ss` | 45 |
-| Custom | `mm:ss.0` | 47 |
-| Text | `@` | 49 |
-| Custom | `[h]:mm:ss` | 46 |
-| Accounting | `_($* #,##0_);_($* (#,##0);_($* "-"_);_(@_)` | 42 |
-| Accounting | `_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)` | 41 |
-| 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.
-
-The following code example shows the number formatting in cell data.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/numberformat-cs1" %}
-
-## Configure culture-based custom format
-
-Previously, the custom format dialog always displayed formats using the English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version `27.1.*`, the custom format dialog will now display formats according to the applied culture. You can select a culture-based number format from the dialog or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. Then, click "Apply" to apply the culture-specific custom format to the selected cells.
-
-The spreadsheet allows customization of formats in the custom format dialog using the `configureLocalizedFormat` method. In this method, you need to pass a collection containing the default number format IDs and their corresponding format codes as arguments. Based on this collection, the custom format dialog will 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.
-
-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 code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture.
-
-```js
-import { configureLocalizedFormat } from '@syncfusion/ej2-react-spreadsheet';
-
-const deLocaleFormats = [
- { id: 14, code: 'dd.MM.yyyy' },
- { id: 15, code: 'dd. MMM yy' },
- { id: 16, code: 'dd. MMM' },
- { id: 17, code: 'MMM yy' },
- { id: 20, code: 'hh:mm' },
- { id: 21, code: 'hh:mm:ss' },
- { id: 22, code: 'dd.MM.yyyy hh:mm' },
- { id: 37, code: '#,##0;-#,##0' },
- { id: 38, code: '#,##0;[Red]-#,##0' },
- { id: 39, code: '#,##0.00;-#,##0.00' },
- { id: 40, code: '#,##0.00;[Red]-#,##0.00' },
- { id: 5, code: '#,##0 "€";-#,##0 "€"' },
- { id: 6, code: '#,##0 "€";[Red]-#,##0 "€"' },
- { id: 7, code: '#,##0.00 "€";-#,##0.00 "€"' },
- { id: 8, code: '#,##0.00 "€";[Red]-#,##0.00 "€"' },
- { id: 41, code: '_-* #,##0_-;-* #,##0_-;_-* "-"_-;_-@_-' },
- { id: 42, code: '_-* #,##0 "€"_-;-* #,##0 "€"_-;_-* "-" "€"_-;_-@_-' },
- { id: 43, code: '_-* #,##0.00_-;-* #,##0.00_-;_-* "-"??_-;_-@_-' },
- { id: 44, code: '_-* #,##0.00 "€"_-;-* #,##0.00 "€"_-;_-* "-"?? "€"_-;_-@_-' }
-];
-
-// Mapping culture-based number formats for the "de" culture: The "spreadsheetRef.current" parameter is an instance of the spreadsheet component, and the "deLocaleFormats" parameter is an array containing format codes and their corresponding format IDs for the "de" culture.
-configureLocalizedFormat(spreadsheetRef.current, deLocaleFormats);
-```
-
-The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "/document-processing/code-snippet/spreadsheet/react/globalization-cs1" %}
-
-## Text and cell formatting
-
-Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowcellformatting) property to enable or disable the text and cell formatting option in Spreadsheet. You can set the formats in following ways,
-* Using the `style` property, you can set formats to each cell at initial load.
-* Using the [`cellFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cellformat) method, you can set formats to a cell or range of cells.
-* You can also apply by clicking the desired format option from the ribbon toolbar.
-
-### Fonts
-
-Various font formats supported in the spreadsheet are font-family, font-size, bold, italic, strike-through, underline and font color.
-
-### Text Alignment
-
-You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` property.
-
-### Indents
-
-To enhance the appearance of text in a cell, you can change the indentation of a cell content using `textIndent` property.
-
-### Fill color
-
-To highlight cell or range of cells from whole workbook you can apply background color for a cell using `backgroundColor` property.
-
-### Borders
-
-You can add borders around a cell or range of cells to define a section of worksheet or a table. The different types of border options available in the spreadsheet are,
-
-| 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.|
-
-You can also change the color, size, and style of the border. The size and style supported in the spreadsheet are,
-
-| 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.|
-
-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.
-* Using the `setBorder` method, you can set various border options to a cell or range of cells.
-* Selecting the border options from ribbon toolbar.
-
-The following code example shows the style formatting in text and cells of the spreadsheet.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
+To get started quickly with Formatting, you can check this video:
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/cellformat-cs1" %}
-
-### Limitations of Formatting
-
-The following features are not supported in Formatting:
-
-* Insert row/column between the formatting applied cells.
-* Formatting support for row/column.
-
-## 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.
-
-> * The default value for the `allowConditionalFormat` property is `true`.
-
-### Apply Conditional Formatting
-
-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.
-
-Conditional formatting has the following types in the spreadsheet,
-
-### Highlight cells rules
-
-Highlight cells rules option in the conditional formatting enables you to highlight cells with a preset color depending on the cell's value.
-
-The following options can be given for the highlight cells rules as type,
-
->* 'GreaterThan', 'LessThan', 'Between', 'EqualTo', 'ContainsText', 'DateOccur', 'Duplicate', 'Unique'.
-
-The following preset colors can be used for formatting styles,
-
->* `"RedFT"` - Light Red Fill with Dark Red Text,
->* `"YellowFT"` - Yellow Fill with Dark Yellow Text,
->* `"GreenFT"` - Green Fill with Dark Green Text,
->* `"RedF"` - Red Fill,
->* `"RedT"` - Red Text.
-
-### Top bottom rules
-
-Top bottom rules option in the conditional formatting allows you to apply formatting to the cells that satisfy a statistical condition with other cells in the range.
-
-The following options can be given for the top bottom rules as type,
-
->* 'Top10Items', 'Bottom10Items', 'Top10Percentage', 'Bottom10Percentage', 'BelowAverage', 'AboveAverage'.
-
-### Data Bars
-
-You can apply data bars to represent the data graphically inside a cell. The longest bar represents the highest value and the shorter bars represent the smaller values.
-
-The following options can be given for the data bars as type,
-
->* 'BlueDataBar', 'GreenDataBar', 'RedDataBar', 'OrangeDataBar', 'LightBlueDataBar', 'PurpleDataBar'.
-
-### Color Scales
-
-Using color scales, you can format your cells with two or three colors, where different color shades represent the different cell values. In the Green-Yellow-Red(GYR) Color Scale, the cell that holds the minimum value is colored as red. The cell that holds the median is colored as yellow, and the cell that holds the maximum value is colored as green. All other cells are colored proportionally.
-
-The following options can be given for the color scales as type,
-
->* 'GYRColorScale', 'RYGColorScale', 'GWRColorScale', 'RWGColorScale', 'BWRColorScale', 'RWBColorScale', 'WRColorScale', 'RWColorScale', 'GWColorScale', 'WGColorScale', 'GYColorScale', 'YGColorScale'.
-
-### Icon Sets
-
-Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%.
-
-The following options can be given for the icon sets as type,
-
->* 'ThreeArrows', 'ThreeArrowsGray', 'FourArrowsGray', 'FourArrows', 'FiveArrowsGray', 'FiveArrows', 'ThreeTrafficLights1', 'ThreeTrafficLights2', 'ThreeSigns', 'FourTrafficLights', 'FourRedToBlack', 'ThreeSymbols', 'ThreeSymbols2', 'ThreeFlags', 'FourRating', 'FiveQuarters', 'FiveRating', 'ThreeTriangles', 'ThreeStars', 'FiveBoxes'.
-
-### Custom Format
-
-Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline.
-
-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.
-
-### Clear Rules
-
-You can clear the 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.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/conditional-formatting-cs1" %}
-
-### Limitations of Conditional formatting
+{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %}
-The following features have some limitations in Conditional Formatting:
+Below are the topic pages for Formatting. Select a topic to view details and examples:
-* Insert row/column between the conditional formatting.
-* Conditional formatting with formula support.
-* Copy and paste the conditional formatting applied cells.
-* Custom rule support.
+- [Number Formatting](./number-formatting)
+- [Custom & Culture Formats](./custom-number-formatting)
+- [Text & Cell Formatting](./text-cell-formatting)
+- [Conditional Formatting](./conditional-formatting)
## 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 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.
## See Also
-* [Rows and columns](./rows-and-columns)
-* [Hyperlink](./link)
-* [Sorting](./sort)
-* [Filtering](./filter)
-* [`Ribbon customization`](./ribbon#ribbon-customization)
\ No newline at end of file
+- [Rows and columns](./rows-and-columns)
+- [Hyperlink](./link)
+- [Sorting](./sort)
+- [Filtering](./filter)
+- [`Ribbon customization`](./ribbon#ribbon-customization)
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-duplicate.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-duplicate.png
new file mode 100644
index 0000000000..ac119ef881
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-duplicate.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-move-tab.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-move-tab.png
new file mode 100644
index 0000000000..fbb8b20df2
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-move-tab.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_remove_borders.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_remove_borders.png
new file mode 100644
index 0000000000..9687f16c78
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_remove_borders.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/number-formatting.md b/Document-Processing/Excel/Spreadsheet/React/number-formatting.md
new file mode 100644
index 0000000000..3d71e0f7b7
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/number-formatting.md
@@ -0,0 +1,53 @@
+---
+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
+platform: document-processing
+documentation: ug
+---
+
+# Number Formatting in React Spreadsheet component
+
+Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet.
+
+The different types of number formatting supported in Spreadsheet are:
+
+| Types | Format Code | Format ID |
+|---------|---------|---------|
+| General(default) | NA | 0 |
+| Number | `0.00` | 2 |
+| Currency | `$#,##0.00` | NA |
+| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 |
+| ShortDate | `m/d/yyyy` | 14 |
+| LongDate | `dddd, mmmm dd, yyyy` | NA |
+| Time | `h:mm:ss AM/PM` | NA |
+| Percentage | `0.00%` | 10 |
+| Fraction | `# ?/?` | 12 |
+| Scientific |`0.00E+00` | 11 |
+| Text | `@` | 49 |
+
+Number formatting can be applied in the following ways:
+
+- Using the `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 the ribbon toolbar.
+
+The following code example shows number formatting usage.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/numberformat-cs1" %}
diff --git a/Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md
new file mode 100644
index 0000000000..cf3cee7418
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md
@@ -0,0 +1,60 @@
+---
+layout: post
+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
+documentation: ug
+---
+
+# Text and cell formatting
+
+Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowcellformatting) property to enable or disable the text and cell formatting option in Spreadsheet.
+
+You can set formats in the following ways:
+
+- Using the `style` property to set formats at initial load.
+- Using the [`cellFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cellformat) method to set formats to a cell or range.
+- Using formatting options from the ribbon toolbar.
+
+## Fonts
+
+Supported font options: font-family, font-size, bold, italic, strike-through, underline and font color.
+
+## Text Alignment
+
+Align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` properties.
+
+## Indents
+
+Change the indentation of cell content using the `textIndent` property.
+
+## Fill color
+
+Apply background color to highlight a cell or range using the `backgroundColor` property.
+
+## Borders
+
+You can add borders around a cell or range of cells to define a section of worksheet or a table. To know more about borders, see [Borders](./border).
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "/document-processing/code-snippet/spreadsheet/react/cellformat-cs1" %}
+
+## Limitations of Formatting
+
+- Insert row/column between the formatting applied cells is not supported.
+- Formatting support for row/column is limited.
diff --git a/Document-Processing/Excel/Spreadsheet/React/worksheet.md b/Document-Processing/Excel/Spreadsheet/React/worksheet.md
index 85419436f3..6229f641fe 100644
--- a/Document-Processing/Excel/Spreadsheet/React/worksheet.md
+++ b/Document-Processing/Excel/Spreadsheet/React/worksheet.md
@@ -132,6 +132,35 @@ The following code example shows the three types of sheet visibility state.
{% previewsample "/document-processing/code-snippet/spreadsheet/react/sheet-visiblity-cs1" %}
+## Duplicate sheet
+
+The Spreadsheet component allows you to create a copy of an existing worksheet along with its data, formatting, and configurations. Duplicating a sheet is useful when you want to reuse the same structure or data without manually recreating it.
+
+You can duplicate a worksheet in the following way,
+
+Right-click on the sheet tab, and then select the `Duplicate` option from the context menu.
+
+When the `Duplicate` option is selected, a new worksheet is created as an exact copy of the selected sheet and is placed next to it. The duplicated sheet will automatically be assigned a unique name to avoid conflicts with existing sheet names.
+
+
+
+## Move sheet
+
+The Spreadsheet component provides options to rearrange worksheets by moving them to the left or right within the sheet tab panel. This helps you organize worksheets in the required order.
+
+You can move a worksheet using the following way,
+
+Right-click on the sheet tab, and then select either `Move Left` or `Move Right` option from the context menu.
+
+Move sheet options
+
+`Move Left` – Moves the selected worksheet one position to the left.
+`Move Right` – Moves the selected worksheet one position to the right.
+
+The Move Left and Move Right options are enabled only when there are two or more worksheets available in the Spreadsheet. These options are automatically disabled when the selected sheet is already at the first or last position.
+
+
+
## 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.
diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx
new file mode 100644
index 0000000000..d7116ddd1a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { CellStyleModel } from '@syncfusion/ej2-react-spreadsheet';
+import { data } from './datasource';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+ const headerStyle = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '2px solid #e0e0e0' };
+
+ const onCreated = () => {
+ const spreadsheet = spreadsheetRef.current;
+ if (!spreadsheet) return;
+ // Apply various borders programmatically to demonstrate types
+ // Top border for first column header cells
+ spreadsheet.setBorder({ border: '2px dashed #0078d4' }, 'A1', 'Top');
+ // Left and Right borders for header row
+ spreadsheet.setBorder({ border: '1px solid #333' }, 'A3:D12');
+ spreadsheet.setBorder({ borderRight: '1px dotted #d14' }, 'E3:E12');
+ // Horizontal borders on a block
+ spreadsheet.setBorder({ border: '1px solid #040404' }, 'A5:E12', 'Horizontal');
+ // Vertical borders on a block
+ spreadsheet.setBorder({ border: '1px solid #888' }, 'B3:B12', 'Vertical');
+ // Outside border for a range
+ spreadsheet.setBorder({ border: '2px solid #000' }, 'B3:B12', 'Outer');
+ // Inside borders for a range
+ spreadsheet.setBorder({ border: '1px dotted #6a1b9a' }, 'E4:E12', 'Inside');
+ };
+
+ // Define sheet model with per-cell border styles
+ const sheets = [
+ {
+ showGridLines: true,
+ rows: [
+ { height: 40, cells: [{ colSpan: 5, value: 'Order Summary', style: headerStyle }] },
+ {
+ index: 1,
+ cells: [
+ { index: 0, style: { borderLeft: '1px double #0a0', borderBottom: '1px double #0a0' } },
+ { index: 1, style: { borderBottom: '1px double #0a0' } },
+ { index: 2, style: { borderBottom: '1px double #0a0' } },
+ { index: 3, style: { borderBottom: '1px double #0a0' } },
+ { index: 4, style: { borderBottom: '1px double #0a0', borderRight: '1px double #0a0' } }
+ ]
+ }
+ ],
+ ranges: [
+ { dataSource: data, startCell: 'A2' }
+ ],
+ columns: [
+ { width: 100 },
+ { width: 200 },
+ { width: 110 },
+ { width: 140 },
+ { width: 90 }
+ ]
+ }
+ ];
+
+ return (
+