Change table methods and document it

demo/demo11.ts

@@ -84,8 +84,7 @@ doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph")
     .basedOn("Normal");
 
 doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-doc
+doc.createParagraph("HEADING")
-    .createParagraph("HEADING")
     .heading1()
     .center();
 
@@ -111,8 +110,8 @@ const table = new Table(4, 4);
 table
     .getRow(0)
     .getCell(0)
-    .addContent(new Paragraph("Pole No."));
+    .addParagraph(new Paragraph("Pole No."));
-// table.Properties.width = 10000;
+
 doc.addTable(table);
 
 const arrboth = [
@@ -129,8 +128,6 @@ const arrboth = [
 arrboth.forEach((item) => {
     const para = doc.createParagraph();
     para.addImage(doc.createImage(fs.readFileSync(item.image)));
-    // para.Properties.width = 60;
-    // para.Properties.height = 90;
     doc.createParagraph(item.comment).style("normalPara2");
 });
 

demo/demo20.ts

@@ -8,8 +8,8 @@ const doc = new Document();
 const table = doc.createTable(4, 4);
 table
     .getCell(2, 2)
-    .addContent(new Paragraph("Hello"))
+    .addParagraph(new Paragraph("Hello"))
-    .CellProperties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red")
+    .Properties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red")
     .addBottomBorder(BorderStyle.DOUBLE, 3, "blue")
     .addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green")
     .addEndBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");

demo/demo24.ts

@@ -6,10 +6,10 @@ import { Document, Media, Packer, Paragraph } from "../build";
 const doc = new Document();
 
 const table = doc.createTable(4, 4);
-table.getCell(2, 2).addContent(new Paragraph("Hello"));
+table.getCell(2, 2).addParagraph(new Paragraph("Hello"));
 
 const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
-table.getCell(1, 1).addContent(image.Paragraph);
+table.getCell(1, 1).addParagraph(image.Paragraph);
 
 const packer = new Packer();
 

demo/demo31.ts

@@ -8,12 +8,12 @@ const doc = new Document();
 const table = doc.createTable(2, 2);
 table
     .getCell(1, 1)
-    .addContent(new Paragraph("This text should be in the middle of the cell"))
+    .addParagraph(new Paragraph("This text should be in the middle of the cell"))
-    .CellProperties.setVerticalAlign(VerticalAlign.CENTER);
+    .Properties.setVerticalAlign(VerticalAlign.CENTER);
 
 table
     .getCell(1, 0)
-    .addContent(
+    .addParagraph(
         new Paragraph(
             "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah",
         ).heading1(),

demo/demo32.ts

@@ -1,4 +1,4 @@
-// Example of how you would create a table and add data to it
+// Example of how you would merge cells together
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
 import { Document, Packer, Paragraph } from "../build";
@@ -7,24 +7,24 @@ const doc = new Document();
 
 let table = doc.createTable(2, 2);
 
-table.getCell(0, 0).addContent(new Paragraph("Hello"));
+table.getCell(0, 0).addParagraph(new Paragraph("Hello"));
 table.getRow(0).mergeCells(0, 1);
 
 doc.createParagraph("Another table").heading2();
 
 table = doc.createTable(2, 3);
-table.getCell(0, 0).addContent(new Paragraph("World"));
+table.getCell(0, 0).addParagraph(new Paragraph("World"));
 table.getRow(0).mergeCells(0, 2);
 
 doc.createParagraph("Another table").heading2();
 
 table = doc.createTable(2, 4);
-table.getCell(0, 0).addContent(new Paragraph("Foo"));
+table.getCell(0, 0).addParagraph(new Paragraph("Foo"));
 
-table.getCell(1, 0).addContent(new Paragraph("Bar1"));
+table.getCell(1, 0).addParagraph(new Paragraph("Bar1"));
-table.getCell(1, 1).addContent(new Paragraph("Bar2"));
+table.getCell(1, 1).addParagraph(new Paragraph("Bar2"));
-table.getCell(1, 2).addContent(new Paragraph("Bar3"));
+table.getCell(1, 2).addParagraph(new Paragraph("Bar3"));
-table.getCell(1, 3).addContent(new Paragraph("Bar4"));
+table.getCell(1, 3).addParagraph(new Paragraph("Bar4"));
 
 table.getRow(0).mergeCells(0, 3);
 

demo/demo34.ts

@@ -22,7 +22,7 @@ const table = doc.createTable(2, 2).float({
 table.setFixedWidthLayout();
 table.setWidth(4535, WidthType.DXA);
 
-table.getCell(0, 0).addContent(new Paragraph("Hello"));
+table.getCell(0, 0).addParagraph(new Paragraph("Hello"));
 table.getRow(0).mergeCells(0, 1);
 
 const packer = new Packer();

demo/demo4.ts

@@ -6,7 +6,7 @@ import { Document, Packer, Paragraph } from "../build";
 const doc = new Document();
 
 const table = doc.createTable(4, 4);
-table.getCell(2, 2).addContent(new Paragraph("Hello"));
+table.getCell(2, 2).addParagraph(new Paragraph("Hello"));
 
 const packer = new Packer();
 

docs/usage/tab-stops.md

@@ -2,7 +2,7 @@
 
 > Tab stops are useful, if you are unclear of what they are, [here is a link explaining](https://en.wikipedia.org/wiki/Tab_stop). It enables side by side text which is nicely laid out without the need for tables, or constantly pressing space bar.
 
-**Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm.
+!> **Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm.
 
 ![Word 2013 Tabs](http://www.teachucomp.com/wp-content/uploads/blog-4-22-2015-UsingTabStopsInWord-1024x577.png "Word 2013 Tab Stops")
 

docs/usage/tables.md

@@ -0,0 +1,144 @@
+# Tables
+
+You can create tables with `docx`. More information can be found [here](http://officeopenxml.com/WPtable.php).
+
+## How to
+
+To create a table, simply use the `createTable` method on a `document`.
+
+```ts
+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
+
+```ts
+const table = new Table(4, 4);
+doc.addTable(table);
+```
+
+The snippet below creates a table of 2 rows and 4 columns.
+
+```ts
+const table = doc.createTable(2, 4);
+
+// Or
+
+const table = new Table(2, 4);
+doc.addTable(table);
+```
+
+## Cells
+
+The above section created a table with cells. To access the cell, use the `getCell` method.
+
+```ts
+const cell = table.getCell([ROW INDEX], [COLUMN INDEX]);
+```
+
+```ts
+const cell = table.getCell(0, 2);
+```
+
+### Cell Properties & Styling
+
+With the cell's `Properties`, you csn change it's borders, set it's vertical alignment
+
+```ts
+cell.Properties;
+```
+
+## Borders
+
+BorderStyle can be imported from `docx`. Size determines the thickness. HTML color can be a hex code or alias such as `red`.
+
+```ts
+cell.Borders.addTopBorder([BorderStyle], [SIZE], [HTML COLOR]);
+```
+
+```ts
+cell.Borders.addBottomBorder([BorderStyle], [SIZE], [HTML COLOR]);
+```
+
+```ts
+cell.Borders.addStartBorder([[BorderStyle]], [SIZE], [HTML COLOR]);
+```
+
+```ts
+cell.Borders.addEndBorder([BorderStyle], [SIZE], [HTML COLOR]);
+```
+
+### Example
+
+```ts
+import { BorderStyle } from "docx";
+
+cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green");
+cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");
+```
+
+## Set Width
+
+```ts
+table.setWidth([WIDTH], [OPTIONAL WidthType]);
+```
+
+```ts
+table.setWidth(4535, WidthType.DXA);
+```
+
+## Vertical Align
+
+## Borders
+
+## 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.
+
+```ts
+table.getRow([ROW INDEX]);
+```
+
+### Add paragraph to a cell
+
+Once you have got the cell, you can add data to it with the `addParagraph` method.
+
+```ts
+cell.addParagraph(new Paragraph("Hello"));
+```
+
+## 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.
+
+```ts
+table.getRow(0).mergeCells([FROM INDEX], [TO INDEX]);
+```
+
+#### Example
+
+This will merge 3 cells together starting from index `0`:
+
+```ts
+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
+
+```ts
+cell.addTable(new Table(1, 1));
+```
+
+## Examples
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_

src/file/table/table-cell/table-cell.ts

@@ -14,7 +14,12 @@ export class TableCell extends XmlComponent {
         this.root.push(this.properties);
     }
 
-    public addContent(content: Paragraph | Table): TableCell {
+    public addParagraph(content: Paragraph): TableCell {
+        this.root.push(content);
+        return this;
+    }
+
+    public addTable(content: Table): TableCell {
         this.root.push(content);
         return this;
     }
@@ -35,11 +40,12 @@ export class TableCell extends XmlComponent {
 
     public createParagraph(text?: string): Paragraph {
         const para = new Paragraph(text);
-        this.addContent(para);
+        this.addParagraph(para);
+
         return para;
     }
 
-    public get CellProperties(): TableCellProperties {
+    public get Properties(): TableCellProperties {
         return this.properties;
     }
 }

src/file/table/table-row/table-row.ts

@@ -25,7 +25,7 @@ export class TableRow extends XmlComponent {
 
     public addGridSpan(index: number, cellSpan: number): TableCell {
         const remainCell = this.cells[index];
-        remainCell.CellProperties.addGridSpan(cellSpan);
+        remainCell.Properties.addGridSpan(cellSpan);
         this.cells.splice(index + 1, cellSpan - 1);
         this.root.splice(index + 2, cellSpan - 1);
 

src/file/table/table.spec.ts

@@ -111,19 +111,19 @@ describe("Table", () => {
             table
                 .getRow(0)
                 .getCell(0)
-                .addContent(new Paragraph("A1"));
+                .addParagraph(new Paragraph("A1"));
             table
                 .getRow(0)
                 .getCell(1)
-                .addContent(new Paragraph("B1"));
+                .addParagraph(new Paragraph("B1"));
             table
                 .getRow(1)
                 .getCell(0)
-                .addContent(new Paragraph("A2"));
+                .addParagraph(new Paragraph("A2"));
             table
                 .getRow(1)
                 .getCell(1)
-                .addContent(new Paragraph("B2"));
+                .addParagraph(new Paragraph("B2"));
             const tree = new Formatter().format(table);
             const cell = (c) => ({
                 "w:tc": [
@@ -149,10 +149,10 @@ describe("Table", () => {
     describe("#getCell", () => {
         it("returns the correct cell", () => {
             const table = new Table(2, 2);
-            table.getCell(0, 0).addContent(new Paragraph("A1"));
+            table.getCell(0, 0).addParagraph(new Paragraph("A1"));
-            table.getCell(0, 1).addContent(new Paragraph("B1"));
+            table.getCell(0, 1).addParagraph(new Paragraph("B1"));
-            table.getCell(1, 0).addContent(new Paragraph("A2"));
+            table.getCell(1, 0).addParagraph(new Paragraph("A2"));
-            table.getCell(1, 1).addContent(new Paragraph("B2"));
+            table.getCell(1, 1).addParagraph(new Paragraph("B2"));
             const tree = new Formatter().format(table);
             const cell = (c) => ({
                 "w:tc": [
@@ -232,7 +232,7 @@ describe("Table", () => {
 
             it("inserts a paragraph at the end of the cell even if it has a child table", () => {
                 const parentTable = new Table(1, 1);
-                parentTable.getCell(0, 0).addContent(new Table(1, 1));
+                parentTable.getCell(0, 0).addTable(new Table(1, 1));
                 const tree = new Formatter().format(parentTable);
                 expect(tree)
                     .to.have.property("w:tbl")
@@ -251,7 +251,7 @@ describe("Table", () => {
 
             it("does not insert a paragraph if it already ends with one", () => {
                 const parentTable = new Table(1, 1);
-                parentTable.getCell(0, 0).addContent(new Paragraph("Hello"));
+                parentTable.getCell(0, 0).addParagraph(new Paragraph("Hello"));
                 const tree = new Formatter().format(parentTable);
                 expect(tree)
                     .to.have.property("w:tbl")