Documentation(EJ2-1015310): add User Interface Customization details in react spreadsheet ug documentation.

Document-Processing-toc.html

@@ -5597,6 +5597,14 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/keyboard-shortcuts">Keyboard Shortcuts</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/freeze-pane">Freeze Panes</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/template">Templates</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/ui-customization">User Interface Customization</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/user-interface-customization/custom-cell-templates">Create Custom Cell Templates</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/user-interface-customization/customize-context-menu">Customize Context Menu</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/user-interface-customization/customize-filemenu">Customize File Menu</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/user-interface-customization/theming-and-styling">Theming and Styling</a></li>
+								</ul>
+							</li>
 							<li>How To
 								<ul>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>

Document-Processing/Excel/Spreadsheet/React/context-menu.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Context menu in React Spreadsheet component
 
-Context Menu is used to improve user interaction with Spreadsheet using the popup menu. This will open when right-clicking on Cell/Column Header/Row Header/ Pager in the Spreadsheet. You can use [`enableContextMenu`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablecontextmenu) property to enable/disable context menu.
+Context Menu is used to improve user interaction with Spreadsheet using the popup menu. This will open when right-clicking on Cell/Column Header/Row Header/ Pager in the Spreadsheet. You can use [`enableContextMenu`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enablecontextmenu) property to enable/disable context menu.
 
 > The default value for the `enableContextMenu` property is `true`.
 
@@ -19,28 +19,28 @@ Please find the table below for default context menu items and their actions.
 
 | Context Menu items | Action |
 |-------|---------|
-| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) | Cut the selected cells data to the clipboard, you can select a cell where you want to move the data. |
-| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) | Copy the selected cells data to the clipboard, so that you can paste it to somewhere else. |
-| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. |
-| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | `Values` - Paste the data values from clipboard to spreadsheet.  `Formats` - Paste the data formats from  <br/> clipboard to spreadsheet. |
-| [`Filter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#filter) | Perform filtering to the selected cells based on an active cell’s value. |
-| [`Sort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sort) | Perform sorting to the selected range of cells by ascending or descending. |
-| [`Hyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hyperlink) | Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets  <br/> in the Spreadsheet. |
+| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) | Cut the selected cells data to the clipboard, you can select a cell where you want to move the data. |
+| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) | Copy the selected cells data to the clipboard, so that you can paste it to somewhere else. |
+| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. |
+| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | `Values` - Paste the data values from clipboard to spreadsheet.  `Formats` - Paste the data formats from  <br/> clipboard to spreadsheet. |
+| [`Filter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#filter) | Perform filtering to the selected cells based on an active cell’s value. |
+| [`Sort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) | Perform sorting to the selected range of cells by ascending or descending. |
+| [`Hyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hyperlink) | Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets  <br/> in the Spreadsheet. |
 
 ## Context Menu Items in Row Header / Column Header
 
 Please find the table below for default context menu items and their actions.
 
 | Context Menu items | Action |
 |-------|---------|
-| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) | Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data. |
-| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. |
-| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. |
-| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from  <br/> clipboard to spreadsheet. |
-| [`Insert Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertcolumn) | Insert new rows or columns into the worksheet. |
-| [`Delete Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) / [`Delete Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) | Delete existing rows or columns from the worksheet. |
-| [`Hide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidecolumn) | Hide the rows or columns. |
-| [`UnHide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidecolumn) | Show the hidden rows or columns. |
+| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) | Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data. |
+| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. |
+| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. |
+| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from  <br/> clipboard to spreadsheet. |
+| [`Insert Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertcolumn) | Insert new rows or columns into the worksheet. |
+| [`Delete Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete) / [`Delete Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete) | Delete existing rows or columns from the worksheet. |
+| [`Hide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hidecolumn) | Hide the rows or columns. |
+| [`UnHide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hidecolumn) | Show the hidden rows or columns. |
 
 ## Context Menu Items in Pager
 
@@ -51,73 +51,15 @@ Please find the table below for default context menu items and their actions.
 | `Insert` | Insert a new worksheet in front of an existing worksheet in the spreadsheet. |
 | `Delete` | Delete the selected worksheet from the spreadsheet. |
 | `Rename` | Rename the selected worksheet. |
-| [`Protect Sheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. |
-| [`Hide`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hide) |Hide the selected worksheet. |
-
-## Context Menu Customization
-
-You can perform the following context menu customization options in the spreadsheet
-
-* Add Context Menu Items
-* Remove Context Menu Items
-* Enable/Disable Context Menu Items
-
-### Add Context Menu Items
-
-You can add the custom items in context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addcontextmenuitems) in `contextmenuBeforeOpen` event
-
-In this demo, Custom Item is added after the Paste item in the context menu.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/context-menu-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/context-menu-cs1/app/app.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/context-menu-cs1" %}
-
-### Remove Context Menu Items
-
-You can remove the items in context menu using the [`removeContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removecontextmenuitems) in `contextmenuBeforeOpen` event
-
-In this demo, Insert Column item has been removed from the row/column header context menu.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/context-menu-cs2/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/context-menu-cs2/app/app.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/context-menu-cs2" %}
-
-### Enable/Disable Context Menu Items
-
-You can enable/disable the items in context menu using the [`enableContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablecontextmenuitems) in `contextmenuBeforeOpen` event
-
-In this demo, Rename item is disabled in the pager context menu.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/context-menu-cs3/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/context-menu-cs3/app/app.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/context-menu-cs3" %}
+| [`Protect Sheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. |
+| [`Hide`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hide) |Hide the selected worksheet. |
 
 ## 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.
 
 ## See Also
 
+* [Customize context menu](./user-interface-customization/customize-context-menu)
 * [Worksheet](./worksheet)
 * [Rows and columns](./rows-and-columns)

Document-Processing/Excel/Spreadsheet/React/formatting.md

@@ -20,7 +20,7 @@ To get start quickly with Formatting, you can check on this video:
 
 ## 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,
+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 |
 |---------|---------|---------|
@@ -38,7 +38,7 @@ Number formatting provides a type for your data in the Spreadsheet. Use the [`al
 
 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.
+* 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
@@ -87,7 +87,7 @@ The different types of custom number format populated in the custom number forma
 | 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.
+* 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.
@@ -171,9 +171,9 @@ The following code example demonstrates how to configure culture-based formats f
 
 ## 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,
+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.
+* 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
@@ -254,7 +254,7 @@ The following features are not supported in Formatting:
 
 ## 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 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`.
 
@@ -263,7 +263,7 @@ Conditional formatting helps you to format a cell or range of cells based on the
 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 [`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,
@@ -329,7 +329,7 @@ In the MAY and JUN columns, we have applied conditional formatting custom format
 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.
+* Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -367,4 +367,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-
 * [Hyperlink](./link)
 * [Sorting](./sort)
 * [Filtering](./filter)
-* [`Ribbon customization`](./ribbon#ribbon-customization)
+* [`Ribbon customization`](./ribbon#ribbon-customization)