README

Table Module

This module exposes multiple tags to create or transform tables.

Currently, you can

• create a table from scratch with the{:table table1} syntax,
• Loop over table columns with the {:vt#users} {:vt/users} syntax

Installation:

You will need docxtemplater v3: npm install docxtemplater

Install this module with npm install --save "$url"

Vertical Loop Table

To have the vertical-loop-table, write :

const TableModule = require("docxtemplater-table-module");
doc.attachModule(new TableModule.Vertical());

To create a vertical loop table, you just have to use the {:vt#users} {:vt/users} tags, for example

This will create a column for each user in the users array.

It will completely remove the column if users is false or empty.

Full Table

Usage

Your docx should contain the text: {:table table1}. You can find a working sample at ./sample.js

Options

To have the vertical-loop-table, write :

const TableModule = require("docxtemplater-table-module");
doc.attachModule(new TableModule.Full());

Units :

In all options, the following units are used :

• Pixels (px), where 75pixels = 1inch = 2.54cm
• Dxa (dxa), where 1440dxa = 1inch = 2.54cm

When creating the table, you have multiple options :

• fixedColumns: Example : [null, "Example 1", null, "Example 2"], this option defines the columns that should take the whole height of the table
• widths : [unit:px] Example : [100, 150, 320, 100], this option defines the width of each column
• totalWidth : [unit:px or percentage] Example : This option cannot be used together with widths. if you use totalWidth, the width of each cell will be the totalWidth divided by the number of columns. For example, you can set totalWidth to 700 and have 2 columns of each width 350. It is also possible to set a width as a percentage with a string (for example : totalWidth: "80%". When using percentages, the current page layout will be taken into account, to have the table width depend on the page layout
• header : Example ["Source", "Hazard", "Handling", "Protection"] : This option defines the header of the table (in bold)
• subheader: Example ["The source", "The Hazard", "The Handling", "The Protection"] : This option defines the subheader of the table (in italic)
• chunkSize: Example : 6 : This option defines the number of lines after which to break the table into multiple tables
• finalPageBreak: (true or false), default false. Whether to insert a finalPageBreak after the generated table/tables
• indent : [unit:dxa] Example : 150, this option defines the indentation of the table, ie the indentation to be added before the leading edge of the table
• cellMargin : [unit:dxa] Example : {left: 250, top: 100, right: 250, bottom: 0} : This option defines the margins in each cell (it controls the <w:tblCellMar> tag)

You can also have dynamic chunkSize, for example:

chunkSize: {
    type: "dynamic",
    size: { min: 7000, max: 8100},
},

This means that the height of the table will never exceed 8100 (the max). If the table exceeds the min, the next line will be in a new table. The unit is an internal word unit.

• data : Example :

  data: [
      ["A1", "lorem"],
      ["B1", "lorem"],
      ["C1", "lorem"],
  ]
  

  This option defines the data of the table.

• border: Example : { type: "all", size: 5, color: "000000"} : This option defines the borders that are around each cell.

Global Options

It is possible to have global options for all tables created in the document, for example, to have all tables center-aligned :

const options = { align: "center" };
doc.attachModule(new TableModule.Full(options));

If options is an object, it will be merged with the default options.

It is also possible to pass a function here which gets the default options as an argument, and returns the used options.

For example, to remove the default spacingAfter of 200, you can write

const options = function(defaultOptions) {
    return {};
};
doc.attachModule(new TableModule.Full(options));

Grid Layout

It is possible to create a grid layout like this :

Grid template

Which will be rendered like this :

Grid template

In your code, do the following

const TableModule = require("docxtemplater-table-module");
doc.attachModule(new TableModule.Grid())
doc.setData({
    user: {
        size: [2, 4], // means 2 lines, 4 columns
        widths: [175, 175, 175, 175], // The widths of each column
        height: 200, // The height of each column
        data: [
            {
                index: 1,
                name: "John",
                title: "Foobar",
                description: "3374 Olen Thomas Drive Frisco Texas 75034",
            },
            {
                index: 2,
                name: "Mary",
                title: "Foobaz",
                description: "352 Illinois Avenue Yamhill Oregon(OR) 97148",
            },
            ...
        ]
    }
});

PPTX Grid Layout - loop over multiple slides

If you also have access to the slides module version 3.2.0 or above, you can also have PPTX Grid Layout support.

You can generate multiple "slides" in a grid layout with following template :

companies is an array of objects representing each company.

It will generate output similar to this :

In your code, do the following

const TableModule = require("docxtemplater-table-module");
doc.attachModule(new TableModule.GridPptx());
doc.attachModule(new SlidesModule());

doc.setData({
    companies: [
        {
            name: "first company",
            id: "first id",
            logo: "2",
            region: "france"
        },
        {
            name: "second company",
            id: "second",
            region: "germany"
        },
        {
            name: "third",
            id: "third id",
            logo: "4",
            region: "russia"
        },
        {
            name: "fourth",
            id: "fourth id",
            region: "italy"
        }
    ]
});

PPTX Grid Layout - loop on single slide

It is also possible to use the Grid Layout on some named data, for example :

will render :

with following data :

{
    "people": [
        {
            "personName": "Mary foo",
            "awards": [
                {
                    "name": "Swim 15km",
                    "image": "disc.png"
                },
                {
                    "name": "Jump 2m",
                    "image": "disc.png"
                },
                {
                    "name": "Drink 2L",
                    "image": "disc.png"
                }
            ]
        }
    ]
}