Hide Column In Tabular Report

[Master]

How can I hide some columns in tabular report without having extra spaces? I have some calculated field which I need to hide.

[MayMusic]

To hide particular columns (and column header) in tabular report page, add the following codes to the header and the footer

This goes in header:

<style>
#target table:nth-of-type(2) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(2) th:nth-of-type(3)  {display: none;}

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

#target table:nth-of-type(2) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(2) th:nth-of-type(5)  {display: none;}
</style>

<div id="target">

Add this to the footer:

</div>

The above style will hide columns 3,4 & 5. The number in table:nth-of-type(2)  depends on your result page design. If your result table is the first on the result page (case when you don't have download, or sort by dropdown or has a search form), this number should be 1. If you have download or sort by, or pre-defined criteria this number should be 2.

Number in td:nth-of-type(3) shows which column you want to hide. 1 refers to the first column, 2 second column and so on..

Also please note that this style is not supported by IE 8 and less. It should be fine on all other browsers.

[MayMusic]

If you have sticky header enabled you need to add one more line to each

 

#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(2) th:nth-of-type(3)  {display: none;}

[rmohanr]

May, your code is working and is taking away my style in the header bar. See the attached image. The last "RED SQUARE" Indicates the column to be hidden. It is working fine but taking away the blue background. How do I get the missing blue background to match the blue bar length to the gray bar below? The contents of the field (Shown as BLUE BOXES) is also not hiding

[thirdcharm]

Hi Rmohanr,

If you want to hide the text from the header bar, you can try this:

From MayMusic's answer, replace with:

#target table:nth-of-type(2) th:nth-of-type(3)  {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

or for sticky headers:

#target table:nth-of-type(2) th:nth-of-type(5)  {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

I hope this will help you.

[Corpcat]

I have a table with 38000 records and when i group them and collapse it only shows the collapsed group for max 1000 records.

I don't actually need to see the records, only the group aggregate. Can I hide the result rows and only show the Group total line so I have a nice neat table showing all the group totals not expandable?.

 

[Teshan]

This configuration does not work with new styles in version 21.0

[Kurumi]

Just an update, for new version of Styles and when your DataPage's configuration is set to "enable responsive". Here's the new code:

Header: 
 

<style>
 
#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}

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

Footer: 

</footer>
</div>
<footer>

Thank you @Vitalikssssss for this solution. 

For reference of new responsive feature, you could check it here: 
https://howto.caspio.com/datapages/responsive-datapages/prerequisites/
https://howto.caspio.com/release-notes/caspio-bridge-21-0/

Hope it helps!

[rush360]

I have hidden 4 calculated fields with the below code for a responsive datapage. The columns are successfully hidden but I also have an aggregation to achieve a total.  In the screenshot below, the aggregation is no longer aligned with the column.   How can the code be modified to include the aggregation? 

Header

<style>
 
#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)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(8)  {display: none;}
 
#target table:nth-of-type(1) td:nth-of-type(9)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(9)  {display: none;}

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

Footer

</footer>
</div>
<footer>

[CoopperBackpack]

Hello @rush360,

Please add this code to the Footer and test. It works on my end.

<script>
document.addEventListener('DataPageReady', changeColSpan);

  function changeColSpan() {
  var elem = document.querySelector('.cbResultSetTotalsLabelCell');
  var currentColSpan = elem.colSpan;
    
  elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed

  document.removeEventListener('DataPageReady', changeColSpan);

}

</script>

Hope this helps!

[rush360]

Thank you @CoopperBackpack!  Works perfectly. 

[wgroth]

I found this code can work in the header to hide columns in tabular reports, but stops working for me if other text in the header is modified. Of course, the footer code is also needed.

<style>

#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(4) {display: none;}
#target table:nth-of-type(1) th:nth-of-type(4) {display: none;}

</style>

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

I think the order of our "coding" effects Caspio's code builder and found this procedure works to keep the above column hiding code working:

1) In Advanced tab, uncheck the HTML editor

2) In Standard tab, "cut" the above code from the header if it is already there

3) In Advanced tab, check the HTML editor

4) In Standard tab, do whatever changes you want to the text in the header

5) In Advanced tab, uncheck the HTML editor

6) In Standard tab, "paste" the above header code in the very top of the page

7) "Finish"

 

[BaySunshine]

Hi @wgroth,

Can you attach a screenshot to show when the code did not work? For me, the code that @rush360 suggested is working fine.

Thanks,

[kpcollier]

On 10/23/2020 at 12:43 AM, CoopperBackpack said:

Please add this code to the Footer and test. It works on my end.

<script>
document.addEventListener('DataPageReady', changeColSpan);

  function changeColSpan() {
  var elem = document.querySelector('.cbResultSetTotalsLabelCell');
  var currentColSpan = elem.colSpan;
    
  elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed

  document.removeEventListener('DataPageReady', changeColSpan);

}

</script>

Hope this helps!

I wasn't able to get this to work for me. Unlike @rush360, my Totals column is aligned correctly, but I still have extra space to the right where I hid columns. Using the code above eliminates the extra space, but realigns the Totals number in the wrong column.

 

[CoopperBackpack]

Hello @kpcollier,

I suggested a solution for the Report that was provided in the screenshot. 

The JS solution should work if the Totals are for the field that is located after the hidden fields. 

Lets` say, you have 10 fields on the Result page, need to hide fields 5 and 6, and Totals are for field 9. In this case, Totals will not be aligned correctly and you may use the JS code to change the colspan value. 

May I know which fields are hidden and whether the Totals are for the last field in the Report as I can see from your screenshot? 

[kpcollier]

@CoopperBackpack, thanks for the reply. 

The hidden fields are 2 calculated fields, and they are the 2 last columns in the report. The Totals field is right before those two calculated fields. So essentially, after the two calc fields are hidden, the Totals field will be the last field in the report. 

[kpcollier]

I'm not sure if this is a good solution, because by the naming of the class it seems it could affect not intended cells. But, a fairly simply CSS rule was able to get rid of the column.

Turns out it was just a couple extra cells in the Totals row itself. The columns were hidden, but those cells weren't.

.cbResultSetTotalsDataCell{
  display: none !important;
}

 

[CoopperBackpack]

Hello @kpcollier,

I tested the same DataPage design in my account and you are correct, in your example we need to hide the 2 last cells in the row with the Totals.

In DevTools the layout has the following view: 

Basically, as I checked, the cbResultSetTotalsDataCell CSS class is used only for the Totals.

However, we can use a more complex selector to refer to the required cells.

tr[data-cb-name='grand_total'] td:nth-of-type(3),
tr[data-cb-name='grand_total'] td:nth-of-type(4) {display: none;}

 

[pmcfarlain]

On 5/25/2020 at 9:57 AM, Meekeee said:

Just an update, for new version of Styles and when your DataPage's configuration is set to "enable responsive". Here's the new code:

Header: 
 

<style>
 
#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}

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

Footer: 

</footer>
</div>
<footer>

Thank you @Vitalikssssss for this solution. 

For reference of new responsive feature, you could check it here: 
https://howto.caspio.com/datapages/responsive-datapages/prerequisites/
https://howto.caspio.com/release-notes/caspio-bridge-21-0/

Hope it helps!

Hi, this solution gets autocorrected by caspio and no longer works. Is there a more up-to-date solution?

[kpcollier]

1 hour ago, pmcfarlain said:

Hi, this solution gets autocorrected by caspio and no longer works. Is there a more up-to-date solution?

What do you mean by autocorrected? I currently have this workflow on my report and it is working. 

[pmcfarlain]

1 hour ago, kpcollier said:

What do you mean by autocorrected? I currently have this workflow on my report and it is working. 

When I past the code into my source, it autocorrects to this after I exit the source code screen.

<h1>Engineering Schedule</h1>
<style>
 
#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;}

</style>

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

Once autocorrecting to this, it no longer works.

[KlisaN137]

On 5/25/2020 at 4:57 PM, Meekeee said:

Header: 

<style>
 
#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}

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

Footer: 

</footer>
</div>
<footer>

 

 

This hiding of the columns can also be achieved by using only JavaScript in the Footer:

<script>
document.addEventListener('DataPageReady', function (event) {

       let label  = document.querySelector('table[data-cb-name="cbTable"] th:nth-of-type(8)'); // Select the label of eighth column
       let values  = document.querySelectorAll('table[data-cb-name="cbTable"] td:nth-of-type(8)'); // Select all the values in the eighth column
  
       /* Removing the selected fields */
       label.parentElement.removeChild(label)
       values.forEach(el => {
             el.parentElement.removeChild(el)
       });
       
       /* If we want to remove additional columns */
       label  = document.querySelector('table[data-cb-name="cbTable"] th:nth-of-type(5)'); // Select the label of fifth column
       values  = document.querySelectorAll('table[data-cb-name="cbTable"] td:nth-of-type(5)'); // Select all the values in the fifth column

       label.parentElement.removeChild(label)
       values.forEach(el => {
             el.parentElement.removeChild(el)
       });
});
</script>

Main difference between this and approach with CSS is that here columns are entirely removed from the page, and not just hidden - in the CSS approach you could still find the elements if you inspect the page, and access the information in them, but in this JavaScript approach, they are completely removed from the page.

Notice however, that in the above example we are first removing the column that comes after and work our way to the beginning.  If we would  also like to remove tenth column, we would put that code before the code for removal of the eighth.

[kpcollier]

Hi @KlisaN137, this workflow is really nice, and seems to be a better way than just 'hiding' the field with CSS. Thank you for the solution!

I threw this script into an if statement to only run if my parameter value = 'N'. 

One issue I am running in to is going back to the Search Form. It is working for the first time I search and see the results report, but the moment I click the 'Search Again' link, I receive an error: Uncaught TypeError: Cannot read properties of null (reading 'parentElement')

This prevents the script from working from there on out. If you search again after getting this error, it does not work.

I've also tried to add an if condition with appkey, as I don't want this script to mess with any of my other reports on the webpage, and the same error was occuring.

Any ideas?

*It seems it is hiding a column every single time click search, as well. It is always hiding the 5th column, and not resetting after you go back to the search form. So, it hides the 5th column on first search, then you go back and click search again, and it hides the 5th column again (which was the 6th column the first go around), making 2 columns hidden. 

 

document.addEventListener('DataPageReady', function (event) {

  let label  = document.querySelector('table[data-cb-name="cbTable"] th:nth-of-type(5)');
  let values  = document.querySelectorAll('table[data-cb-name="cbTable"] td:nth-of-type(5)');
  var dynLab = [@CS_Label];
  
  if (dynLab == 'N'){
    label.parentElement.removeChild(label)
    values.forEach(el => {
      el.parentElement.removeChild(el)
    });
  }
});

 

[KlisaN137]

Hi @kpcollier

Great spot by you, the proposed solution does not work if we have search form, and we are experiencing some strange behavior - hiding some other fields as you described it during consecutive search.

The reason for this is because it appears that when 'Search' button is clicked, the code from footer is not executed only once, but a couple of times. In order to execute the code only once, when page is first reloaded, we can add an IF statement before the actual code, which will check how many columns are still there:

<script>
document.addEventListener('DataPageReady', function (event) {

    const check = document.querySelectorAll('table[data-cb-name="cbTable"] th');
    
    /* Just set the number in IF below to the number of columns you have BEFORE hiding anything */
    if(check.length===9){
       // code goes here
    }
});
</script>

 

Additionally, I refactored whole code to be able to hide any number of columns without adding redundant code, just add or edit arguments in function deleting :

<script>
document.addEventListener('DataPageReady', function (event) {

    const check = document.querySelectorAll('table[data-cb-name="cbTable"] th');
    if(check.length===9){
        const deleting = (...args) =>{
               let label, values
               for(let a of args){
                      label = document.querySelector(`table[data-cb-name="cbTable"] th:nth-of-type(${a})`);
                      values = document.querySelectorAll(`table[data-cb-name="cbTable"] td:nth-of-type(${a})`);
                      label.parentElement.removeChild(label);

                      values.forEach(el => {
                            el.parentElement.removeChild(el);
                      });
               }
        }
        
        /* In below function call, just put any number of column you want to hide, but in reverse order - from highest number to the lowest */
        deleting(8,5);
    }
});
</script>

 

[kpcollier]

This is wonderful, thank you!