Clean up table with improved demo

demo/4-basic-table.ts

@@ -1,11 +1,95 @@
 // Example of how you would create a table and add data to it
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, Table, TableCell, TableRow } from "../build";
+import { Document, Packer, Paragraph, Table, TableCell, TableRow, WidthType } from "../build";
 
 const doc = new Document();
 
 const table = new Table({
+    columnWidths: [3505, 5505],
+    rows: [
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 3505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("Hello")],
+                }),
+                new TableCell({
+                    width: {
+                        size: 5505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+            ],
+        }),
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 3505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+                new TableCell({
+                    width: {
+                        size: 5505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("World")],
+                }),
+            ],
+        }),
+    ],
+});
+
+const table2 = new Table({
+    columnWidths: [4505, 4505],
+    rows: [
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 4505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("Hello")],
+                }),
+                new TableCell({
+                    width: {
+                        size: 4505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+            ],
+        }),
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 4505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+                new TableCell({
+                    width: {
+                        size: 4505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("World")],
+                }),
+            ],
+        }),
+    ],
+});
+
+const table3 = new Table({
     rows: [
         new TableRow({
             children: [
@@ -31,7 +115,14 @@ const table = new Table({
 });
 
 doc.addSection({
-    children: [table],
+    children: [
+        new Paragraph({ text: "Table with skewed widths" }),
+        table,
+        new Paragraph({ text: "Table with equal widths" }),
+        table2,
+        new Paragraph({ text: "Table without setting widths" }),
+        table3,
+    ],
 });
 
 Packer.toBuffer(doc).then((buffer) => {

src/file/document/body/section-properties/section-properties.ts

@@ -61,7 +61,9 @@ export type SectionPropertiesOptions = IPageSizeAttributes &
 // Need to decouple this from the attributes
 
 export class SectionProperties extends XmlComponent {
-    private readonly options: SectionPropertiesOptions;
+    public readonly width: number;
+    public readonly rightMargin: number;
+    public readonly leftMargin: number;
 
     constructor(options: SectionPropertiesOptions = { column: {} }) {
         super("w:sectPr");
@@ -98,7 +100,10 @@ export class SectionProperties extends XmlComponent {
             type,
         } = options;
 
-        this.options = options;
+        this.leftMargin = left;
+        this.rightMargin = right;
+        this.width = width;
+
         this.root.push(new PageSize(width, height, orientation));
         this.root.push(new PageMargin(top, right, bottom, left, header, footer, gutter, mirror));
         this.root.push(new Columns(column.space ? column.space : 708, column.count ? column.count : 1, column.separate ?? false));
@@ -201,8 +206,4 @@ export class SectionProperties extends XmlComponent {
             }
         }
     }
-
-    public get Options(): SectionPropertiesOptions {
-        return this.options;
-    }
 }

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

@@ -48,69 +48,59 @@ export interface ITableCellOptions {
 }
 
 export class TableCell extends XmlComponent {
-    private readonly properties: TableCellProperties;
-
     constructor(readonly options: ITableCellOptions) {
         super("w:tc");
 
-        this.properties = new TableCellProperties();
+        const properties = new TableCellProperties();
-        this.root.push(this.properties);
+        this.root.push(properties);
 
         for (const child of options.children) {
             this.root.push(child);
         }
 
         if (options.verticalAlign) {
-            this.properties.setVerticalAlign(options.verticalAlign);
+            properties.setVerticalAlign(options.verticalAlign);
         }
 
         if (options.textDirection) {
-            this.properties.setTextDirection(options.textDirection);
+            properties.setTextDirection(options.textDirection);
         }
 
         if (options.verticalMerge) {
-            this.properties.addVerticalMerge(options.verticalMerge);
+            properties.addVerticalMerge(options.verticalMerge);
         } else if (options.rowSpan && options.rowSpan > 1) {
             // if cell already have a `verticalMerge`, don't handle `rowSpan`
-            this.properties.addVerticalMerge(VerticalMergeType.RESTART);
+            properties.addVerticalMerge(VerticalMergeType.RESTART);
         }
 
         if (options.margins) {
-            this.properties.addMargins(options.margins);
+            properties.addMargins(options.margins);
         }
 
         if (options.shading) {
-            this.properties.setShading(options.shading);
+            properties.setShading(options.shading);
         }
 
         if (options.columnSpan) {
-            this.properties.addGridSpan(options.columnSpan);
+            properties.addGridSpan(options.columnSpan);
         }
 
         if (options.width) {
-            this.properties.setWidth(options.width.size, options.width.type);
+            properties.setWidth(options.width.size, options.width.type);
         }
 
         if (options.borders) {
             if (options.borders.top) {
-                this.properties.Borders.addTopBorder(options.borders.top.style, options.borders.top.size, options.borders.top.color);
+                properties.Borders.addTopBorder(options.borders.top.style, options.borders.top.size, options.borders.top.color);
             }
             if (options.borders.bottom) {
-                this.properties.Borders.addBottomBorder(
+                properties.Borders.addBottomBorder(options.borders.bottom.style, options.borders.bottom.size, options.borders.bottom.color);
-                    options.borders.bottom.style,
-                    options.borders.bottom.size,
-                    options.borders.bottom.color,
-                );
             }
             if (options.borders.left) {
-                this.properties.Borders.addLeftBorder(options.borders.left.style, options.borders.left.size, options.borders.left.color);
+                properties.Borders.addLeftBorder(options.borders.left.style, options.borders.left.size, options.borders.left.color);
             }
             if (options.borders.right) {
-                this.properties.Borders.addRightBorder(
+                properties.Borders.addRightBorder(options.borders.right.style, options.borders.right.size, options.borders.right.color);
-                    options.borders.right.style,
-                    options.borders.right.size,
-                    options.borders.right.color,
-                );
             }
         }
     }

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

@@ -42,10 +42,6 @@ export class TableRow extends XmlComponent {
         return this.options.children.length;
     }
 
-    public get Children(): TableCell[] {
-        return this.options.children;
-    }
-
     public get cells(): TableCell[] {
         return this.root.filter((xmlComponent) => xmlComponent instanceof TableCell);
     }