docx-js/docs/usage/tables.md

Tables

You can create tables with docx. More information can be found here.

Create Table

To create a table, simply use the createTable() method on a document.

const table = doc.createTable([NUMBER OF ROWS], [NUMBER OF COLUMNS]);

Alternatively, you can create a table object directly, and then add it in the document

const table = new Table(4, 4);
doc.addTable(table);

The snippet below creates a table of 2 rows and 4 columns.

const table = doc.createTable(2, 4);

// Or

const table = new Table(2, 4);
doc.addTable(table);

Rows and Columns

You can get a row or a column from a table like so, where index is a number:

Get Row

const row = doc.getRow(index);

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:

row.mergeCells(startIndex, endIndex);

You can get a cell from a row by using the getCell() method, where index is the row index:

row.getCell(index);

Get Column

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:

column.mergeCells(startIndex, endIndex);

You can get a cell from a column by using the getCell() method, where index is the column index:

column.getCell(index);

Cells

The createTable() method created a table with cells. To access the cell, use the getCell() method.

const cell = table.getCell([ROW INDEX], [COLUMN INDEX]);

You can also get a cell from a column or a row with getCell(), mentioned previously.

For example:

const cell = table.getCell(0, 2);

const cell = row.getCell(0);

const cell = column.getCell(2);

Add paragraph to a cell

Once you have got the cell, you can add data to it with the addParagraph() method.

cell.addParagraph(new Paragraph("Hello"));

Set width of a cell

You can specify the width of a cell using:

cell.Properties.setWidth(width, format)

format can be:

• WidthType.AUTO
• WidthType.DXA: value is in twentieths of a point
• WidthType.NIL: is considered as zero
• WidthType.PCT: percent of table width

Example

cell.Properties.setWidth(100, WidthType.DXA);

cell.Properties.setWidth('50%', WidthType.PCT);

Borders

BorderStyle can be imported from docx. Size determines the thickness. HTML color can be a hex code or alias such as red.

cell.Borders.addTopBorder([BorderStyle], [SIZE], [HTML COLOR]);

cell.Borders.addBottomBorder([BorderStyle], [SIZE], [HTML COLOR]);

cell.Borders.addStartBorder([[BorderStyle]], [SIZE], [HTML COLOR]);

cell.Borders.addEndBorder([BorderStyle], [SIZE], [HTML COLOR]);

Example

import { BorderStyle } from "docx";

cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green");
cell.Borders.addEndBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");

Google DOCS

Google DOCS does not support start and end borders, instead they use left and right borders. So to set left and right borders for Google DOCS you should use:

import { BorderStyle } from "docx";

cell.Borders.addLeftBorder(BorderStyle.DOT_DOT_DASH, 3, "green");
cell.Borders.addRightBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");

Set Width

import { WidthType } from "docx";

table.setWidth([WIDTH], [OPTIONAL WidthType. Defaults to DXA]);

For example:

table.setWidth(4535, WidthType.DXA);

Vertical Align

Sets the vertical alignment of the contents of the cell

import { VerticalAlign } from "docx";

cell.setVerticalAlign([VerticalAlign TYPE]);

For example, to center align a cell:

cell.setVerticalAlign(VerticalAlign.CENTER);

Rows

To get a row, use the getRow method on a table. There are a handful of methods which you can apply to a row which will be explained below.

table.getRow([ROW INDEX]);

Merge cells together

Merging on a row

First obtain the row, and call mergeCells(). The first argument is where the merge should start. The second argument is where the merge should end.

table.getRow(0).mergeCells([FROM INDEX], [TO INDEX]);

Example

This will merge 3 cells together starting from index 0:

table.getRow(0).mergeCells(0, 2);

Merging on a column

It has not been implemented yet, but it will follow a similar structure as merging a row.

Nested Tables

To have a table within a table

cell.addTable(new Table(1, 1));

Pagination

###Prevent row pagination To prevent breaking contents of a row across multiple pages, call cantSplit():

table.getRow(0).setCantSplit();

###Repeat row If a table is paginated on multiple pages, it is possible to repeat a row at the top of each new page calling setTableHeader():

table.getRow(0).setTableHeader();

Examples

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts

Custom borders

Example showing how to add colourful borders to tables

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.ts

Adding images

Example showing how to add images to tables

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo24.ts

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo36.ts

Alignment of text in a cell

Example showing how align text in a table cell

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo31.ts

Merging rows

Example showing merging of rows

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo32.ts

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo41.ts

Merging columns

Example showing merging of columns

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo43.ts

Floating tables

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo34.ts