I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts.
SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way!
In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document?
Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displayed and which ones are hidden. In the drop down it then allows you to choose on demand what columns to display. Basically I call this having a cake and eating it too!
Update: In the video I described the pseudo code incorrectly and was one column off. I will try to update the video once I have some time. Here is the correct explanation:
1st TH Column:
2nd TH Column:
3rd TH Column:
Below you will find the source code that I used for this project.
Thanks and Enjoy!
Referenced jQuery Code: