List of ways to create tables in Docxtemplater

Published on 3rd November 2025

List of ways to create tables in Docxtemplater

Docxtemplater offers several ways to generate tables in your documents. Depending on your needs—simplicity, styling, or dynamic content—you can choose the approach that fits best.

Here's a table showing you the list of all options allowing you to create tables dynamically, and whether they are free, the feature and the limitation and a link to the documentation.

This article goes into the details of the 3 most commonly used options.

Feature	Price	Supported formats	Description	Drawback
Table Loop	Free	docx, pptx, xlsx	Simply create a table by looping over multiple table rows with `{#users}` and `{/}`	Can't create styled table, can't create dynamic rowspans. Only possible to create loops row by row
HTML Module or HTML-pptx module	Paid	docx or pptx (one module per filetype)	Create a table from one tag such as `{~~html}` by specifying the table in HTML format, Allows to create styled tables	Need to import or write HTML, gives less power to the template creator
Table Module - Full Table feature	Paid	docx only	Create a table from one tag such as `{:table users}` by specifying the table in a 2 dimensional array. Allows to specify style in Javascript	For complex tables with lots of merged rows, the HTML module could be easier to work with
Table Module - Grid Layout	Paid	docx and pptx	The elements enclosed inside the `{:#grid xx}` and `{:/grid}` will be duplicated and placed inside a table. This can be useful if you want to fill your page or your slides with a card. For Pptx documents, if you also need to create multiple slides, if there are more elements than fit in the grid, you will also need the slides module	Specific to one use case, for example if you need to create 20 qrcodes per page.
Table Module - Vertical loop	Paid	docx and pptx	The table column enclosed inside `{:vt#users}` and `{:vt/users}` will be duplicated for as many users there are in the table. This is very useful if you need to create a table with a variable number of columns.	Specific to one use case, for example if you need to have a table with a variable number of columns
Table Module - Merge Cell	Paid	docx and pptx	By using a Table Loop, you can then dynamically merge cells if the two cells have exactly the same content
Styling Module	Paid	docx and pptx	You can change the style of a given cell using a tag placed in that cell, to for example change the background-color of that cell to red or to green depending on a condition.
Xlsx Module	Paid	xlsx only	You can create a table by using the horizontal loop feature, in order to create a table of data in your excel documents. Your template looks like this : `{#elements}{>.}{.} {/}`

Option 1. Using Loops (Open-Source Version)

This method works for docx, pptx, and xlsx documents.

The simplest way to create a table is by leveraging loops directly in your template. You define a table in Word with one row containing placeholders, then use a loop to repeat that row for each item in your data.

Example Template:

Name	Age	City
{#people}{name}	{age}	{city}{/people}

Data:

{
    "people": [
        { "name": "Alice", "age": 30, "city": "Paris" },
        { "name": "Bob", "age": 25, "city": "Berlin" },
        { "name": "Charlie", "age": 35, "city": "London" }
    ]
}

Result:

Name	Age	City
Alice	30	Paris
Bob	25	Berlin
Charlie	35	London

Styling is limited when using this method. All repeated rows will inherit the formatting of the original row.

You can not create tables with dynamically merged rows or columns with this method

Option 2. Using the HTML Module

This method works for docx and pptx documents (with the HTML module and HTML-pptx module).

For more control over formatting, the HTML module allows you to write HTML-like content in your JSON. This is useful when you need merged cells, colors, or other styling.

{~~table}

const Docxtemplater = require("docxtemplater");
const HTMLModule = require("docxtemplater-html-module");
const htmlOptions = {};
const doc = new Docxtemplater(zip, {
    modules: [new HTMLModule(htmlOptions)],
});
doc.render({
    html: `
        <table style="border-spacing: 0; width: 100%; font-family: Arial, sans-serif; border: 1px solid #ccc; overflow: hidden;">
            <thead>
                <tr style="background-color: #4CAF50; color: white;">
                    <th style="padding: 12px; text-align: center;">Product</th>
                    <th style="padding: 12px; text-align right;">Quantity</th>
                    <th style="padding: 12px; text-align right;">Unit Price</th>
                    <th style="padding: 12px; text-align right;">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr style="background-color: #f9f9f9;">
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: center;">Apple</td>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">10</td>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">$1.50</td>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">$15.00</td>
                </tr>
                <tr>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: center;">Banana</td>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">5</td>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">$0.80</td>
                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">$4.00</td>
                </tr>
                <tr style="background-color: #f9f9f9;">
                    <td style="padding: 10px;" colspan="2"></td>
                    <td style="padding: 10px; font-weight: bold; text-align: center;">Total</td>
                    <td style="padding: 10px; font-weight: bold; text-align: right;">$19.00</td>
                </tr>
            </tbody>
        </table>
    `,
});

Product	Quantity	Unit Price	Total
Apple	10	$1.50	$15.00
Banana	5	$0.80	$4.00
		Total	$19.00

The HTML module provides more flexibility, it allows you to use "background-color", border customization, colspan, but it may require more knowledge about HTML and the need to create or fetch the HTML data from your code.

Option 3. Using the Table Module for docx

The Table Module is available as a paid module of Docxtemplater and provides a higher-level abstraction for tables.

The table module supports docx templates, and gives access to multiple features related to table.

One of the features is the "full table" feature, which allows to create a new table from a single placeholder in your templater.

For your data, you need to provide a table (2-dimensional matrix) in your code.

Example :

{:table users}

const TableModule = require("docxtemplater-table-module");
const doc = new Docxtemplater(zip, {
    modules: [new TableModule.Grid()],
});
doc.render({
    users: {
        data: [
            [
                "1",
                "John",
                "Foobar",
                "3374 Olen Thomas Drive Frisco Texas 75034",
            ],
            [
                "2",
                "Mary",
                "Foobaz",
                "352 Illinois Avenue Yamhill Oregon(OR) 97148",
            ],
        ],
        size: [2, 4], // means 2 lines, 4 columns
        widths: [175, 175, 175, 175], // The widths of each column
        height: 60, // The height of each column
        header: ["Index", "Name", "Title", "Description"],
        style: {
            header: {
                shade: "DDAA33",
                textAlign: "left",
            },
            normal: {
                shade: "F3F3F3",
                textAlign: "right",
            },
        },
    },
});

Index	Name	Title	Description
1	John	Foobar	3374 Olen Thomas Drive Frisco Texas 75034
2	Mary	Foobaz	352 Illinois Avenue Yamhill Oregon(OR) 97148

This method allows you to create a table by simply providing the raw data, and optionally adding style (for textAlign, header background-color, …)