Hide Tabular Columns based on a Field Value

[Flowers4Algernon]

Hello! 

Just wanted to share this solution that I have made wherein the tabular column would show specific columns based on a field. You may also refer to the steps below:

1. Create a case when statement that will return a CSS code that hides columns. You may refer to this code:

CASE 

WHEN [@field:Type]= '2'

THEN ' 
#target table:nth-of-type(1) td:nth-of-type(2)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(4)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(6)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(7)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(8)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(8)  {display: table-cell;}
'

WHEN [@field:Type] = '1'

THEN '

#target table:nth-of-type(1) td:nth-of-type(2)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(3)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(3)  {ddisplay: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(4)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(6)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(8)  {ddisplay: none;}
#target table:nth-of-type(1) th:nth-of-type(8)  {ddisplay: none;}
'

else '0'

end

2. Add a Header element and add the code below:

<style>

#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}
 
[@calcfield:1]

</style>
 
</header>
<div id="target">
<header>

The first set of code will depend on the position/place of your Calculated Field. If it is not the first element, you may change the second set of numbers. 

3. Add the code below on the footer element:
 

</footer>
</div>
<footer>

 

You may also check out it here: https://c7eru143.caspio.com/dp/f94390006c836a78af3e4018ba14

[Flowers4Algernon]

Btw, I have used this forum post as part of solution: https://forums.caspio.com/topic/5323-hide-column-in-tabular-report/

[futurist]

On 7/15/2022 at 5:14 PM, Flowers4Algernon said:

Hello! 

Just wanted to share this solution that I have made wherein the tabular column would show specific columns based on a field. You may also refer to the steps below:

1. Create a case when statement that will return a CSS code that hides columns. You may refer to this code:

CASE 

WHEN [@field:Type]= '2'

THEN ' 
#target table:nth-of-type(1) td:nth-of-type(2)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(4)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(6)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(7)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(8)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(8)  {display: table-cell;}
'

WHEN [@field:Type] = '1'

THEN '

#target table:nth-of-type(1) td:nth-of-type(2)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(3)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(3)  {ddisplay: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(4)  {display: table-cell;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: table-cell;}

#target table:nth-of-type(1) td:nth-of-type(6)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(8)  {ddisplay: none;}
#target table:nth-of-type(1) th:nth-of-type(8)  {ddisplay: none;}
'

else '0'

end

2. Add a Header element and add the code below:

<style>

#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}
 
[@calcfield:1]

</style>
 
</header>
<div id="target">
<header>

The first set of code will depend on the position/place of your Calculated Field. If it is not the first element, you may change the second set of numbers. 

3. Add the code below on the footer element:
 

</footer>
</div>
<footer>

 

You may also check out it here: https://c7eru143.caspio.com/dp/f94390006c836a78af3e4018ba14

   Hi,

Jus to add, you may refer to this link on how to hide (or do any other stylings) multiple sibling elements all at once:

 

[Kurumi]

Hi - Just an update, here are the other ways for you to hide column in the Tabular Report:

Without Download/Sort Options:

table[id*='cbTable'] > tbody > tr[class*='cbResultSetTableHeader'] > th:nth-child(1), td[class*='cbResultSetData']:nth-child(1){

    display:none !important;
  
}

With Download/Sort Options:

table[id*='FreezeTabularHeaderObj'] > tr[data-cb-name="header"] > th:nth-child(1), td[class*='cbResultSetData']:nth-child(1), #target table:nth-of-type(1) th:nth-of-type(1), #target table:nth-of-type(2) th:nth-of-type(1){

    display:none !important;
  
}

Replace 1 with the position order of column to be hidden.