smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve documentation

Browse Source
This commit is contained in:
Dolan Miu
2019-09-19 22:49:09 +01:00
parent f88a309d55
commit d2f82052b4
1 changed files with 90 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
docs/usage/tables.md
View File

@ -1,95 +1,128 @@
# Tables # Tables
You can create tables with `docx`. More information can be found [here](http://officeopenxml.com/WPtable.php). !> Paragraphs requires an understanding of [Sections](usage/sections.md).
## Create Table ## Intro
To create a table, simply create one with `new Table()`, then add it to the document: `doc.add()`. Create a simple table like so:
```ts
const table = doc.add(new Table({
rows: [NUMBER OF ROWS],
columns: [NUMBER OF COLUMNS]
});
```
Alternatively, you can create a table object directly, and then add it in the `document`
```ts
const table = new Table(4, 4);
doc.add(table);
```
The snippet below creates a table of 2 rows and 4 columns.
```ts ```ts
const table = new Table({ const table = new Table({
rows: 2, rows: [Array of `TableRow`s]
columns: 4,
}); });
doc.add(table);
``` ```
## Rows and Columns Then add the table in the `section`
You can get a row or a column from a table like so, where `index` is a number:
### Get Row
```ts ```ts
const row = doc.getRow(index); doc.addSection({
children: [table],
});
``` ```
With this, you can merge a row by using the `mergeCells()` method, where `startIndex` is the row number you want to merge from, and `endIndex` is where you want it to merge to: ## Table Row
A table consists of multiple `table rows`. Table rows have a list of `children` which accepts a list of `table cells` explained below. You can create a simple `table row` like so:
```ts ```ts
row.mergeCells(startIndex, endIndex); const tableRow = new TableRow({
children: [
new TableCell({
children: [new Paragraph("hello")],
}),
],
});
``` ```
You can get a cell from a `row` by using the `getCell()` method, where `index` is the row index: Or preferably, add the tableRow directly into the `table` without declaring a variable:
```ts ```ts
row.getCell(index); const table = new Table({
rows: [
new TableRow({
children: [
new TableCell({
children: [new Paragraph("hello")],
}),
],
}),
],
});
``` ```
### Get Column ### Options
```ts Here is a list of options you can add to the `table row`:
const column = doc.getColumn(index);
```
Again, you can merge a row by using the `mergeCells()` method, where `startIndex` is the row number you want to merge from, and `endIndex` is where you want it to merge to: | Property | Type | Notes |
| ----------- | ------------------------------------- | -------- |
```ts | children | `Array<TableCell>` | Required |
column.mergeCells(startIndex, endIndex); | cantSplit | `boolean` | Optional |
``` | tableHeader | `boolean` | Optional |
| height | `{ value: number, rule: HeightRule }` | Optional |
You can get a cell from a `column` by using the `getCell()` method, where `index` is the column index:
```ts
column.getCell(index);
```
## Cells ## Cells
To access the cell, use the `getCell()` method. Cells need to be added in the `table row`, you can create a table cell like:
```ts ```ts
const cell = table.getCell([ROW INDEX], [COLUMN INDEX]); const tableCell = new TableCell({
children: [new Paragraph("hello")],
});
``` ```
You can also get a cell from a `column` or a `row` with `getCell()`, mentioned previously. Or preferably, add the tableRow directly into the `table row` without declaring a variable:
For example:
```ts ```ts
const cell = table.getCell(0, 2); const tableRow = new TableRow({
children: [
const cell = row.getCell(0); new TableCell({
children: [new Paragraph("hello")],
const cell = column.getCell(2); }),
],
});
``` ```
| Property | Type | Notes |
| ----------- | ------------------------------------- | -------- |
| children | `Array<TableCell>` | Required |
| cantSplit | `boolean` | Optional |
| tableHeader | `boolean` | Optional |
| height | `{ value: number, rule: HeightRule }` | Optional |
### Options
readonly shading?: ITableShadingAttributesProperties;
readonly margins?: ITableCellMarginOptions;
readonly verticalAlign?: VerticalAlign;
readonly verticalMerge?: VMergeType;
readonly columnSpan?: number;
readonly borders?: {
readonly top?: {
readonly style: BorderStyle;
readonly size: number;
readonly color: string;
};
readonly bottom?: {
readonly style: BorderStyle;
readonly size: number;
readonly color: string;
};
readonly left?: {
readonly style: BorderStyle;
readonly size: number;
readonly color: string;
};
readonly right?: {
readonly style: BorderStyle;
readonly size: number;
readonly color: string;
};
};
readonly children: Array<Paragraph | Table>;
### Add paragraph to a cell ### Add paragraph to a cell
Once you have got the cell, you can add data to it with the `add()` method. Once you have got the cell, you can add data to it with the `add()` method.