JavaScript API: addTable

CONTENTS

LAYOUTS

SETTINGS

STYLES

TEMPLATES

OTHERS

addTable

PREMIUM

TRIAL / ADVANCED

Adds table.

Note

You are reading the JavaScript API documentation. For the PHP API method please go to addTable.

Description

addTable (items: (string | WordFragment | OptionsCellTable)[][], optionsRow: OptionsRowTable[] = [], optionsTable: OptionsTable = {}): this

interface BorderCell {
    /** Color: HEX value. Default as auto */
    color?: string;
    /** Space: pt value. Default as 0 */
    space?: number;
    /** Border style: single, dotDash, none, thick... Default as single */
    style?: string;
    /** Width: eights of a point value. Default as 4. Minimum 2 and maximum 96 */
    width?: number;
}

interface OptionsCellTable {
    /** Background color: HEX value */
    backgroundColor?: string;
    /** Border */
    border?: {
        bottom?: BorderCell;
        left?: BorderCell;
        right?: BorderCell;
        top?: BorderCell;
    };
    /** Grid span */
    gridSpan?: number;
    /** Fit text */
    fitText?: boolean;
    /** Margin: twips value */
    margin?: {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
    /** Content */
    text: string | WordFragment;
    /** Text direction */
    textDirection?: "btLr" | "tbLrV" | "tbRl" | "tbRlV" | "lrTb" | "lrTbV";
    /** Vertical alignment */
    verticalAlign?: "both" | "bottom" | "center" | "top";
    /** Width: twips value */
    width?: number;
    /** Vertical merge */
    vMerge?: "restart" | "continue";
    /** Wrap text */
    wrapText?: boolean;
}

interface OptionsRowTable {
    /** Allow row to break accross pages */
    cantSplit?: boolean;
    /** Repeat as header row at the top of each page */
    header?: boolean;
    /** Height */
    height?: {
        /** Height size rule */
        rule?: "auto" | "atLeast" | "exact";
        /** Value: twips value */
        value?: number;
    };
}

interface OptionsTable {
    /** Alignment */
    align?: string;
    /** Border */
    border?: {
        bottom?: BorderCell;
        insideH?: BorderCell;
        insideV?: BorderCell;
        left?: BorderCell;
        right?: BorderCell;
        top?: BorderCell;
    };
    /** Cell margins: twips value */
    cellMargin?: {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
    /** Cell spacing: twips value */
    cellSpacing?: number;
    /** Column widths */
    columnWidths?: number | number[];
    /** Contional formatting  */
    conditionalFormatting?: {
        /** First column. Default as true */
        firstColumn?: boolean;
        /** First row.  Default as true */
        firstRow?: boolean;
        /** Last column.  Default as false */
        lastColumn?: boolean;
        /** Last row.  Default as false */
        lastRow?: boolean;
        /** Horizontal banding. Default as false */
        noHBand?: boolean;
        /** Vertical banding.  Default as true */
        noVBand?: boolean;
    };
    /** Indentation: twips value */
    indentation?: number;
    /** Layout */
    layout?: "autofit" | "fixed";
    /** Paragraph options added after the table */
    paragraphAfterOptions?: OptionsParagraph;
    /** Table style. Default as TableGrid */
    tblStyle?: string;
    /** Text wrapping */
    textWrapping?: "around" | "none";
    /** Table width */
    width?: {
        /** Type: auto, dxa (twips value), pct (percent). Default as pct */
        type?: "auto" | "dxa" | "pct";
        /** Value: dxa (twips value), pct (percent value). Default as 100 if type is pct  */
        value?: number;
    };
}

Code samples

Example #1

import { CreateDocx, OptionsTable } from "build";
import * as fs from "fs";

const docx = new CreateDocx();

// add a table with text contents
const items = [
    ["11", "12", "13", "14"],
    ["21", "22", "23", "24"],
    ["31", "32", "33", "34"],
];

docx.addTable(items);

// add a table applying table styles
const optionsTableA: OptionsTable = {
    align: "right",
    border: {
        top: {
            color: "FF0000",
            width: 4,
        },
        right: {
            width: 4,
        },
        bottom: {
            color: "FF0000",
            width: 4,
        },
        left: {
            width: 4,
        },
        insideH: {
            color: "00FF00",
            width: 10,
            style: "dashed",
            space: 10,
        },
        insideV: {
            style: "dashed",
        },
    },
    textWrapping: "around",
    width: {
        type: "pct",
        value: 50,
    },
};
docx.addTable(items, [], optionsTableA);
docx.addText("Text content added 'around' a table.");

// add a table applying table styles
const optionsTableB: OptionsTable = {
    align: "center",
    cellSpacing: 30,
    cellMargin: {
        top: 100,
        left: 200,
        bottom: 100,
        right: 200,
    },
    columnWidths: [5000, 1000, 1000, 1000],
    layout: "fixed",
    paragraphAfterOptions: {
        spacing: {
            before: 0,
            after: 0,
        },
    },
    width: {
        type: "dxa",
        value: 8000,
    },
};
docx.addTable(items, [], optionsTableB);

docx.save().then(contents => {
    fs.writeFileSync("addTable_1.docx", Buffer.from(contents));
});

The resulting Word document looks like:

Example #2

import {
    CreateDocx,
    OptionsImage,
    OptionsLink,
    OptionsText,
    WordFragment,
} from "build";
import * as fs from "fs";

const docx = new CreateDocx();

// create WordFragments
const wordFragmentText = new WordFragment();
const textA: OptionsText = {
    bold: false,
    italic: true,
    fontSize: 14,
    text: "A content with styles ",
};
const textB: OptionsText = {
    color: "0000FF",
    font: "Times New Roman",
    text: "in a cell.",
};
wordFragmentText.addText([textA, textB]);

const wordFragmentLink = new WordFragment();
const optionsLink: OptionsLink = {
    link: "https://www.phpdocx.com",
    text: "phpdocx",
};
wordFragmentLink.addLink(optionsLink);

const filePng = fs.readFileSync("image.png");
const wordFragmentImage = new WordFragment();
const imagePng: OptionsImage = {
    image: filePng,
};
wordFragmentImage.addImage(imagePng);

// add text contents and WordFragments in the table
const items = [
    ["Title A", "Title B", "Title C"],
    [wordFragmentText, wordFragmentLink, wordFragmentImage],
];

docx.addTable(items);

docx.save().then(contents => {
    fs.writeFileSync("addTable_2.docx", Buffer.from(contents));
});

The resulting Word document looks like:

Example #3

// add tables with row and cell styles

import {
    CreateDocx,
    OptionsCellTable,
    OptionsParagraph,
    OptionsRowTable,
    OptionsTable,
    WordFragment,
} from "build";
import * as fs from "fs";

const docx = new CreateDocx();

// add a table with cell and row styles adding text and WordFragment contents
const optionsCellTable1_1: OptionsCellTable = {
    backgroundColor: "0000FF",
    text: "11",
};
const optionsCellTable1_1_2: OptionsCellTable = {
    backgroundColor: "0000FF",
    text: "12",
};
const optionsCellTable1_3_3: OptionsCellTable = {
    backgroundColor: "00FF00",
    border: {
        top: {
            width: 20,
        },
        right: {
            style: "none",
        },
        bottom: {
            width: 20,
        },
        left: {
            width: 20,
        },
    },
    text: "",
    width: 200,
};
const cellContent_3_4 = new WordFragment();
const optionsParagraph: OptionsParagraph = {
    align: "right",
};
cellContent_3_4.addText("34", optionsParagraph);
const optionsCellTable1_3_4: OptionsCellTable = {
    backgroundColor: "00FF00",
    border: {
        top: {
            width: 20,
        },
        right: {
            color: "FF0000",
            width: 20,
        },
        bottom: {
            width: 20,
        },
        left: {
            style: "none",
        },
    },
    margin: {
        top: 200,
        right: 150,
        bottom: 200,
        left: 150,
    },
    text: cellContent_3_4,
    textDirection: "tbRl",
    wrapText: false,
};
const itemsTable1 = [
    [optionsCellTable1_1, optionsCellTable1_1_2, "13", "14"],
    ["21", "22", "23", "24"],
    ["31", "32", optionsCellTable1_3_3, optionsCellTable1_3_4],
];
const optionsRow1Table: OptionsRowTable = {
    cantSplit: true,
    header: true,
    height: {
        rule: "exact",
        value: 2000,
    },
};
const optionsRow2Table: OptionsRowTable = {};
const optionsRow3Table: OptionsRowTable = {
    cantSplit: true,
    height: {
        rule: "atLeast",
        value: 3000,
    },
};
const optionsTable: OptionsTable = {
    align: "center",
    width: {
        type: "pct",
        value: 80,
    },
};
docx.addTable(
    itemsTable1,
    [optionsRow1Table, optionsRow2Table, optionsRow3Table],
    optionsTable
);

// add a table with colspan and rowspan options
const optionsCellTable2_1_1: OptionsCellTable = {
    vMerge: "restart",
    text: "11",
};
const optionsCellTable2_1_4: OptionsCellTable = {
    vMerge: "restart",
    text: "14",
};
const optionsCellTable2_2_2: OptionsCellTable = {
    gridSpan: 2,
    text: "22",
};
const cellContent_3_4_2 = new WordFragment();
const optionsParagraph2: OptionsParagraph = {
    align: "right",
};
cellContent_3_4_2.addText("Total", optionsParagraph2);
const optionsCellTable2_4_4: OptionsCellTable = {
    backgroundColor: "A9A9A9",
    border: {
        top: {
            color: "FF0000",
            width: 20,
        },
        right: {
            color: "FF0000",
            width: 20,
        },
        bottom: {
            color: "FF0000",
            width: 20,
        },
        left: {
            color: "FF0000",
            width: 20,
        },
    },
    gridSpan: 5,
    margin: {
        top: 200,
        right: 150,
        bottom: 200,
        left: 150,
    },
    text: cellContent_3_4_2,
};
const optionsCellMergeContinue: OptionsCellTable = {
    text: "",
    vMerge: "continue",
};
const itemsTable2 = [
    [optionsCellTable2_1_1, "12", "13", optionsCellTable2_1_4, "15"],
    [
        optionsCellMergeContinue,
        optionsCellTable2_2_2,
        optionsCellMergeContinue,
        "25",
    ],
    [optionsCellTable2_4_4],
];
docx.addTable(itemsTable2);

docx.save().then(contents => {
    fs.writeFileSync("addTable_3.docx", Buffer.from(contents));
});

The resulting Word document looks like:

Release notes

phpdocx 15.0:
- new method.