Add more changes to table API and documentation

demo/demo20.ts

@@ -9,7 +9,7 @@ const table = doc.createTable(4, 4);
 table
     .getCell(2, 2)
     .addParagraph(new Paragraph("Hello"))
-    .Properties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red")
+    .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/demo31.ts

@@ -9,7 +9,7 @@ const table = doc.createTable(2, 2);
 table
     .getCell(1, 1)
     .addParagraph(new Paragraph("This text should be in the middle of the cell"))
-    .Properties.setVerticalAlign(VerticalAlign.CENTER);
+    .setVerticalAlign(VerticalAlign.CENTER);
 
 table
     .getCell(1, 0)

docs/usage/tables.md

@@ -40,14 +40,6 @@ const cell = table.getCell([ROW INDEX], [COLUMN INDEX]);
 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`.
@@ -80,16 +72,32 @@ cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");
 ## Set Width
 
 ```ts
-table.setWidth([WIDTH], [OPTIONAL WidthType]);
+import { WidthType } from "docx";
+
+table.setWidth([WIDTH], [OPTIONAL WidthType. Defaults to DXA]);
 ```
 
+For example:
+
 ```ts
 table.setWidth(4535, WidthType.DXA);
 ```
 
 ## Vertical Align
 
-## Borders
+Sets the vertical alignment of the contents of the cell
+
+```ts
+import { VerticalAlign } from "docx";
+
+cell.setVerticalAlign([VerticalAlign TYPE]);
+```
+
+For example, to center align a cell:
+
+```ts
+cell.setVerticalAlign(VerticalAlign.CENTER);
+```
 
 ## Rows
 

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

@@ -3,6 +3,7 @@ import { Paragraph } from "file/paragraph";
 import { IXmlableObject, XmlComponent } from "file/xml-components";
 
 import { Table } from "../table";
+import { TableCellBorders, VerticalAlign } from "./table-cell-components";
 import { TableCellProperties } from "./table-cell-properties";
 
 export class TableCell extends XmlComponent {
@@ -45,7 +46,19 @@ export class TableCell extends XmlComponent {
         return para;
     }
 
-    public get Properties(): TableCellProperties {
+    public setVerticalAlign(type: VerticalAlign): TableCell {
-        return this.properties;
+        this.properties.setVerticalAlign(type);
+
+        return this;
+    }
+
+    public addGridSpan(cellSpan: number): TableCell {
+        this.properties.addGridSpan(cellSpan);
+
+        return this;
+    }
+
+    public get Borders(): TableCellBorders {
+        return this.properties.Borders;
     }
 }

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.Properties.addGridSpan(cellSpan);
+        remainCell.addGridSpan(cellSpan);
         this.cells.splice(index + 1, cellSpan - 1);
         this.root.splice(index + 2, cellSpan - 1);