Syntax and semantics of creating rows and cells dynamically in a table

[acarvajal12]

Hello guys!

I am new to this library and I think this is a huge help in my current task now. I have seen the usage document and it is very handy but unfortunately I noticed that there were no example on how construct tables dynamically. I searched the web that is related to my problem I had no luck finding it.

The scenario that I'm facing is integrating docx to our system which uses angular. I can generate a .docx file already with the table and its table headers. The challenging part is how can I append the data after constructing the table and its headers dynamically.

Can I ask for the syntax and semantics in dealing with tables dynamically?

Hoping to hear from you soon. Thank you.

[ajRED777]

Not sure if you got the answer but just posting here for future references.

function generate() {
   journalList = [
                {
                    "note": "QA journal",
                    "entryDate": "2021-09-28T06:00:40.000Z"
                    
                },
                {
                    "note": "QA journal",
                    "entryDate": "2021-09-28T06:00:36.000Z"
                }
  ];
 const table = new docx.Table({
   
    columnWidths: [3505, 5505],
    rows: [
    ],
});

journalList.map((val,key)=>{
      var tableRow=new docx.TableRow({
            children: [
                new docx.TableCell({
                    width: {
                        size: 3505,
                        type: docx.WidthType.DXA,
                    },
                    children: [new docx.Paragraph(val["entryDate"])],
                }),
                new docx.TableCell({
                    width: {
                        size: 5505,
                        type: docx.WidthType.DXA,
                    },
                    children: [new docx.Paragraph(val["note"])],
                }),
            ],
        });
      table.root.push(tableRow);
      })  

const doc = new docx.Document({
    sections: [
        {
            children: [
                new docx.Paragraph({ text: "Table with skewed widths" }),
                table,
                new docx.Paragraph({ text: "Table with equal widths" }),
                
                
            ],
        },
    ],
});

  docx.Packer.toBlob(doc).then((blob) => {
    console.log(blob);
    saveAs(blob, "example.docx");
    console.log("Document created successfully");
  });
}

Explaination:
Used a json array of objects (journalList) here which of course can be your dynamic input.
Made a table with no rows and only populated it while traversing my array of objects using - table.root.push(tableRow);

Try the code in the below link in JS section ofcourse:
https://codepen.io/dolanmiu/pen/RwNeObg
Also change version of docx to 6.0.1

Resulting doc:

@dolanmiu are there any demos for creating table rows dynamically- that seems to be something everybody is looking for. And also are there any better ways of doing what i have done here in the latest versions.

[dolanmiu]

Yes, it’s possible to do it dynamically by doing it in JavaScript, not using push, but with a .map() of your data source, I’ll create an example on how it’s done soon

[dolanmiu]

Check out this example:

https://github.com/dolanmiu/docx/blob/master/demo/79-table-from-data-source.ts

[reyhanfdz]

I got this error ERROR TypeError: Cannot read properties of undefined (reading 'CellCount') since following the demo
here my code

const generateRow = (data) => {
            data.map((val, key) => {
                return new TableRow({
                    children: [
                        new TableCell({
                            children: [text(`${key+1}`)],
                            borders: {
                                top: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                bottom: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                left: {
                                    style: BorderStyle.DOUBLE,
                                    size: 3,
                                    color: "000000",
                                },
                                right: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                            },
                            textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
                            verticalAlign: VerticalAlign.CENTER
                        }),
                        new TableCell({
                            children: [text(``)],
                            borders: {
                                top: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                bottom: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                left: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                right: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                            },
                            textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
                            verticalAlign: VerticalAlign.CENTER
                        }),
                        new TableCell({
                            children: [text(`${val.name}`)],
                            borders: {
                                top: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                bottom: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                left: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                right: {
                                    style: BorderStyle.DOUBLE,
                                    size: 3,
                                    color: "000000",
                                },
                            },
                            textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
                            verticalAlign: VerticalAlign.CENTER
                        })
                    ]
                });
            })
        }

        const table = new Table({
            rows: [
                new TableRow({
                    children: [
                        new TableCell({
                            children: [text(`No`)],
                            borders: {
                                top: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                bottom: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                left: {
                                    style: BorderStyle.DOUBLE,
                                    size: 3,
                                    color: "000000",
                                },
                                right: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                            },
                            textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
                            verticalAlign: VerticalAlign.CENTER
                        }),
                        new TableCell({
                            children: [
                                text("Date")
                            ],
                            borders: {
                                top: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                bottom: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                left: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                right: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                            },
                            textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
                            verticalAlign: VerticalAlign.CENTER
                        }),
                        new TableCell({
                            children: [
                                text("Name")
                            ],
                            borders: {
                                top: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                bottom: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                left: {
                                    style: BorderStyle.SINGLE,
                                    size: 3,
                                    color: "000000",
                                },
                                right: {
                                    style: BorderStyle.DOUBLE,
                                    size: 3,
                                    color: "000000",
                                },
                            },
                            textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
                            verticalAlign: VerticalAlign.CENTER
                        }),
                    ],
                }),
                generateRow(data)
            ],
            width: {
                size: 100,
                type: WidthType.PERCENTAGE,
            },
        })

        const doc = new Document({
            sections: [
                {
                    children: [
                        table
                    ],
                }
            ]
        })

can you figure it out why this error come @dolanmiu ?
thanks