diff --git a/demo/demo11.ts b/demo/demo11.ts index 76ec915060..0253adb751 100644 --- a/demo/demo11.ts +++ b/demo/demo11.ts @@ -84,8 +84,7 @@ doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph") .basedOn("Normal"); doc.createImage(fs.readFileSync("./demo/images/pizza.gif")); -doc - .createParagraph("HEADING") +doc.createParagraph("HEADING") .heading1() .center(); @@ -111,8 +110,8 @@ const table = new Table(4, 4); table .getRow(0) .getCell(0) - .addContent(new Paragraph("Pole No.")); -// table.Properties.width = 10000; + .addParagraph(new Paragraph("Pole No.")); + doc.addTable(table); const arrboth = [ @@ -129,8 +128,6 @@ const arrboth = [ arrboth.forEach((item) => { const para = doc.createParagraph(); para.addImage(doc.createImage(fs.readFileSync(item.image))); - // para.Properties.width = 60; - // para.Properties.height = 90; doc.createParagraph(item.comment).style("normalPara2"); }); diff --git a/demo/demo20.ts b/demo/demo20.ts index f3f43edb26..6cbd40da2c 100644 --- a/demo/demo20.ts +++ b/demo/demo20.ts @@ -8,8 +8,8 @@ const doc = new Document(); const table = doc.createTable(4, 4); table .getCell(2, 2) - .addContent(new Paragraph("Hello")) - .CellProperties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red") + .addParagraph(new Paragraph("Hello")) + .Properties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red") .addBottomBorder(BorderStyle.DOUBLE, 3, "blue") .addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green") .addEndBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000"); diff --git a/demo/demo24.ts b/demo/demo24.ts index 4901477ced..62d80592a4 100644 --- a/demo/demo24.ts +++ b/demo/demo24.ts @@ -6,10 +6,10 @@ import { Document, Media, Packer, Paragraph } from "../build"; const doc = new Document(); const table = doc.createTable(4, 4); -table.getCell(2, 2).addContent(new Paragraph("Hello")); +table.getCell(2, 2).addParagraph(new Paragraph("Hello")); const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg")); -table.getCell(1, 1).addContent(image.Paragraph); +table.getCell(1, 1).addParagraph(image.Paragraph); const packer = new Packer(); diff --git a/demo/demo31.ts b/demo/demo31.ts index 366227102a..59fe9009b0 100644 --- a/demo/demo31.ts +++ b/demo/demo31.ts @@ -8,12 +8,12 @@ const doc = new Document(); const table = doc.createTable(2, 2); table .getCell(1, 1) - .addContent(new Paragraph("This text should be in the middle of the cell")) - .CellProperties.setVerticalAlign(VerticalAlign.CENTER); + .addParagraph(new Paragraph("This text should be in the middle of the cell")) + .Properties.setVerticalAlign(VerticalAlign.CENTER); table .getCell(1, 0) - .addContent( + .addParagraph( new Paragraph( "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah", ).heading1(), diff --git a/demo/demo32.ts b/demo/demo32.ts index 373ca64266..67c9e8a335 100644 --- a/demo/demo32.ts +++ b/demo/demo32.ts @@ -1,4 +1,4 @@ -// Example of how you would create a table and add data to it +// 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 } from "../build"; @@ -7,24 +7,24 @@ const doc = new Document(); let table = doc.createTable(2, 2); -table.getCell(0, 0).addContent(new Paragraph("Hello")); +table.getCell(0, 0).addParagraph(new Paragraph("Hello")); table.getRow(0).mergeCells(0, 1); doc.createParagraph("Another table").heading2(); table = doc.createTable(2, 3); -table.getCell(0, 0).addContent(new Paragraph("World")); +table.getCell(0, 0).addParagraph(new Paragraph("World")); table.getRow(0).mergeCells(0, 2); doc.createParagraph("Another table").heading2(); table = doc.createTable(2, 4); -table.getCell(0, 0).addContent(new Paragraph("Foo")); +table.getCell(0, 0).addParagraph(new Paragraph("Foo")); -table.getCell(1, 0).addContent(new Paragraph("Bar1")); -table.getCell(1, 1).addContent(new Paragraph("Bar2")); -table.getCell(1, 2).addContent(new Paragraph("Bar3")); -table.getCell(1, 3).addContent(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); diff --git a/demo/demo34.ts b/demo/demo34.ts index 75fe77687c..2a46308394 100644 --- a/demo/demo34.ts +++ b/demo/demo34.ts @@ -22,7 +22,7 @@ const table = doc.createTable(2, 2).float({ table.setFixedWidthLayout(); table.setWidth(4535, WidthType.DXA); -table.getCell(0, 0).addContent(new Paragraph("Hello")); +table.getCell(0, 0).addParagraph(new Paragraph("Hello")); table.getRow(0).mergeCells(0, 1); const packer = new Packer(); diff --git a/demo/demo4.ts b/demo/demo4.ts index eb6f5b8c09..87c3f418e6 100644 --- a/demo/demo4.ts +++ b/demo/demo4.ts @@ -6,7 +6,7 @@ import { Document, Packer, Paragraph } from "../build"; const doc = new Document(); const table = doc.createTable(4, 4); -table.getCell(2, 2).addContent(new Paragraph("Hello")); +table.getCell(2, 2).addParagraph(new Paragraph("Hello")); const packer = new Packer(); diff --git a/docs/usage/tab-stops.md b/docs/usage/tab-stops.md index 8447d03998..aa15ea75a9 100644 --- a/docs/usage/tab-stops.md +++ b/docs/usage/tab-stops.md @@ -2,7 +2,7 @@ > Tab stops are useful, if you are unclear of what they are, [here is a link explaining](https://en.wikipedia.org/wiki/Tab_stop). It enables side by side text which is nicely laid out without the need for tables, or constantly pressing space bar. -**Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm. +!> **Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm. ![Word 2013 Tabs](http://www.teachucomp.com/wp-content/uploads/blog-4-22-2015-UsingTabStopsInWord-1024x577.png "Word 2013 Tab Stops") diff --git a/docs/usage/tables.md b/docs/usage/tables.md new file mode 100644 index 0000000000..0f7bd18857 --- /dev/null +++ b/docs/usage/tables.md @@ -0,0 +1,144 @@ +# Tables + +You can create tables with `docx`. More information can be found [here](http://officeopenxml.com/WPtable.php). + +## How to + +To create a table, simply use the `createTable` method on a `document`. + +```ts +const table = doc.createTable([NUMBER OF ROWS], [NUMBER OF COLUMNS]); +``` + +Alternatively, you can create a table object directly, and then add it in the document + +```ts +const table = new Table(4, 4); +doc.addTable(table); +``` + +The snippet below creates a table of 2 rows and 4 columns. + +```ts +const table = doc.createTable(2, 4); + +// Or + +const table = new Table(2, 4); +doc.addTable(table); +``` + +## Cells + +The above section created a table with cells. To access the cell, use the `getCell` method. + +```ts +const cell = table.getCell([ROW INDEX], [COLUMN INDEX]); +``` + +```ts +const cell = table.getCell(0, 2); +``` + +### Cell Properties & Styling + +With the cell's `Properties`, you csn change it's borders, set it's vertical alignment + +```ts +cell.Properties; +``` + +## Borders + +BorderStyle can be imported from `docx`. Size determines the thickness. HTML color can be a hex code or alias such as `red`. + +```ts +cell.Borders.addTopBorder([BorderStyle], [SIZE], [HTML COLOR]); +``` + +```ts +cell.Borders.addBottomBorder([BorderStyle], [SIZE], [HTML COLOR]); +``` + +```ts +cell.Borders.addStartBorder([[BorderStyle]], [SIZE], [HTML COLOR]); +``` + +```ts +cell.Borders.addEndBorder([BorderStyle], [SIZE], [HTML COLOR]); +``` + +### Example + +```ts +import { BorderStyle } from "docx"; + +cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green"); +cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000"); +``` + +## Set Width + +```ts +table.setWidth([WIDTH], [OPTIONAL WidthType]); +``` + +```ts +table.setWidth(4535, WidthType.DXA); +``` + +## Vertical Align + +## Borders + +## Rows + +To get a row, use the `getRow` method on a `table`. There are a handful of methods which you can apply to a row which will be explained below. + +```ts +table.getRow([ROW INDEX]); +``` + +### Add paragraph to a cell + +Once you have got the cell, you can add data to it with the `addParagraph` method. + +```ts +cell.addParagraph(new Paragraph("Hello")); +``` + +## Merge cells together + +### Merging on a row + +First obtain the row, and call `mergeCells()`. The first argument is where the merge should start. The second argument is where the merge should end. + +```ts +table.getRow(0).mergeCells([FROM INDEX], [TO INDEX]); +``` + +#### Example + +This will merge 3 cells together starting from index `0`: + +```ts +table.getRow(0).mergeCells(0, 2); +``` + +### Merging on a column + +It has not been implemented yet, but it will follow a similar structure as merging a row. + +## Nested Tables + +To have a table within a table + +```ts +cell.addTable(new Table(1, 1)); +``` + +## Examples + +[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ":include") + +_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_ diff --git a/src/file/table/table-cell/table-cell.ts b/src/file/table/table-cell/table-cell.ts index 60673ec87a..3ac246dde8 100644 --- a/src/file/table/table-cell/table-cell.ts +++ b/src/file/table/table-cell/table-cell.ts @@ -14,7 +14,12 @@ export class TableCell extends XmlComponent { this.root.push(this.properties); } - public addContent(content: Paragraph | Table): TableCell { + public addParagraph(content: Paragraph): TableCell { + this.root.push(content); + return this; + } + + public addTable(content: Table): TableCell { this.root.push(content); return this; } @@ -35,11 +40,12 @@ export class TableCell extends XmlComponent { public createParagraph(text?: string): Paragraph { const para = new Paragraph(text); - this.addContent(para); + this.addParagraph(para); + return para; } - public get CellProperties(): TableCellProperties { + public get Properties(): TableCellProperties { return this.properties; } } diff --git a/src/file/table/table-row/table-row.ts b/src/file/table/table-row/table-row.ts index d1ced91c4a..6cc62819a4 100644 --- a/src/file/table/table-row/table-row.ts +++ b/src/file/table/table-row/table-row.ts @@ -25,7 +25,7 @@ export class TableRow extends XmlComponent { public addGridSpan(index: number, cellSpan: number): TableCell { const remainCell = this.cells[index]; - remainCell.CellProperties.addGridSpan(cellSpan); + remainCell.Properties.addGridSpan(cellSpan); this.cells.splice(index + 1, cellSpan - 1); this.root.splice(index + 2, cellSpan - 1); diff --git a/src/file/table/table.spec.ts b/src/file/table/table.spec.ts index 3d21fc8f5d..2d5388725c 100644 --- a/src/file/table/table.spec.ts +++ b/src/file/table/table.spec.ts @@ -111,19 +111,19 @@ describe("Table", () => { table .getRow(0) .getCell(0) - .addContent(new Paragraph("A1")); + .addParagraph(new Paragraph("A1")); table .getRow(0) .getCell(1) - .addContent(new Paragraph("B1")); + .addParagraph(new Paragraph("B1")); table .getRow(1) .getCell(0) - .addContent(new Paragraph("A2")); + .addParagraph(new Paragraph("A2")); table .getRow(1) .getCell(1) - .addContent(new Paragraph("B2")); + .addParagraph(new Paragraph("B2")); const tree = new Formatter().format(table); const cell = (c) => ({ "w:tc": [ @@ -149,10 +149,10 @@ describe("Table", () => { describe("#getCell", () => { it("returns the correct cell", () => { const table = new Table(2, 2); - table.getCell(0, 0).addContent(new Paragraph("A1")); - table.getCell(0, 1).addContent(new Paragraph("B1")); - table.getCell(1, 0).addContent(new Paragraph("A2")); - table.getCell(1, 1).addContent(new Paragraph("B2")); + table.getCell(0, 0).addParagraph(new Paragraph("A1")); + table.getCell(0, 1).addParagraph(new Paragraph("B1")); + table.getCell(1, 0).addParagraph(new Paragraph("A2")); + table.getCell(1, 1).addParagraph(new Paragraph("B2")); const tree = new Formatter().format(table); const cell = (c) => ({ "w:tc": [ @@ -232,7 +232,7 @@ describe("Table", () => { it("inserts a paragraph at the end of the cell even if it has a child table", () => { const parentTable = new Table(1, 1); - parentTable.getCell(0, 0).addContent(new Table(1, 1)); + parentTable.getCell(0, 0).addTable(new Table(1, 1)); const tree = new Formatter().format(parentTable); expect(tree) .to.have.property("w:tbl") @@ -251,7 +251,7 @@ describe("Table", () => { it("does not insert a paragraph if it already ends with one", () => { const parentTable = new Table(1, 1); - parentTable.getCell(0, 0).addContent(new Paragraph("Hello")); + parentTable.getCell(0, 0).addParagraph(new Paragraph("Hello")); const tree = new Formatter().format(parentTable); expect(tree) .to.have.property("w:tbl")