• State Suggested Answer
  • Replies 2 replies
  • Answers 1 answer
  • Subscribers 7 subscribers
  • Views 152 views
  • Users 0 members are here
Related Discussions
Home » Discussions » Plug-Ins

Building Table in DOCX with N number of ROW'S

Rishu Kumar Gupta
Certified Associate Developer

I need to create a dynamic DOCX document that includes a table with 11 columns, where each column should automatically adjusts its width.

I have attached a code snippet that generates a DOCX document with a table showing only 8 columns. The remaining 3 columns exceed the page width, so they aren't visible.

Please help me to fix it.

 

<div style='overflow-x: auto; margin-top: 10px;'>
<table class='table-solid-border' style='table-layout: auto;'>
<thead>
<tr>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>SAP Number</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Part Number</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Description</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Manufacturer</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Group</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Spare</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Qty</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Delivery Date</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Price</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Total</th>
<th class='table-solid-border budget-profile-table-header' style='text-align: center !important;'>Remarks</th>
</tr>
</thead>
<tbody style='background-color: ghostwhite;'>",
            a!forEach(
              items: local!selectedEquipments,
              expression: concat(
                "<tr>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & fv!item.sapnumber & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & fv!item.partnumber & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & fv!item.description & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & if(
                  a!isNotNullOrEmpty(fv!item.manufacturer),
                  fv!item.manufacturer,
                  "--"
                ) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & fv!item.group & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & if(fv!item.spare, "Yes", "No") & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & fv!item.qty & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & text(
                  todate(fv!item.deliverydate),
                  "yyyy/mm/dd"
                ) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & a!currency(isoCode: "USD", value: fv!item.cadprice) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & a!currency(isoCode: "USD", value: fv!item.pricetotal) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='text-align: center;'>" & if(
                  a!isNotNullOrEmpty(fv!item.remarks),
                  fv!item.remarks,
                  "--"
                ) & "</td>",
                "</tr>"
              )
            ),
            "</tbody></table></div>
<br></br>",
            
          )
        )
      )
    ),
    "</div>",

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    I've adjusted the column widths to fit all 11 columns on the page - gave more space to Description and Remarks since they usually have more text, and squeezed the smaller ones like Qty and Spare. Should work now

    <div style='width: 100%;'>
<table class='table-solid-border' style='table-layout: fixed; width: 100%; border-collapse: collapse;'>
<thead>
<tr>
<th class='table-solid-border budget-profile-table-header' style='width: 7%; font-size: 8px; padding: 2px; text-align: center;'>SAP Number</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Part Number</th>
<th class='table-solid-border budget-profile-table-header' style='width: 14%; font-size: 8px; padding: 2px; text-align: center;'>Description</th>
<th class='table-solid-border budget-profile-table-header' style='width: 10%; font-size: 8px; padding: 2px; text-align: center;'>Manufacturer</th>
<th class='table-solid-border budget-profile-table-header' style='width: 7%; font-size: 8px; padding: 2px; text-align: center;'>Group</th>
<th class='table-solid-border budget-profile-table-header' style='width: 5%; font-size: 8px; padding: 2px; text-align: center;'>Spare</th>
<th class='table-solid-border budget-profile-table-header' style='width: 4%; font-size: 8px; padding: 2px; text-align: center;'>Qty</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Delivery Date</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Price</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Total</th>
<th class='table-solid-border budget-profile-table-header' style='width: 21%; font-size: 8px; padding: 2px; text-align: center;'>Remarks</th>
</tr>
</thead>
<tbody style='background-color: ghostwhite;'>",
            a!forEach(
              items: local!selectedEquipments,
              expression: concat(
                "<tr>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & fv!item.sapnumber & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & fv!item.partnumber & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: left; word-wrap: break-word;'>" & fv!item.description & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & if(
                  a!isNotNullOrEmpty(fv!item.manufacturer),
                  fv!item.manufacturer,
                  "--"
                ) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & fv!item.group & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center;'>" & if(fv!item.spare, "Yes", "No") & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center;'>" & fv!item.qty & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center;'>" & text(
                  todate(fv!item.deliverydate),
                  "dd/mm/yy"
                ) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: right;'>" & a!currency(isoCode: "USD", value: fv!item.cadprice) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: right;'>" & a!currency(isoCode: "USD", value: fv!item.pricetotal) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: left; word-wrap: break-word;'>" & if(
                  a!isNotNullOrEmpty(fv!item.remarks),
                  fv!item.remarks,
                  "--"
                ) & "</td>",
                "</tr>"
              )
            ),
            "</tbody></table></div>
<br></br>",
            
          )
        )
      )
    ),
    "</div>",

Reply
  • 0
    Certified Lead Developer

    I've adjusted the column widths to fit all 11 columns on the page - gave more space to Description and Remarks since they usually have more text, and squeezed the smaller ones like Qty and Spare. Should work now

    <div style='width: 100%;'>
<table class='table-solid-border' style='table-layout: fixed; width: 100%; border-collapse: collapse;'>
<thead>
<tr>
<th class='table-solid-border budget-profile-table-header' style='width: 7%; font-size: 8px; padding: 2px; text-align: center;'>SAP Number</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Part Number</th>
<th class='table-solid-border budget-profile-table-header' style='width: 14%; font-size: 8px; padding: 2px; text-align: center;'>Description</th>
<th class='table-solid-border budget-profile-table-header' style='width: 10%; font-size: 8px; padding: 2px; text-align: center;'>Manufacturer</th>
<th class='table-solid-border budget-profile-table-header' style='width: 7%; font-size: 8px; padding: 2px; text-align: center;'>Group</th>
<th class='table-solid-border budget-profile-table-header' style='width: 5%; font-size: 8px; padding: 2px; text-align: center;'>Spare</th>
<th class='table-solid-border budget-profile-table-header' style='width: 4%; font-size: 8px; padding: 2px; text-align: center;'>Qty</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Delivery Date</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Price</th>
<th class='table-solid-border budget-profile-table-header' style='width: 8%; font-size: 8px; padding: 2px; text-align: center;'>Total</th>
<th class='table-solid-border budget-profile-table-header' style='width: 21%; font-size: 8px; padding: 2px; text-align: center;'>Remarks</th>
</tr>
</thead>
<tbody style='background-color: ghostwhite;'>",
            a!forEach(
              items: local!selectedEquipments,
              expression: concat(
                "<tr>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & fv!item.sapnumber & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & fv!item.partnumber & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: left; word-wrap: break-word;'>" & fv!item.description & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & if(
                  a!isNotNullOrEmpty(fv!item.manufacturer),
                  fv!item.manufacturer,
                  "--"
                ) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center; word-wrap: break-word;'>" & fv!item.group & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center;'>" & if(fv!item.spare, "Yes", "No") & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center;'>" & fv!item.qty & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: center;'>" & text(
                  todate(fv!item.deliverydate),
                  "dd/mm/yy"
                ) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: right;'>" & a!currency(isoCode: "USD", value: fv!item.cadprice) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: right;'>" & a!currency(isoCode: "USD", value: fv!item.pricetotal) & "</td>",
                "<td class='budget-profile-table-column-value table-solid-border' style='font-size: 7px; padding: 2px; text-align: left; word-wrap: break-word;'>" & if(
                  a!isNotNullOrEmpty(fv!item.remarks),
                  fv!item.remarks,
                  "--"
                ) & "</td>",
                "</tr>"
              )
            ),
            "</tbody></table></div>
<br></br>",
            
          )
        )
      )
    ),
    "</div>",

Children
No Data
© 2025 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.