Toggle table column group visibility

Alex Feldman

I'd like to have a table where columns can be grouped with some meta attribute and their visibility toggled with buttons/checkboxes above the table. For example:

=============

[Button A] [Button B]

------------------

Col 0 (Fixed) | Col 1 (A) | Col 2 (A) | Col 3 (B) | Col 4 (B) | Col 5 (B)

=============

In the example above, Column 0 is fixed and always visible. Toggling Button A would hide/show Columns 1 and 2, and togling Button B would hide/show Columns 3,4,5.

What's the best way to achieve this?

Alex Feldman

I've come up with this javascript solution which works well. Only problem is that all tables on the page will toggle. Unfortunately Confluence is stripping any attributes that I assign to elements, so selecting unique items on the page is a little difficult at the moment. I'd love to hear solutions for this.

I added the following code to an HTML Macro:

<input type="checkbox" checked="true" onclick="toggleColumns(this.checked, businessColumns)">Business Columns</input>
<input type="checkbox" checked="true" onclick="toggleColumns(this.checked, technicalColumns)">Technical Columns</input>
 
<script type="text/javascript">
  var businessColumns = [2,3];
  var technicalColumns = [4,5];
 
  function toggleColumns(show, columns){
    var $tapps = AJS.$("table");

    for (var i = 0; i < columns.length; i++) {
      if(show){
         $tapps.find('td:nth-child(' + columns[i] + '),th:nth-child(' + columns[i] + ')').show();
      }else{
         $tapps.find('td:nth-child(' + columns[i] + '),th:nth-child(' + columns[i] + ')').hide();
      }
    }
  }
</script>