# Quote template customize display conditional columns

**URL:** <https://community.hubspot.com/t/quote-template-customize-display-conditional-columns/119441>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [October 29, 2024, 5:31pm UTC](https://community.hubspot.com/t/quote-template-customize-display-conditional-columns/119441 "2024-10-29T17:31:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarketingEKDP](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@MarketingEKDP](https://community.hubspot.com/u/MarketingEKDP)\
**Post date:** [October 29, 2024, 5:31pm UTC](https://community.hubspot.com/t/quote-template-customize-display-conditional-columns/119441/1 "2024-10-29T17:31:03Z")

</div>

**My current quote line items table has this code:**

\<div class=“line-items\_\_table-scrollable”\>

\<table class=“{{ table\_class|escape\_attr }}”\>

\<thead class=“line-items\_\_table-header–main”\>

\<tr\>

{% for title in module.line\_item\_column %}

\<th scope=“col”\>{{ title.column\_title|sanitize\_html }}\</th\>

{% endfor %}

\</tr\>

\</thead\>

\<tbody id=“line-items\_\_table-body”\>

{% set has\_present\_line\_items = LINE\_ITEMS|length \> 0 %}

{% set has\_future\_line\_items = FUTURE\_PAYMENTS|length \> 0 %}

{% set has\_both\_line\_items = has\_present\_line\_items and has\_future\_line\_items %}

{% if has\_present\_line\_items %}

{{ line\_items\_table\_rows(LINE\_ITEMS, has\_both\_line\_items ? module.line\_item\_subheadings.due\_now\_text : null) }}

{% endif %}

{% if has\_future\_line\_items %}

{{ line\_items\_table\_rows(FUTURE\_PAYMENTS, has\_both\_line\_items ? module.line\_item\_subheadings.due\_later\_text : null, true) }}

{% endif %}

\</tbody\>

\</table\>

\</div\>

{% endif %}

**It looks like this:**

 ![Screenshot table ex.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/c/1cefcf86cff40b6223ed0f7882b816aef1520333.png)

I’m trying to figure out the code to make it where if there is nothing in the cells for the “prepaid frieght minimum” columns, for it to not display the column at all.

Is this possible?

**This is the code I keep messing around with trying to get it to work:**

{% set **show\_n12\_cs\_144\_tubes\_column** = false %}

{# Step 1: Check if any unit has a non-empty ‘n12\_cs\_\_\_144\_tubes’ property #}

{% for unit in line\_items %}

{% if unit.n12\_cs\_\_\_144\_tubes %}

{% set **show\_n12\_cs\_144\_tubes\_column** = true %}

{% break %}

{% endif %}

{% endfor %}

{# Step 2: Conditionally render the column if ‘ **show\_n12\_cs\_144\_tubes\_column** ’ is true #}

{% if **show\_n12\_cs\_144\_tubes\_column** %}

\<th class=“ **your-column-header-class** ”\>12 CS / 144 Tubes\</th\>

{% for unit in line\_items %}

\<td class=“{{ cell\_print\_max\_width\_class|escape\_attr }}”\>

{% if unit.n12\_cs\_\_\_144\_tubes %}

\<strong\>${{ unit.n12\_cs\_\_\_144\_tubes|sanitize\_html }}\</strong\>\ /\ unit

{% endif %}

\</td\>

{% endfor %}

{% endif %}

I’ve tried a number of different possibilities and I keep getting **Error: Cannot resolve property.** I have tried a number of different ways of typing the parts that are bolded in the above code too.

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/6/2608f21af1c544c3bab2311218811c2f5e61aefb.png)

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/d/9deddd4ba8ceb2cdb74e0b689660cdb082fbf2ed.png)

 ![MarketingEKDP_2-1730222679677.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/b/8bb75134535bafcc5ddeb487b817af46b0ead175.png)

And I’ve tried doing the display conditions in the right panel of the design manager as well:

 ![MarketingEKDP_3-1730222704399.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/02317be7adf2bd74aec45f919dc2301b15e40bf1.png)

Any way to get this to work or another way to try it?

Thanks!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [October 30, 2024, 5:40pm UTC](https://community.hubspot.com/t/quote-template-customize-display-conditional-columns/119441/2 "2024-10-30T17:40:58Z")

</div>

@Hi, @MarketingEKDP 👋 Thanks for including all your details in your post. Let’s invite some of our community experts to the conversation — hey @Lucila-Andimol @james-portant @Anton do you have any custom quote wisdom you can share with @MarketingEKDP?

Thank you very much for taking a look! — Jaycee

---

<div class="post-metadata">

**Author:** ![GiantFocal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/giantfocal/32/41969_2.png) [@GiantFocal](https://community.hubspot.com/u/GiantFocal)\
**Post date:** [October 31, 2024, 3:19am UTC](https://community.hubspot.com/t/quote-template-customize-display-conditional-columns/119441/3 "2024-10-31T03:19:44Z")

</div>

Hi @MarketingEKDP,

Hiding empty columns solely with Hudbl is quite complicated. As an easier workaround, we can try using JS.

Here is an example:

```lia-code-sample
<script>
 // Get the table
 const table = document.querySelector(".line-items__table");

 // Loop through each column index based on <th> count
 table.querySelectorAll("th").forEach((th, colIndex) => {
 let allEmpty = true;

 // Check each <td> in the column
 table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`).forEach(td => {
 if (td.textContent.trim() !== "") {
 allEmpty = false;
 }
 });

 // Hide <th> and corresponding <td> cells if the entire column is empty
 if (allEmpty) {
 th.style.display = "none";
 table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`).forEach(td => {
 td.style.display = "none";
 });
 }
 });
 </script> 

```

---

<div class="post-metadata">

**Author:** ![MarketingEKDP](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@MarketingEKDP](https://community.hubspot.com/u/MarketingEKDP)\
**Post date:** [November 11, 2024, 5:55pm UTC](https://community.hubspot.com/t/quote-template-customize-display-conditional-columns/119441/4 "2024-11-11T17:55:56Z")

</div>

Hi, thanks for the reply. I tried placing this in the code and it still didn’t work unfornuately. We have 4 different price columns for each product, but sometimes in the quote, the sales reps may only use 2 columns on a quote, for example.

I could make multiple clones of the template with combos of including columns, or leave it with the four columns rather blank or not.