diff --git a/ts/docx/table/index.ts b/ts/docx/table/index.ts index 485dc4fcf4..82fb8e5f29 100644 --- a/ts/docx/table/index.ts +++ b/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 { diff --git a/ts/docx/table/properties.ts b/ts/docx/table/properties.ts index 7890f47696..5a9c8d4e26 100644 --- a/ts/docx/table/properties.ts +++ b/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() { diff --git a/ts/tests/docx/table/testTable.ts b/ts/tests/docx/table/testTable.ts index 268c854d61..fd4bff95f6 100644 --- a/ts/tests/docx/table/testTable.ts +++ b/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": 0}}]}, + {"w:gridCol": [{_attr: {"w:w": 1}}]}, + {"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": 0}}]}, + {"w:gridCol": [{_attr: {"w:w": 1}}]}, + {"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": 0}}]}, + {"w:gridCol": [{_attr: {"w:w": 1}}]}, + {"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}}]}, + ], + }); + }); + }); });