Add table borders

demo/49-table-borders.ts

@@ -0,0 +1,37 @@
+// Add custom borders to the table itself
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { BorderStyle, Document, Packer, Paragraph, Table, TableCell, TableRow } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: [
+        new TableRow({
+            children: [
+                new TableCell({
+                    children: [new Paragraph("Hello")],
+                }),
+                new TableCell({
+                    children: [],
+                }),
+            ],
+        }),
+        new TableRow({
+            children: [
+                new TableCell({
+                    children: [],
+                }),
+                new TableCell({
+                    children: [new Paragraph("World")],
+                }),
+            ],
+        }),
+    ],
+});
+
+doc.addSection({ children: [table] });
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

src/file/table/table-properties/index.ts

@@ -1,3 +1,4 @@
 export * from "./table-properties";
 export * from "./table-float-properties";
 export * from "./table-layout";
+export * from "./table-borders";

src/file/table/table-properties/table-borders.ts

@@ -1,14 +1,95 @@
+// http://officeopenxml.com/WPtableBorders.php
+import { BorderStyle } from "file/styles";
 import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
 
+export interface ITableBordersOptions {
+    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 insideHorizontal?: {
+        readonly style: BorderStyle;
+        readonly size: number;
+        readonly color: string;
+    };
+    readonly insideVertical?: {
+        readonly style: BorderStyle;
+        readonly size: number;
+        readonly color: string;
+    };
+}
+
 export class TableBorders extends XmlComponent {
-    constructor() {
+    constructor(options: ITableBordersOptions) {
         super("w:tblBorders");
-        this.root.push(new TableBordersElement("w:top", "single", 4, 0, "auto"));
+
-        this.root.push(new TableBordersElement("w:left", "single", 4, 0, "auto"));
+        if (options.top) {
-        this.root.push(new TableBordersElement("w:bottom", "single", 4, 0, "auto"));
+            this.root.push(new TableBordersElement("w:top", options.top.style, options.top.size, 0, options.top.color));
-        this.root.push(new TableBordersElement("w:right", "single", 4, 0, "auto"));
+        } else {
-        this.root.push(new TableBordersElement("w:insideH", "single", 4, 0, "auto"));
+            this.root.push(new TableBordersElement("w:top", BorderStyle.SINGLE, 4, 0, "auto"));
-        this.root.push(new TableBordersElement("w:insideV", "single", 4, 0, "auto"));
+        }
+
+        if (options.left) {
+            this.root.push(new TableBordersElement("w:left", options.left.style, options.left.size, 0, options.left.color));
+        } else {
+            this.root.push(new TableBordersElement("w:left", BorderStyle.SINGLE, 4, 0, "auto"));
+        }
+
+        if (options.bottom) {
+            this.root.push(new TableBordersElement("w:bottom", options.bottom.style, options.bottom.size, 0, options.bottom.color));
+        } else {
+            this.root.push(new TableBordersElement("w:bottom", BorderStyle.SINGLE, 4, 0, "auto"));
+        }
+
+        if (options.right) {
+            this.root.push(new TableBordersElement("w:right", options.right.style, 4, 0, "auto"));
+        } else {
+            this.root.push(new TableBordersElement("w:right", BorderStyle.SINGLE, 4, 0, "auto"));
+        }
+
+        if (options.insideHorizontal) {
+            this.root.push(
+                new TableBordersElement(
+                    "w:insideH",
+                    options.insideHorizontal.style,
+                    options.insideHorizontal.size,
+                    0,
+                    options.insideHorizontal.color,
+                ),
+            );
+        } else {
+            this.root.push(new TableBordersElement("w:insideH", BorderStyle.SINGLE, 4, 0, "auto"));
+        }
+
+        if (options.insideVertical) {
+            this.root.push(
+                new TableBordersElement(
+                    "w:insideV",
+                    options.insideVertical.style,
+                    options.insideVertical.size,
+                    0,
+                    options.insideVertical.color,
+                ),
+            );
+        } else {
+            this.root.push(new TableBordersElement("w:insideV", BorderStyle.SINGLE, 4, 0, "auto"));
+        }
     }
 }
 

src/file/table/table-properties/table-properties.ts

@@ -2,7 +2,7 @@ import { IgnoreIfEmptyXmlComponent } from "file/xml-components";
 
 import { ITableShadingAttributesProperties, TableShading } from "../shading";
 import { WidthType } from "../table-cell";
-import { TableBorders } from "./table-borders";
+import { ITableBordersOptions, TableBorders } from "./table-borders";
 import { TableCellMargin } from "./table-cell-margin";
 import { ITableFloatOptions, TableFloatProperties } from "./table-float-properties";
 import { TableLayout, TableLayoutType } from "./table-layout";
@@ -27,8 +27,8 @@ export class TableProperties extends IgnoreIfEmptyXmlComponent {
         this.root.push(new TableLayout(type));
     }
 
-    public setBorder(): TableProperties {
+    public setBorder(borderOptions: ITableBordersOptions): TableProperties {
-        this.root.push(new TableBorders());
+        this.root.push(new TableBorders(borderOptions));
         return this;
     }
 

src/file/table/table.ts

@@ -2,7 +2,7 @@
 import { XmlComponent } from "file/xml-components";
 import { TableGrid } from "./grid";
 import { TableCell, VerticalMergeType, WidthType } from "./table-cell";
-import { ITableFloatOptions, TableProperties } from "./table-properties";
+import { ITableBordersOptions, ITableFloatOptions, TableProperties } from "./table-properties";
 import { TableLayoutType } from "./table-properties/table-layout";
 import { TableRow } from "./table-row";
 
@@ -32,6 +32,7 @@ export interface ITableOptions {
     };
     readonly float?: ITableFloatOptions;
     readonly layout?: TableLayoutType;
+    readonly borders?: ITableBordersOptions;
 }
 
 export class Table extends XmlComponent {
@@ -44,11 +45,17 @@ export class Table extends XmlComponent {
         margins: { marginUnitType, top, bottom, right, left } = { marginUnitType: WidthType.AUTO, top: 0, bottom: 0, right: 0, left: 0 },
         float,
         layout,
+        borders,
     }: ITableOptions) {
         super("w:tbl");
         this.properties = new TableProperties();
         this.root.push(this.properties);
-        this.properties.setBorder();
+
+        if (borders) {
+            this.properties.setBorder(borders);
+        } else {
+            this.properties.setBorder({});
+        }
 
         if (width) {
             this.properties.setWidth(width.size, width.type);