smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving table api

Browse Source
This commit is contained in:
Dolan
2019-03-08 01:09:21 +00:00
parent 51b1e08a35
commit f3ba11b21c
3 changed files with 51 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
demo/demo32.ts
View File

@ -21,12 +21,12 @@ doc.createParagraph("Another table").heading2();
table = doc.createTable(2, 4); table = doc.createTable(2, 4);
table.getCell(0, 0).addParagraph(new Paragraph("Foo")); table.getCell(0, 0).addParagraph(new Paragraph("Foo"));
table.getCell(1, 0).addParagraph(new Paragraph("Bar1")); // table.getCell(1, 0).addParagraph(new Paragraph("Bar1"));
table.getCell(1, 1).addParagraph(new Paragraph("Bar2")); // table.getCell(1, 1).addParagraph(new Paragraph("Bar2"));
table.getCell(1, 2).addParagraph(new Paragraph("Bar3")); // table.getCell(1, 2).addParagraph(new Paragraph("Bar3"));
table.getCell(1, 3).addParagraph(new Paragraph("Bar4")); // table.getCell(1, 3).addParagraph(new Paragraph("Bar4"));
table.getRow(0).mergeCells(0, 3); // table.getRow(0).mergeCells(0, 3);
const packer = new Packer(); const packer = new Packer();

42
src/file/table/table.spec.ts
View File

@ -5,7 +5,7 @@ import { Formatter } from "export/formatter";
import { Paragraph } from "../paragraph"; import { Paragraph } from "../paragraph";
import { Table } from "./table"; import { Table } from "./table";
import { WidthType } from "./table-cell"; // import { WidthType } from "./table-cell";
import { RelativeHorizontalPosition, RelativeVerticalPosition, TableAnchorType } from "./table-properties"; import { RelativeHorizontalPosition, RelativeVerticalPosition, TableAnchorType } from "./table-properties";
const DEFAULT_TABLE_PROPERTIES = { const DEFAULT_TABLE_PROPERTIES = {
@ -191,28 +191,28 @@ describe("Table", () => {
}); });
}); });
describe("#setWidth", () => { // describe("#setWidth", () => {
it("should set the preferred width on the table", () => { // it("should set the preferred width on the table", () => {
const table = new Table(2, 2).setWidth(1000, WidthType.PERCENTAGE); // const table = new Table(2, 2).setWidth(1000, WidthType.PERCENTAGE);
const tree = new Formatter().format(table); // const tree = new Formatter().format(table);
expect(tree) // expect(tree)
.to.have.property("w:tbl") // .to.have.property("w:tbl")
.which.is.an("array") // .which.is.an("array")
.with.has.length.at.least(1); // .with.has.length.at.least(1);
expect(tree["w:tbl"][0]).to.deep.equal({ // expect(tree["w:tbl"][0]).to.deep.equal({
"w:tblPr": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "pct", "w:w": "1000%" } }] }], // "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", () => { // it("sets the preferred width on the table with a default of AUTO", () => {
const table = new Table(2, 2).setWidth(1000); // const table = new Table(2, 2).setWidth(1000);
const tree = new Formatter().format(table); // const tree = new Formatter().format(table);
expect(tree["w:tbl"][0]).to.deep.equal({ // expect(tree["w:tbl"][0]).to.deep.equal({
"w:tblPr": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "auto", "w:w": 1000 } }] }], // "w:tblPr": [DEFAULT_TABLE_PROPERTIES, { "w:tblW": [{ _attr: { "w:type": "auto", "w:w": 1000 } }] }],
}); // });
}); // });
}); // });
describe("#setFixedWidthLayout", () => { describe("#setFixedWidthLayout", () => {
it("sets the table to fixed width layout", () => { it("sets the table to fixed width layout", () => {

58
src/file/table/table.ts
View File

@ -6,46 +6,43 @@ import { TableCell, WidthType } from "./table-cell";
import { TableColumn } from "./table-column"; import { TableColumn } from "./table-column";
import { ITableFloatOptions, TableProperties } from "./table-properties"; import { ITableFloatOptions, TableProperties } from "./table-properties";
import { TableRow } from "./table-row"; 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 { export class Table extends XmlComponent {
private readonly properties: TableProperties; private readonly properties: TableProperties;
private readonly rows: TableRow[]; 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<number>(columnCount).fill(100),
) {
super("w:tbl"); super("w:tbl");
this.properties = new TableProperties(); this.properties = new TableProperties();
this.root.push(this.properties); this.root.push(this.properties);
this.properties.setBorder(); this.properties.setBorder();
this.properties.setWidth(widthOptions.width, widthOptions.type);
const grid = new TableGrid(colSizes);
if (colSizes && colSizes.length > 0) { this.root.push(grid);
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.rows = []; this.rows = [];
for (let i = 0; i < rows; i++) { for (let i = 0; i < rowCount; i++) {
const cells: TableCell[] = []; const cells = Array<TableCell>(columnCount).fill(new TableCell());
for (let j = 0; j < cols; j++) {
cells.push(new TableCell());
}
const row = new TableRow(cells); const row = new TableRow(cells);
this.rows.push(row); this.rows.push(row);
this.root.push(row); this.root.push(row);
@ -72,11 +69,6 @@ export class Table extends XmlComponent {
return this.getRow(row).getCell(col); 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 { public setFixedWidthLayout(): Table {
this.properties.setFixedWidthLayout(); this.properties.setFixedWidthLayout();
return this; return this;