Merge pull request #438 from ramonmata/add-table-option-styleId

Allows specify XML StyleId to be applied in a Table

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);
+});

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 {

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({

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));
+        }
     }
 }

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",
+                    },
+                },
+            });
+        });
+    });
+});

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,
+            }),
+        );
+    }
+}

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: {