Merge pull request #292 from dolanmiu/feature/table-background

Add shading (background color) for cell

demo/demo32.ts

@@ -1,7 +1,7 @@
 // Example of how you would merge cells together
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, WidthType } from "../build";
+import { Document, Packer, Paragraph, ShadingType, WidthType } from "../build";
 
 const doc = new Document();
 
@@ -22,12 +22,15 @@ table = doc.createTable({
     widthUnitType: WidthType.AUTO,
     columnWidths: [1000, 1000, 1000],
 });
-table.getCell(0, 0).addParagraph(new Paragraph("World")).setMargains({
+table
-    top: 1000,
+    .getCell(0, 0)
-    bottom: 1000,
+    .addParagraph(new Paragraph("World"))
-    left: 1000,
+    .setMargains({
-    right: 1000,
+        top: 1000,
-});
+        bottom: 1000,
+        left: 1000,
+        right: 1000,
+    });
 table.getRow(0).mergeCells(0, 2);
 
 doc.createParagraph("Another table").heading2();
@@ -47,12 +50,40 @@ table = doc.createTable({
 table.getCell(0, 0).addParagraph(new Paragraph("Foo"));
 table.getCell(0, 1).addParagraph(new Paragraph("v"));
 
-table.getCell(1, 0).addParagraph(new Paragraph("Bar1"));
+table
-// table.getCell(1, 1).addParagraph(new Paragraph("Bar2"));
+    .getCell(1, 0)
-// table.getCell(1, 2).addParagraph(new Paragraph("Bar3"));
+    .addParagraph(new Paragraph("Bar1"))
-// table.getCell(1, 3).addParagraph(new Paragraph("Bar4"));
+    .setShading({
+        fill: "b79c2f",
+        val: ShadingType.REVERSE_DIAGONAL_STRIPE,
+        color: "auto",
+    });
+table
+    .getCell(1, 1)
+    .addParagraph(new Paragraph("Bar2"))
+    .setShading({
+        fill: "42c5f4",
+        val: ShadingType.PERCENT_95,
+        color: "auto",
+    });
+table
+    .getCell(1, 2)
+    .addParagraph(new Paragraph("Bar3"))
+    .setShading({
+        fill: "880aa8",
+        val: ShadingType.PERCENT_10,
+        color: "e2df0b",
+    });
+table
+    .getCell(1, 3)
+    .addParagraph(new Paragraph("Bar4"))
+    .setShading({
+        fill: "FF0000",
+        val: ShadingType.CLEAR,
+        color: "auto",
+    });
 
-// table.getRow(0).mergeCells(0, 3);
+table.getRow(0).mergeCells(0, 3);
 
 doc.createParagraph("hi");
 

src/file/table/index.ts

@@ -1,3 +1,4 @@
 export * from "./table";
 export * from "./table-cell";
 export * from "./table-properties";
+export * from "./shading";

src/file/table/shading/index.ts

@@ -0,0 +1 @@
+export * from "./shading";

src/file/table/shading/shading.spec.ts

@@ -0,0 +1,37 @@
+import { expect } from "chai";
+
+import { Formatter } from "export/formatter";
+
+import { ShadingType, TableShading } from "./shading";
+
+describe("TableShading", () => {
+    describe("#constructor", () => {
+        it("should create", () => {
+            const cellMargain = new TableShading({});
+            const tree = new Formatter().format(cellMargain);
+            expect(tree).to.deep.equal({
+                "w:shd": [
+                    {
+                        _attr: {},
+                    },
+                ],
+            });
+        });
+
+        it("should create with params", () => {
+            const cellMargain = new TableShading({ val: ShadingType.PERCENT_40, color: "FF0000", fill: "555555" });
+            const tree = new Formatter().format(cellMargain);
+            expect(tree).to.deep.equal({
+                "w:shd": [
+                    {
+                        _attr: {
+                            "w:color": "FF0000",
+                            "w:fill": "555555",
+                            "w:val": "pct40",
+                        },
+                    },
+                ],
+            });
+        });
+    });
+});

src/file/table/shading/shading.ts

@@ -0,0 +1,64 @@
+// http://officeopenxml.com/WPtableShading.php
+// http://officeopenxml.com/WPtableCellProperties-Shading.php
+import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
+
+export interface ITableShadingAttributesProperties {
+    readonly fill?: string;
+    readonly color?: string;
+    readonly val?: ShadingType;
+}
+
+class TableShadingAttributes extends XmlAttributeComponent<ITableShadingAttributesProperties> {
+    protected readonly xmlKeys = {
+        fill: "w:fill",
+        color: "w:color",
+        val: "w:val",
+    };
+}
+
+export class TableShading extends XmlComponent {
+    constructor(attrs: ITableShadingAttributesProperties) {
+        super("w:shd");
+        this.root.push(new TableShadingAttributes(attrs));
+    }
+}
+
+export enum ShadingType {
+    CLEAR = "clear",
+    DIAGONAL_CROSS = "diagCross",
+    DIAGONAL_STRIPE = "diagStripe",
+    HORIZONTAL_CROSS = "horzCross",
+    HORIZONTAL_STRIPE = "horzStripe",
+    NIL = "nil",
+    PERCENT_5 = "pct5",
+    PERCENT_10 = "pct10",
+    PERCENT_12 = "pct12",
+    PERCENT_15 = "pct15",
+    PERCENT_20 = "pct20",
+    PERCENT_25 = "pct25",
+    PERCENT_30 = "pct30",
+    PERCENT_35 = "pct35",
+    PERCENT_37 = "pct37",
+    PERCENT_40 = "pct40",
+    PERCENT_45 = "pct45",
+    PERCENT_50 = "pct50",
+    PERCENT_55 = "pct55",
+    PERCENT_60 = "pct60",
+    PERCENT_62 = "pct62",
+    PERCENT_65 = "pct65",
+    PERCENT_70 = "pct70",
+    PERCENT_75 = "pct75",
+    PERCENT_80 = "pct80",
+    PERCENT_85 = "pct85",
+    PERCENT_87 = "pct87",
+    PERCENT_90 = "pct90",
+    PERCENT_95 = "pct95",
+    REVERSE_DIAGONAL_STRIPE = "reverseDiagStripe",
+    SOLID = "solid",
+    THIN_DIAGONAL_CROSS = "thinDiagCross",
+    THIN_DIAGONAL_STRIPE = "thinDiagStripe",
+    THIN_HORIZONTAL_CROSS = "thinHorzCross",
+    THIN_REVERSE_DIAGONAL_STRIPE = "thinReverseDiagStripe",
+    THIN_VERTICAL_STRIPE = "thinVertStripe",
+    VERTICAL_STRIPE = "vertStripe",
+}

src/file/table/table-cell/table-cell-components.ts

@@ -194,27 +194,3 @@ export class TableCellWidth extends XmlComponent {
         );
     }
 }
-
-export interface ITableCellShadingAttributesProperties {
-    readonly fill?: string;
-    readonly color?: string;
-    readonly val?: string;
-}
-
-class TableCellShadingAttributes extends XmlAttributeComponent<ITableCellShadingAttributesProperties> {
-    protected readonly xmlKeys = {
-        fill: "w:fill",
-        color: "w:color",
-        val: "w:val",
-    };
-}
-
-/**
- * Table cell shading element.
- */
-export class TableCellShading extends XmlComponent {
-    constructor(attrs: ITableCellShadingAttributesProperties) {
-        super("w:shd");
-        this.root.push(new TableCellShadingAttributes(attrs));
-    }
-}

src/file/table/table-cell/table-cell-properties.ts

@@ -1,18 +1,8 @@
 import { XmlComponent } from "file/xml-components";
 
+import { ITableShadingAttributesProperties, TableShading } from "../shading";
 import { ITableCellMargainOptions, TableCellMargain } from "./cell-margain/table-cell-margains";
-import {
+import { GridSpan, TableCellBorders, TableCellWidth, VAlign, VerticalAlign, VMerge, VMergeType, WidthType } from "./table-cell-components";
-    GridSpan,
-    ITableCellShadingAttributesProperties,
-    TableCellBorders,
-    TableCellShading,
-    TableCellWidth,
-    VAlign,
-    VerticalAlign,
-    VMerge,
-    VMergeType,
-    WidthType,
-} from "./table-cell-components";
 
 export class TableCellProperties extends XmlComponent {
     private readonly cellBorder: TableCellBorders;
@@ -51,8 +41,8 @@ export class TableCellProperties extends XmlComponent {
         return this;
     }
 
-    public setShading(attrs: ITableCellShadingAttributesProperties): TableCellProperties {
+    public setShading(attrs: ITableShadingAttributesProperties): TableCellProperties {
-        this.root.push(new TableCellShading(attrs));
+        this.root.push(new TableShading(attrs));
 
         return this;
     }

src/file/table/table-cell/table-cell.ts

@@ -2,6 +2,7 @@
 import { Paragraph } from "file/paragraph";
 import { IXmlableObject, XmlComponent } from "file/xml-components";
 
+import { ITableShadingAttributesProperties } from "../shading";
 import { Table } from "../table";
 import { ITableCellMargainOptions } from "./cell-margain/table-cell-margains";
 import { TableCellBorders, VerticalAlign, VMergeType } from "./table-cell-components";
@@ -72,6 +73,12 @@ export class TableCell extends XmlComponent {
         return this;
     }
 
+    public setShading(attrs: ITableShadingAttributesProperties): TableCell {
+        this.properties.setShading(attrs);
+
+        return this;
+    }
+
     public get Borders(): TableCellBorders {
         return this.properties.Borders;
     }

src/file/table/table-properties/table-properties.ts

@@ -1,5 +1,6 @@
 import { XmlComponent } from "file/xml-components";
 
+import { ITableShadingAttributesProperties, TableShading } from "../shading";
 import { WidthType } from "../table-cell";
 import { TableBorders } from "./table-borders";
 import { TableCellMargin } from "./table-cell-margin";
@@ -40,4 +41,10 @@ export class TableProperties extends XmlComponent {
         this.root.push(new TableFloatProperties(tableFloatOptions));
         return this;
     }
+
+    public setShading(attrs: ITableShadingAttributesProperties): TableProperties {
+        this.root.push(new TableShading(attrs));
+
+        return this;
+    }
 }