Documentation(EJ2-1019334): Content Enhancement with Formatting Topic Segmentation

Document-Processing-toc.html

@@ -5432,7 +5432,13 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/context-menu">Context Menu</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/formulas">Formulas</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/data-validation">Data Validation</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/formatting">Formatting</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/formatting">Formatting</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/number-formatting">Number Formatting</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/conditional-formatting">Conditional Formatting</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/text-cell-formatting">Text Cell Formatting</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/illustrations">Illustrations</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/rows-and-columns">Rows and Columns</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/sort">Sorting</a></li>
@@ -5446,8 +5452,8 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/protect-sheet">Protection</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/searching">Find and Replace</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/undo-redo">Undo and Redo</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/ribbon">Ribbon</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/print">Print</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/cell-border">Cell Border</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/performance-best-practices">Performance Best Practices</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/global-local">Globalization</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/accessibility">Accessibility</a></li>

Document-Processing/Excel/Spreadsheet/React/cell-border.md

@@ -0,0 +1,83 @@
+---
+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.
+
+![Remove borders in spreadsheet](./images/spreadsheet_remove_borders.png)
+
+## 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
+
+* [Rows and columns](./rows-and-columns)
+* [Text and cell formatting](./text-cell-formatting)

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.