Skip to content

1043289-Update UG Documentation in React Platform #3827

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
+39 −39
Open

1043289-Update UG Documentation in React Platform #3827

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
78 changes: 39 additions & 39 deletions Document-Processing/Word/Word-Processor/angular/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ 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 tables. You can select and edit them 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.

```typescript
```ts
this.documentEditor.editor.insertTable(3,3);
```

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

You can use the [maximumRows](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings#maximumrows/) property to set the maximum number of rows allowed while inserting a table in the Document Editor component.
You can use the [maximumRows](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings#maximumrows) property to set the maximum number of rows allowed while inserting a table in the Document Editor component.

```ts
@Component({
Expand All @@ -37,15 +37,15 @@ 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. You can set any value less than or equal to 32767 to this property.

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

You can use the [maximumColumns](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings#maximumcolumns/) property to set the maximum number of Columns allowed while inserting a table in the Document Editor component.
You can use the [maximumColumns](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings#maximumcolumns) property to set the maximum number of columns allowed while inserting a table in the Document Editor component.

Refer to the following sample code.

Expand All @@ -60,24 +60,24 @@ 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. You can set any value less than or equal to 63 to this property.

## Insert rows

You can add a row (or several rows) above or below the row at cursor position by using the [`insertRow`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertrow/) method. This method accepts the following parameters:
You can add a row (or several rows) above or below the row at the cursor position by using the [`insertRow`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertrow) method. This method accepts the following parameters:

Parameter | Type | Description
----------|------|-------------
above(optional) | boolean | This is optional and if omitted, it takes the value as false and inserts below the row at cursor position.
count(optional) | number | This is optional and if omitted, it takes the value as 1.
above(optional) | boolean | This is optional. If omitted, it defaults to false and inserts below the row at the cursor position.
count(optional) | number | This is optional. If omitted, it defaults to 1.

Refer to the following sample code.

```typescript
```ts
//Inserts a row below the row at cursor position
this.documentEditor.editor.insertRow();
//Inserts a row above the row at cursor position
Expand All @@ -88,16 +88,16 @@ this.documentEditor.editor.insertRow(true, 3);

## Insert columns

You can add a column (or several columns) to the left or right of the column at cursor position by using the [`insertColumn`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertcolumn/) method. This method accepts the following parameters:
You can add a column (or several columns) to the left or right of the column at the cursor position by using the [`insertColumn`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertcolumn) method. This method accepts the following parameters:

Parameter | Type | Description
----------|------|-------------
left(optional) | boolean| This is optional and if omitted, it takes the value as false and inserts to the right of column at cursor position.
count(optional) | number | This is optional and if omitted, it takes the value as 1.
left(optional) | boolean| This is optional. If omitted, it defaults to false and inserts to the right of the column at the cursor position.
count(optional) | number | This is optional. If omitted, it defaults to 1.

Refer to the following sample code.

```typescript
```ts
//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.
Expand All @@ -110,78 +110,78 @@ this.documentEditor.editor.insertColumn(false, 2);

If the cursor position is inside a table, you can select the entire table by using the following sample code.

```typescript
```ts
this.documentEditor.selection.selectTable();
```

### Select row

You can select the entire row at cursor position by using the following sample code.
You can select the entire row at the cursor position by using the following sample code.

```typescript
```ts
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

You can select the entire column at cursor position by using the following sample code.
You can select the entire column at the cursor position by using the following sample code.

```typescript
```ts
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

You can select the cell at cursor position by using the following sample code.
You can select the cell at the cursor position by using the following sample code.

```typescript
```ts
this.documentEditor.selection.selectCell();
```

## Delete table

Document Editor allows you to delete the entire table. You can use the [`deleteTable()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#deletetable/) method of editor instance, if selection is in table. Refer to the following sample code.
Document Editor allows you to delete the entire table. You can use the [`deleteTable()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#deletetable) method of the editor instance when the selection is in a table. Refer to the following sample code.

```typescript
```ts
this.documentEditor.editor.deleteTable();
```

## Delete row

Document Editor allows you to delete the selected number of rows. You can use the [`deleteRow()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#deleterow/) method of editor instance to delete the selected number of rows, if selection is in table. Refer to the following sample code.
Document Editor allows you to delete the selected number of rows. You can use the [`deleteRow()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#deleterow) method of the editor instance to delete the selected number of rows when the selection is in a table. Refer to the following sample code.

```typescript
```ts
this.documentEditor.editor.deleteRow();
```

## Delete column

Document Editor allows you to delete the selected number of columns. You can use the [`deleteColumn()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#deletecolumn/) method of editor instance to delete the selected number of columns, if selection is in table. Refer to the following sample code.
Document Editor allows you to delete the selected number of columns. You can use the [`deleteColumn()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#deletecolumn) method of the editor instance to delete the selected number of columns when the selection is in a table. Refer to the following sample code.

```typescript
```ts
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 the selection must align on the left and right. To horizontally merge the cells, the rows within the selection must align on the top and bottom.
Refer to the following sample code.

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

## Positioning the table

Document Editor preserves the position properties of the table and displays the table based on position properties. It does not support modifying the position properties. Whereas the table will be automatically moved along with text edited if it is positioned relative to the paragraph.
Document Editor preserves the position properties of the table and renders the table based on those properties. Position properties cannot be modified programmatically, but tables positioned relative to a paragraph will move automatically with text edits.

## How to work with tables

The following sample demonstrates how to delete the table row or columns, merge cells and how to bind the API with button.
The following sample demonstrates how to delete table rows or columns, merge cells, and bind the API to a button.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand Down