Skip to content

1043289-Update UG Documentation in React platforms #3905

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
Vellaisamy5301 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

1043289-Update UG Documentation in React platforms #3905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 16 additions & 16 deletions Document-Processing/Word/Word-Processor/angular/table-format.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Table format in Angular Document editor component | Syncfusion
description: Learn here all about Table format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Table format in Angular DOCX Editor component | Syncfusion
description: Learn here all about Table format in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Table format
documentation: ug
domainurl: ##DomainURL##
---

# Table format in Angular Document editor component
# Table format in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) customizes the formatting of table, or table cells such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these formatting for selected cells, rows, or table in detail.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) customizes the formatting of a table or table cells such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these formatting for selected cells, rows, or a table in detail.

## Cell margins

Expand All @@ -27,7 +27,7 @@ this.documentEditor.selection.cellFormat.topMargin=5.4;
this.documentEditor.selection.cellFormat.bottomMargin=5.4;
```

You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from default cells margin of the table. Refer to the following sample code.
You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from the default cell margins of the table. Refer to the following sample code.

```typescript
//To change the left margin
Expand Down Expand Up @@ -72,18 +72,18 @@ this.documentEditor.selection.cellFormat.verticalAlignment='Bottom';

## Table alignment

The tables are aligned in document editor to ‘Left’, ‘Right’, or ‘Center’. Refer to the following sample code.
The tables are aligned in the document editor to ‘Left’, ‘Right’, or ‘Center’. Refer to the following sample code.

```typescript
this.documentEditor.selection.tableFormat.tableAlignment=’Center’;
this.documentEditor.selection.tableFormat.tableAlignment='Center';
```

## Cell width

Set the desired width of table cells that will be considered when the table is layouted. Refer to the following sample code.
Set the desired width of table cells that will be considered when the table is laid out. Refer to the following sample code.

```typescript
this.documentEditor.selection.cellFormat.preferredWidthType=’Point’;
this.documentEditor.selection.cellFormat.preferredWidthType='Point';
this.documentEditor.selection.cellFormat.preferredWidth=100;
```

Expand All @@ -110,7 +110,7 @@ Document Editor exposes API to customize the borders for table cells by specifyi
this.documentEditor.editor.applyBorders(borderSettings);
```

Please check below gif which illustrates how to apply border for selected cells through properties pane options - border color, line size and no border:
Please check the below gif which illustrates how to apply a border for selected cells through properties pane options - border color, line size and no border:

![ApplyBorderToSelectedCell_viaPropertiesPane](images/ApplyBorderToSelectedCell_viaPropertiesPane.gif)

Expand All @@ -129,34 +129,34 @@ this.documentEditor.selection.rowFormat.height=20;

### Header row

The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is at first row of the table, then you can define whether it as header row or not, using the following sample code.
The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is at the first row of the table, then you can define whether it is a header row or not, using the following sample code.

```typescript
this.documentEditor.selection.rowFormat.isHeader=true;
```

### Allow row break across pages

This property is valid if a table row does not fit in the current page during table layout. It defines whether a table row can be allowed to break. If the value is false, the entire row will be moved to the start of next page. You can modify this property for selected rows using the following sample code.
This property is valid if a table row does not fit in the current page during table layout. It defines whether a table row can be allowed to break. If the value is false, the entire row will be moved to the start of the next page. You can modify this property for selected rows using the following sample code.

```typescript
this.documentEditor.selection.rowFormat.allowRowBreakAcrossPages=false;
```

### Title

Document Editor expose API to get or set the table title of the selected table. Refer to the following sample code to set title.
Document Editor exposes API to get or set the table title of the selected table. Refer to the following sample code to set title.

```typescript
this.documenteditor.selection.tableFormat.title = 'Shipping Details';
this.documentEditor.selection.tableFormat.title = 'Shipping Details';
```

### Description

Document Editor expose API to get or set the table description of the selected image. Refer to the following sample code to set description.
Document Editor exposes API to get or set the table description of the selected table. Refer to the following sample code to set description.

```typescript
this.documenteditor.selection.tableFormat.description = 'Freight cost and shipping details';
this.documentEditor.selection.tableFormat.description = 'Freight cost and shipping details';
```

## Online Demo
Expand Down
16 changes: 8 additions & 8 deletions Document-Processing/Word/Word-Processor/angular/table-of-contents.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Table of contents in Angular Document editor component | Syncfusion
description: Learn here all about Table of contents in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Table of contents in Angular DOCX Editor component | Syncfusion
description: Learn here all about Table of contents in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Table of contents
documentation: ug
Expand All @@ -10,11 +10,11 @@ domainurl: ##DomainURL##

# Table of contents in Angular Document editor component

The table of contents in a document is same as the list of chapters at the beginning of a book. It lists each heading in the document and the page number, where that heading starts with various options to customize the appearance.
The table of contents in a document is the same as the list of chapters at the beginning of a book. It lists each heading in the document and the page number where that heading starts, with various options to customize the appearance.

## Inserting table of contents

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) exposes an API to insert table of contents at cursor position programmatically. You can specify the settings for table of contents explicitly. Otherwise, the default settings will be applied.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) exposes an API to insert table of contents at cursor position programmatically. You can specify the settings for table of contents explicitly. Otherwise, the default settings will be applied.

[`TableOfContentsSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/tableOfContentsSettings) contain the following properties:
* **startLevel**: Specifies the start level for constructing table of contents.
Expand All @@ -25,7 +25,7 @@ The table of contents in a document is same as the list of chapters at the begin
* **tabLeader**: Specifies the tab leader styles such as none, dot, hyphen, and underscore.
* **includeOutlineLevels**: Specifies whether the outline levels are included.

The following code illustrates how to insert table of content in document editor.
The following code illustrates how to insert a table of contents in the document editor.

```typescript
let tocSettings: TableOfContentsSettings =
Expand All @@ -49,11 +49,11 @@ this.documentEditor.editor.insertTableOfContents(tocSettings);

## Update or edit table of contents

You can update or edit the table of contents using the built-in context menu shown up by right-clicking it. Refer to the following screenshot.
You can update or edit the table of contents using the built-in context menu shown by right-clicking it. Refer to the following screenshot.

![Table of Contents](images/table-of-contents.png)

* **Update Field**: Updates the headings in table of contents with same settings by searching the entire document.
* **Update Field**: Updates the headings in the table of contents with the same settings by searching the entire document.
* **Edit Field**: Opens the built-in table of contents dialog and allows you to modify its settings.

You can also do it programmatically by using the exposed API. Refer to the following sample code.
Expand All @@ -67,7 +67,7 @@ You can also do it programmatically by using the exposed API. Refer to the follo

```

>Same method is used for inserting, updating, and editing table of contents. This will work based on the current element at cursor position and the optional settings parameter. If table of contents is present at cursor position, the update operation will be done based on the optional settings parameter. Otherwise, the insert operation will be done.
N> Same method is used for inserting, updating, and editing table of contents. This will work based on the current element at cursor position and the optional settings parameter. If table of contents is present at cursor position, the update operation will be done based on the optional settings parameter. Otherwise, the insert operation will be done.

## Online Demo

Expand Down
38 changes: 19 additions & 19 deletions Document-Processing/Word/Word-Processor/angular/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Table in Angular Document editor component | Syncfusion
description: Learn here all about Table in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Table in Angular DOCX Editor component | Syncfusion
description: Learn here all about Table in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Table
documentation: ug
domainurl: ##DomainURL##
---

# Table in Angular Document editor component
# Table in Angular Document Editor component

Tables are an efficient way to present information. [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) can display and edit the tables. You can select and edit tables through keyboard, mouse, or touch interactions. Document Editor exposes a rich set of APIs to perform these operations programmatically.
Tables are an efficient way to present information. [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) can display and edit the tables. You can select and edit tables through keyboard, mouse, or touch interactions. Document Editor exposes a rich set of APIs to perform these operations programmatically.

## Create a table

You can create and insert a table at cursor position by specifying the required number of rows and columns.
You can create and insert a table at the cursor position by specifying the required number of rows and columns.

Refer to the following sample code.

Expand All @@ -37,11 +37,11 @@ export class AppComponent {
}
```

When the maximum row limit is reached, an alert will appear, as follow
When the maximum row limit is reached, an alert will appear, as follows

![Row Limit Alert](images/Row_Limit_Alert.PNG)
![Row Limit Alert](images/Row_Limit_Alert.PNG)

>Note: The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property.
N> The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property.

## Set the maximum number of Columns when inserting a table

Expand All @@ -60,11 +60,11 @@ export class AppComponent {
}
```

When the maximum column limit is reached, an alert will appear, as follow
When the maximum column limit is reached, an alert will appear, as follows

![Column Limit Alert](images/Column_Limit_Alert.PNG)
![Column Limit Alert](images/Column_Limit_Alert.PNG)

>Note: The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property.
N> The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property.

## Insert rows

Expand All @@ -81,9 +81,9 @@ Refer to the following sample code.
//Inserts a row below the row at cursor position
this.documentEditor.editor.insertRow();
//Inserts a row above the row at cursor position
this.documentEditor.editor.insertRow(false);
this.documentEditor.editor.insertRow(true);
//Inserts three rows below the row at cursor position
this.documentEditor.editor.insertRow(true, 3);
this.documentEditor.editor.insertRow(false, 3);
```

## Insert columns
Expand All @@ -101,9 +101,9 @@ Refer to the following sample code.
//Insert a column to the right of the column at cursor position.
this.documentEditor.editor.insertColumn();
//Insert a column to the left of the column at cursor position.
this.documentEditor.editor.insertColumn(false);
this.documentEditor.editor.insertColumn(true);
//Insert two columns to the left of the column at cursor position.
this.documentEditor.editor.insertColumn(false, 2);
this.documentEditor.editor.insertColumn(true, 2);
```

### Select an entire table
Expand All @@ -122,7 +122,7 @@ You can select the entire row at cursor position by using the following sample c
this.documentEditor.selection.selectRow();
```

If current selection spans across cells of different rows, all these rows will be selected.
If the current selection spans across cells of different rows, all these rows will be selected.

### Select column

Expand All @@ -132,7 +132,7 @@ You can select the entire column at cursor position by using the following sampl
this.documentEditor.selection.selectColumn();
```

If current selection spans across cells of different columns, all these columns will be selected.
If the current selection spans across cells of different columns, all these columns will be selected.

### Select cell

Expand Down Expand Up @@ -168,11 +168,11 @@ this.documentEditor.editor.deleteColumn();

## Merge cells

You can merge cells vertically, horizontally, or combination of both to a single cell. To vertically merge the cells, the columns within selection should be even in left and right directions. To horizontally merge the cells, the rows within selection should be even in top and bottom direction.
You can merge cells vertically, horizontally, or a combination of both, into a single cell. To vertically merge the cells, the columns within selection should be even in left and right directions. To horizontally merge the cells, the rows within selection should be even in top and bottom direction.
Refer to the following sample code.

```typescript
this.documentEditor.editor.mergeCells()
this.documentEditor.editor.mergeCells();
```

## Positioning the table
Expand Down
Loading