From f3ba11b21c7411b087a51f1384e999486d43150b Mon Sep 17 00:00:00 2001 From: Dolan Date: Fri, 8 Mar 2019 01:09:21 +0000 Subject: [PATCH] Improving table api --- demo/demo32.ts | 10 +++---- src/file/table/table.spec.ts | 42 +++++++++++++------------- src/file/table/table.ts | 58 ++++++++++++++++-------------------- 3 files changed, 51 insertions(+), 59 deletions(-) diff --git a/demo/demo32.ts b/demo/demo32.ts index 67c9e8a335..b7c75593ee 100644 --- a/demo/demo32.ts +++ b/demo/demo32.ts @@ -21,12 +21,12 @@ doc.createParagraph("Another table").heading2(); table = doc.createTable(2, 4); table.getCell(0, 0).addParagraph(new Paragraph("Foo")); -table.getCell(1, 0).addParagraph(new Paragraph("Bar1")); -table.getCell(1, 1).addParagraph(new Paragraph("Bar2")); -table.getCell(1, 2).addParagraph(new Paragraph("Bar3")); -table.getCell(1, 3).addParagraph(new Paragraph("Bar4")); +// table.getCell(1, 0).addParagraph(new Paragraph("Bar1")); +// table.getCell(1, 1).addParagraph(new Paragraph("Bar2")); +// table.getCell(1, 2).addParagraph(new Paragraph("Bar3")); +// table.getCell(1, 3).addParagraph(new Paragraph("Bar4")); -table.getRow(0).mergeCells(0, 3); +// table.getRow(0).mergeCells(0, 3); const packer = new Packer(); diff --git a/src/file/table/table.spec.ts b/src/file/table/table.spec.ts index f582e516ec..15177b402b 100644 --- a/src/file/table/table.spec.ts +++ b/src/file/table/table.spec.ts @@ -5,7 +5,7 @@ import { Formatter } from "export/formatter"; import { Paragraph } from "../paragraph"; import { Table } from "./table"; -import { WidthType } from "./table-cell"; +// import { WidthType } from "./table-cell"; import { RelativeHorizontalPosition, RelativeVerticalPosition, TableAnchorType } from "./table-properties"; const DEFAULT_TABLE_PROPERTIES = { @@ -191,28 +191,28 @@ describe("Table", () => { }); }); - describe("#setWidth", () => { - it("should set the preferred width on the table", () => { - const table = new Table(2, 2).setWidth(1000, WidthType.PERCENTAGE); - 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": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "pct", "w:w": "1000%" } }] }], - }); - }); + // describe("#setWidth", () => { + // it("should set the preferred width on the table", () => { + // const table = new Table(2, 2).setWidth(1000, WidthType.PERCENTAGE); + // 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": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "pct", "w:w": "1000%" } }] }], + // }); + // }); - it("sets the preferred width on the table with a default of AUTO", () => { - const table = new Table(2, 2).setWidth(1000); - const tree = new Formatter().format(table); + // it("sets the preferred width on the table with a default of AUTO", () => { + // const table = new Table(2, 2).setWidth(1000); + // const tree = new Formatter().format(table); - expect(tree["w:tbl"][0]).to.deep.equal({ - "w:tblPr": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "auto", "w:w": 1000 } }] }], - }); - }); - }); + // expect(tree["w:tbl"][0]).to.deep.equal({ + // "w:tblPr": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "auto", "w:w": 1000 } }] }], + // }); + // }); + // }); describe("#setFixedWidthLayout", () => { it("sets the table to fixed width layout", () => { diff --git a/src/file/table/table.ts b/src/file/table/table.ts index 987419d7cb..f45422a110 100644 --- a/src/file/table/table.ts +++ b/src/file/table/table.ts @@ -6,46 +6,43 @@ import { TableCell, WidthType } from "./table-cell"; import { TableColumn } from "./table-column"; import { ITableFloatOptions, TableProperties } from "./table-properties"; import { TableRow } from "./table-row"; +/* + 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 + */ +export interface IWidthOptions { + readonly width: number; + readonly type?: WidthType; +} export class Table extends XmlComponent { private readonly properties: TableProperties; private readonly rows: TableRow[]; - private readonly grid: TableGrid; - constructor(rows: number, cols: number, colSizes?: number[]) { + constructor( + rowCount: number, + columnCount: number, + widthOptions: IWidthOptions = { width: 100, type: WidthType.AUTO }, + colSizes: number[] = Array(columnCount).fill(100), + ) { super("w:tbl"); this.properties = new TableProperties(); this.root.push(this.properties); this.properties.setBorder(); + this.properties.setWidth(widthOptions.width, widthOptions.type); + const grid = new TableGrid(colSizes); - if (colSizes && colSizes.length > 0) { - this.grid = new TableGrid(colSizes); - } else { - const gridCols: number[] = []; - for (let i = 0; i < cols; i++) { - /* - 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(100); - } - this.grid = new TableGrid(gridCols); - } - - this.root.push(this.grid); + this.root.push(grid); this.rows = []; - for (let i = 0; i < rows; i++) { - const cells: TableCell[] = []; - for (let j = 0; j < cols; j++) { - cells.push(new TableCell()); - } + for (let i = 0; i < rowCount; i++) { + const cells = Array(columnCount).fill(new TableCell()); const row = new TableRow(cells); this.rows.push(row); this.root.push(row); @@ -72,11 +69,6 @@ export class Table extends XmlComponent { return this.getRow(row).getCell(col); } - public setWidth(width: number, type: WidthType = WidthType.AUTO): Table { - this.properties.setWidth(width, type); - return this; - } - public setFixedWidthLayout(): Table { this.properties.setFixedWidthLayout(); return this;