Interactive menu to hide and show table columns

[Johnny_Appknowledged_UK]

This code enables you to hide and show your table columns. If you have very wide tables then this is going to be really helpfull. So here’s how it works.

Click this new filter columns button

Your tabs for your columns will appear

Select the tabs you wish to remove…voila they get removed from the table. You can then click again to toggle them back on to the table

So heres the code. Just to note you will need to enter the view number on the first line

Javascript

$(document).on('knack-view-render.view_1', function (page) {
  $('.kn-table .control.has-addons').after('<div class="filtercolumnbtn"><i class="fa fa-filter"></i>Filter columns</div>')
  $('.kn-table .kn-records-nav').append('<div id="columnButtons"></div>')
  $('.filtercolumnbtn').click(function() {
   $("#columnButtons").slideToggle(500)
  });
  $('.kn-table th').each(function(index, e) {
    var columnName = $(this).text(); 
    var $button = $('<button>').text(columnName); 
    $button.click(function() {
      $(this).toggleClass('hiddentab');
      var colIndex = index + 1; 
    $('.kn-table td:nth-child(' + colIndex + ')').slideToggle(500)
    $('.kn-table th:nth-child(' + colIndex + ')').slideToggle(500)
    });
    $('#columnButtons').append($button);
  });
});

CSS

.filtercolumnbtn {
  width: fit-content;
  background:#ebebeb;
  cursor:pointer;
  padding:5px 10px;
  border-radius: .4em;
  display: flex;
  align-items: center;
}

.filtercolumnbtn i {
  padding:0px 5px;
}

#columnButtons button {
  margin:5px;
  border-radius:1em;
  background-color: rgb(37, 166, 236);
  border:none;
  padding:5px 10px;
  transition:all .4s;
  cursor:pointer;
  color:white;
  border:2px solid rgb(37, 166, 236);
  font-weight:bold;
}

#columnButtons {
  display:none;
}

#columnButtons button.hiddentab {
  background-color: white!important;
  border:2px solid rgb(37, 166, 236);
  color:rgb(116, 116, 116);
}

[CarlHolmes]

Awesome @Johnny_Appknowledged_UK - that looks like a really elegant and simple solution that should completely solve one of my client app issues with very wide tables.
Looking forward to giving it a try.

[Johnny_Appknowledged_UK]

@CarlHolmes you are more than welcome. Let me know how you get on! hope you and your client enjoy it.

[Roger]

@Johnny_Appknowledged_UK
This is a very nice feature - works great!

[Ally]

This is great, Johnny! I am looking forward to playing with this in my own apps.

Thanks for sharing your code freely! #bettertogether

<3

[Johnny_Appknowledged_UK]

@Ally No problem, Enjoy!

Any questions just let me know

[Hugo]

Very cool - Nice one Johnny.

To really turbo charge the feature it would be great to be able to export only the selected columns - or does it already do that…?

[Johnny_Appknowledged_UK]

Hey @Hugo no not at the moment this is purely just so you can digest information easier when looking at the the table.

[Nick]

@Johnny_Appknowledged_UK You are Rocking It! Thank you!

[patrick3]

Thanks Johnny, I had a quick go and it sort of works. Do the columns in the view need to be in the exact same order as the fields in the table? The reason I ask is that the filter appears in the view but then the columns that hide/unhide don’t match the words in the columnButtons. For example, I might select column 1 but column 2 disappears.

Might be something I am doing wrong but just wondered if you have wrestled with this.

Best Regards,
Paddy

[Johnny_Appknowledged_UK]

Hey @patrick3 I’m not quite sure if I’ve understood the question. The columns represent the fields in the cells?

The code was created in a very simple app with no other code or views etc. You could have potential other things that might effect it. Can I ask do you have another table on the same page?

[Pálmar]

Grate code, one question.
If you hide colum and then open new view from a filed in the table and after returning to the table view again from the form, all colums are in default state showing and you have to turn off all colums again.
Would be nice if you could remain the same filtering of colums when you are returning back to the table view. That means the filtering will remain unchanged until you change filtering manually.

[patrick3]

Hi Johnny - yes that would be it. I bunged the code into quite a complicated App where a view (on a page) contained a mixture of tables.

Cheers,
Paddy

[BradStevens]

Brilliant @Johnny_Appknowledged_UK thanks!

[AlishaP95770]

Great code! Thank you!

[Johnny_Appknowledged_UK]

Hey everyone, I hope you’ve been enjoying these code snippets. I wanted to let you know that all of my code is now available on my new platform, Appknowledged. Appknowledged has taken over from KnackMods. I encourage all of you to sign up—it’s completely free—and you’ll have access to all of my free content.

Interactive menu to hide and show table columns