Alignment of tables

This commit is contained in:
Dolan Miu
2019-11-24 01:22:17 +00:00
parent 1bdc93ef59
commit 8bdbd1de39
5 changed files with 61 additions and 2 deletions

View File

@ -1,7 +1,8 @@
// Example of how you would merge cells together (Rows and Columns) and apply shading
// Also includes an example on how to center tables
// Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs";
import { Document, HeadingLevel, Packer, Paragraph, ShadingType, Table, TableCell, TableRow, WidthType } from "../build";
import { AlignmentType, Document, HeadingLevel, Packer, Paragraph, ShadingType, Table, TableCell, TableRow, WidthType } from "../build";
const doc = new Document();
@ -29,6 +30,7 @@ const table = new Table({
});
const table2 = new Table({
alignment: AlignmentType.CENTER,
rows: [
new TableRow({
children: [
@ -66,6 +68,7 @@ const table2 = new Table({
});
const table3 = new Table({
alignment: AlignmentType.CENTER,
rows: [
new TableRow({
children: [

View File

@ -2,6 +2,7 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { AlignmentType } from "../../paragraph";
import { ShadingType } from "../shading";
import { WidthType } from "../table-cell";
import { TableLayoutType } from "./table-layout";
@ -92,4 +93,23 @@ describe("TableProperties", () => {
});
});
});
describe("#setAlignment", () => {
it("sets the shading of the table", () => {
const tp = new TableProperties();
tp.setAlignment(AlignmentType.CENTER);
const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({
"w:tblPr": [
{
"w:jc": {
_attr: {
"w:val": "center",
},
},
},
],
});
});
});
});

View File

@ -1,5 +1,6 @@
import { IgnoreIfEmptyXmlComponent } from "file/xml-components";
import { Alignment, AlignmentType } from "../../paragraph";
import { ITableShadingAttributesProperties, TableShading } from "../shading";
import { WidthType } from "../table-cell";
import { ITableBordersOptions, TableBorders } from "./table-borders";
@ -46,4 +47,8 @@ export class TableProperties extends IgnoreIfEmptyXmlComponent {
return this;
}
public setAlignment(type: AlignmentType): void {
this.root.push(new Alignment(type));
}
}

View File

@ -3,7 +3,7 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { Paragraph } from "../paragraph";
import { AlignmentType, Paragraph } from "../paragraph";
import { Table } from "./table";
// import { WidthType } from "./table-cell";
import { RelativeHorizontalPosition, RelativeVerticalPosition, TableAnchorType } from "./table-properties";
@ -211,6 +211,29 @@ describe("Table", () => {
});
});
it("should center the table", () => {
const table = new Table({
rows: [
new TableRow({
children: [
new TableCell({
children: [new Paragraph("hello")],
}),
],
}),
],
alignment: AlignmentType.CENTER,
});
const tree = new Formatter().format(table);
expect(tree)
.to.have.property("w:tbl")
.which.is.an("array")
.with.has.length.at.least(1);
expect(tree["w:tbl"][0]).to.deep.equal({
"w:tblPr": [DEFAULT_TABLE_PROPERTIES, BORDERS, WIDTHS, { "w:jc": { _attr: { "w:val": "center" } } }],
});
});
it("should set the table to provided width", () => {
const table = new Table({
rows: [

View File

@ -1,5 +1,7 @@
// http://officeopenxml.com/WPtableGrid.php
import { XmlComponent } from "file/xml-components";
import { AlignmentType } from "../paragraph";
import { TableGrid } from "./grid";
import { TableCell, VerticalMergeType, WidthType } from "./table-cell";
import { ITableBordersOptions, ITableFloatOptions, TableProperties } from "./table-properties";
@ -33,6 +35,7 @@ export interface ITableOptions {
readonly float?: ITableFloatOptions;
readonly layout?: TableLayoutType;
readonly borders?: ITableBordersOptions;
readonly alignment?: AlignmentType;
}
export class Table extends XmlComponent {
@ -46,6 +49,7 @@ export class Table extends XmlComponent {
float,
layout,
borders,
alignment,
}: ITableOptions) {
super("w:tbl");
this.properties = new TableProperties();
@ -103,5 +107,9 @@ export class Table extends XmlComponent {
if (layout) {
this.properties.setLayout(layout);
}
if (alignment) {
this.properties.setAlignment(alignment);
}
}
}