diff --git a/demo/48-table-xml-styles.ts b/demo/48-table-xml-styles.ts new file mode 100644 index 0000000000..e993c5be34 --- /dev/null +++ b/demo/48-table-xml-styles.ts @@ -0,0 +1,50 @@ +// 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, WidthType } from "../build"; + +const styles = fs.readFileSync("./demo/assets/custom-styles.xml", "utf-8"); +const doc = new Document({ + title: "Title", + externalStyles: styles +}); + + +// Create a table and pass the XML Style +const table = new Table({ + style: 'MyCustomTableStyle', + width: { + size: 9070, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + new TableCell({ + children: [new Paragraph("Header Colum 1")], + }), + new TableCell({ + children: [new Paragraph("Header Colum 2")], + }), + ], + }), + new TableRow({ + children: [ + new TableCell({ + children: [new Paragraph("Column Content 3")], + }), + new TableCell({ + children: [new Paragraph("Column Content 2")], + }), + ], + }), + ], +}); + +doc.addSection({ + children: [table], +}); + +Packer.toBuffer(doc).then((buffer) => { + fs.writeFileSync("My Document.docx", buffer); +}); diff --git a/demo/assets/custom-styles.xml b/demo/assets/custom-styles.xml index 76159f2985..2b6f2508a3 100644 --- a/demo/assets/custom-styles.xml +++ b/demo/assets/custom-styles.xml @@ -1,2 +1,2 @@ - \ No newline at end of file + diff --git a/src/file/table/table-properties/table-cell-margin.ts b/src/file/table/table-properties/table-cell-margin.ts index 6889b6f580..9d94e7c84a 100644 --- a/src/file/table/table-properties/table-cell-margin.ts +++ b/src/file/table/table-properties/table-cell-margin.ts @@ -22,15 +22,6 @@ class BaseTableCellMargin extends XmlComponent { }), ); } - - public setProperties(value: number, type: WidthType = WidthType.DXA): void { - this.root.push( - new TableCellMarginAttributes({ - type: type, - value: value, - }), - ); - } } export interface ITableCellMarginOptions { diff --git a/src/file/table/table-properties/table-properties.spec.ts b/src/file/table/table-properties/table-properties.spec.ts index 77205e70db..a6a9b5879f 100644 --- a/src/file/table/table-properties/table-properties.spec.ts +++ b/src/file/table/table-properties/table-properties.spec.ts @@ -20,6 +20,18 @@ describe("TableProperties", () => { }); }); + describe("#setStyle", () => { + it("should add a table style property", () => { + const tp = new TableProperties({ + style: "TableNormal", + }); + const tree = new Formatter().format(tp); + expect(tree).to.deep.equal({ + "w:tblPr": [{ "w:tblStyle": { _attr: { "w:val": "TableNormal" } } }], + }); + }); + }); + describe("#setWidth", () => { it("should add a table width property", () => { const tp = new TableProperties({ diff --git a/src/file/table/table-properties/table-properties.ts b/src/file/table/table-properties/table-properties.ts index de210a90ae..67fa8e3f5f 100644 --- a/src/file/table/table-properties/table-properties.ts +++ b/src/file/table/table-properties/table-properties.ts @@ -8,6 +8,7 @@ import { ITableBordersOptions, TableBorders } from "./table-borders"; import { ITableCellMarginOptions, TableCellMargin } from "./table-cell-margin"; import { ITableFloatOptions, TableFloatProperties } from "./table-float-properties"; import { TableLayout, TableLayoutType } from "./table-layout"; +import { TableStyle } from "./table-style"; import { PreferredTableWidth } from "./table-width"; import { VisuallyRightToLeft } from "./visually-right-to-left"; @@ -20,6 +21,7 @@ export interface ITablePropertiesOptions { readonly borders?: ITableBordersOptions; readonly float?: ITableFloatOptions; readonly shading?: ITableShadingAttributesProperties; + readonly style?: string; readonly alignment?: AlignmentType; readonly cellMargin?: ITableCellMarginOptions; readonly visuallyRightToLeft?: boolean; @@ -58,5 +60,9 @@ export class TableProperties extends IgnoreIfEmptyXmlComponent { if (options.visuallyRightToLeft) { this.root.push(new VisuallyRightToLeft()); } + + if (options.style) { + this.root.push(new TableStyle(options.style)); + } } } diff --git a/src/file/table/table-properties/table-style.spec.ts b/src/file/table/table-properties/table-style.spec.ts new file mode 100644 index 0000000000..1b9b0e9748 --- /dev/null +++ b/src/file/table/table-properties/table-style.spec.ts @@ -0,0 +1,22 @@ +import { expect } from "chai"; + +import { Formatter } from "export/formatter"; + +import { TableStyle } from "./table-style"; + +describe("TableStyle", () => { + describe("#constructor", () => { + it("should create", () => { + const tableStyle = new TableStyle("test-id"); + const tree = new Formatter().format(tableStyle); + + expect(tree).to.deep.equal({ + "w:tblStyle": { + _attr: { + "w:val": "test-id", + }, + }, + }); + }); + }); +}); diff --git a/src/file/table/table-properties/table-style.ts b/src/file/table/table-properties/table-style.ts new file mode 100644 index 0000000000..22b4dc5e89 --- /dev/null +++ b/src/file/table/table-properties/table-style.ts @@ -0,0 +1,13 @@ +import { Attributes, XmlComponent } from "file/xml-components"; + +export class TableStyle extends XmlComponent { + constructor(styleId: string) { + super("w:tblStyle"); + + this.root.push( + new Attributes({ + val: styleId, + }), + ); + } +} diff --git a/src/file/table/table.ts b/src/file/table/table.ts index 3aadf0b28e..ea4acd93d5 100644 --- a/src/file/table/table.ts +++ b/src/file/table/table.ts @@ -34,6 +34,7 @@ export interface ITableOptions { }; readonly float?: ITableFloatOptions; readonly layout?: TableLayoutType; + readonly style?: string; readonly borders?: ITableBordersOptions; readonly alignment?: AlignmentType; readonly visuallyRightToLeft?: boolean; @@ -47,6 +48,7 @@ export class Table extends XmlComponent { margins: { marginUnitType, top, bottom, right, left } = { marginUnitType: WidthType.AUTO, top: 0, bottom: 0, right: 0, left: 0 }, float, layout, + style, borders, alignment, visuallyRightToLeft, @@ -59,6 +61,7 @@ export class Table extends XmlComponent { width: width ?? { size: 100 }, float, layout, + style, alignment, cellMargin: { bottom: {