more sane width management

ts/docx/table/index.ts

@@ -2,7 +2,7 @@ import { Paragraph } from "../paragraph";
 import { XmlComponent } from "../xml-components";
 
 import { TableGrid } from "./grid";
-import { TableProperties } from "./properties";
+import { TableProperties, widthTypes } from "./properties";
 
 export class Table extends XmlComponent {
     private properties: TableProperties;
@@ -16,7 +16,17 @@ export class Table extends XmlComponent {
 
         const gridCols: number[] = [];
         for (let i = 0; i < cols; i++) {
-            gridCols.push(0);
+            /*
+              0-width columns don't get rendered correctly, so we need
+              to give them some value. A reasonable default would be
+              ~6in / numCols, but if we do that it becomes very hard
+              to resize the table using setWidth, unless the layout
+              algorithm is set to 'fixed'. Instead, the approach here
+              means even in 'auto' layout, setting a width on the
+              table will make it look reasonable, as the layout
+              algorithm will expand columns to fit its content
+             */
+            gridCols.push(1);
         }
         this.grid = new TableGrid(gridCols);
         this.root.push(this.grid);
@@ -40,6 +50,11 @@ export class Table extends XmlComponent {
     public getCell(row: number, col: number): TableCell {
         return this.getRow(row).getCell(col);
     }
+
+    public setWidth(type: widthTypes, width: number | string): Table {
+        this.properties.setWidth(type, width);
+        return this;
+    }
 }
 
 class TableRow extends XmlComponent {

ts/docx/table/properties.ts

@@ -1,6 +1,6 @@
 import { XmlAttributeComponent, XmlComponent } from "../xml-components";
 
-type widthTypes = "dxa" | "pct" | "nil" | "auto";
+export type widthTypes = "dxa" | "pct" | "nil" | "auto";
 
 export class TableProperties extends XmlComponent {
     constructor() {

ts/tests/docx/table/testTable.ts

@@ -12,8 +12,8 @@ describe("Table", () => {
                 "w:tbl": [
                     {"w:tblPr": []},
                     {"w:tblGrid": [
-                        {"w:gridCol": [{_attr: {"w:w": 0}}]},
+                        {"w:gridCol": [{_attr: {"w:w": 1}}]},
-                        {"w:gridCol": [{_attr: {"w:w": 0}}]},
+                        {"w:gridCol": [{_attr: {"w:w": 1}}]},
                     ]},
                     {"w:tr": [{"w:trPr": []}, cell, cell]},
                     {"w:tr": [{"w:trPr": []}, cell, cell]},
@@ -42,8 +42,8 @@ describe("Table", () => {
                 "w:tbl": [
                     {"w:tblPr": []},
                     {"w:tblGrid": [
-                        {"w:gridCol": [{_attr: {"w:w": 0}}]},
+                        {"w:gridCol": [{_attr: {"w:w": 1}}]},
-                        {"w:gridCol": [{_attr: {"w:w": 0}}]},
+                        {"w:gridCol": [{_attr: {"w:w": 1}}]},
                     ]},
                     {"w:tr": [{"w:trPr": []}, cell("A1"), cell("B1")]},
                     {"w:tr": [{"w:trPr": []}, cell("A2"), cell("B2")]},
@@ -71,8 +71,8 @@ describe("Table", () => {
                 "w:tbl": [
                     {"w:tblPr": []},
                     {"w:tblGrid": [
-                        {"w:gridCol": [{_attr: {"w:w": 0}}]},
+                        {"w:gridCol": [{_attr: {"w:w": 1}}]},
-                        {"w:gridCol": [{_attr: {"w:w": 0}}]},
+                        {"w:gridCol": [{_attr: {"w:w": 1}}]},
                     ]},
                     {"w:tr": [{"w:trPr": []}, cell("A1"), cell("B1")]},
                     {"w:tr": [{"w:trPr": []}, cell("A2"), cell("B2")]},
@@ -80,4 +80,17 @@ describe("Table", () => {
             });
         });
     });
+
+    describe("#setWidth", () => {
+        it("sets the preferred width on the table", () => {
+            const table = new Table(2, 2).setWidth("pct", 1000)
+            const tree = new Formatter().format(table);
+            expect(tree).to.have.property("w:tbl").which.is.an("array").with.has.length.at.least(1);
+            expect(tree["w:tbl"][0]).to.deep.equal({
+                "w:tblPr": [
+                    {"w:tblW": [{_attr: {"w:type": "pct", "w:w": 1000}}]},
+                ],
+            });
+        });
+    });
 });