Monday, January 27, 2014

SharePoint 2013 Responsive Table Columns

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!

image

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:
.ms-viewheadertr th:first-child

2nd TH Column:
.ms-viewheadertr th:first-child+th

3rd TH Column:
.ms-viewheadertr th:first-child+th+th

Below you will find the source code that I used for this project.

Complete Master Page, CSS & JavaScript:
Download Source

Thanks and Enjoy!

Referenced jQuery Code:
http://www.filamentgroup.com/examples/rwd-table-patterns/
https://github.com/thepeg/MediaTable

image I want to give a big shout out to my Slalom Consulting friends: Bendan Schoch for connecting me with the jQuery code and to David Lozzi for helping me with some code changes/fixes.

18 comments:

Unknown said...

Erik,

Thank you for sharing this excellent work-around. Do you think this can work for SharePoint 2010?

Erik Swenson said...

It is my assumption that you could use this for 2010 as well since they use the same class names for list views. You just have to update the masterpage and CSS.

Unknown said...

Thank you Erik. I will give it a try and see what happens.
This might fill some of the gaps I am having in using bootstrap 2 responsive design for collaboration site, http://responsivesharepoint.codeplex.com/discussions/471137.

Starkey

EB said...

Good solution. I will try it for sure ! Thanks !

prasad parab said...

Thank you so much Erik. It helped me a lot.

prasad parab said...

Hi Erik,
I have one more question based on this tutorial.
Here, we made columns responsive but can we change the layout of that page??

right now it displaying data row by row but i want to make it column by column. Is it possible??

i am posting the photo of what i want on your twitter id. Can you please have a look at that image so that it would be easy to understand what i want


https://www.dropbox.com/s/lih3xfkvr0k22yp/20140404_124128.jpg

Engin Micoogullari said...

Thanks for the awesome solution Erik! Really appreciate the work you put into this!

I got everything working except one thing!

I was wondering if you could help me..All the color-combinations are working just fine but where do you define the column-drop-down? Maybe Im missing something?

Thanks in advance!

Erik Swenson said...

Hey Engin, The Drop down is generated by the jQuery. In the CSS provided you will see a class name of .mediaTableMenu which will help you set the position either left or right and the style of the drop down. Basically JQuery builds the menu object and assigns the class names etc. I hope that helps...

Ludvig Luther said...

Thank you for this awesome code:)

Is there anyone that can confirm that the column picker is only working for document libraries? That is the case for me in Office 365 SharePoint Online.

Brett Bryant said...

Hey mate, thanks for this code. Would just like to add to get this to work with SharePoint 2010 I just had to add .ready function to my masterpage and change the line in jquery.mediaTable.js (// Columns Initialization Loop.) from ('thead th') to ('tbody th').

Anon said...

Great solution. I have one question you have hardcoded the css to work upto 12 columns I believe. What if user configures the view and adds more column will it still work, or we need to add more +th's.

Harsh Damania said...

Did this work

Natasha Wright said...

Erik
Thanks for sharing. I am trying to change the width of columns. I am truly green to sharepoint and would appreciate simple solution.

vj said...

It works great for Library but not working for list. I am getting error as "SCRIPT5022: Syntax error, unrecognized expression: #{list guid}-{view guid}-mediaTableCol-columnID
jquery.min.js, line 3 character 14659
"

vj said...

Got it work for list also. Thanks for the great solution. For the error i am getting .js is referring to #{list guid}-{view guid}-mediaTableCol-columnID where id contains special characters. so in order to get ride of it add below two lines after151 line (var val = $checkbox.val(); // this equals the header's ID, i.e. "company")
val = val.replace(/([ {])/g, "\\{");
val = val.replace(/([ }])/g, "\\}");

Erik Swenson said...

Thanks VJ! I will have to test that out and post an update.

Paul Brown said...

Thanks for this Erik, I am having difficulty though - the column headers are behaving correctly but the listviewtable tds aren't being hidden when I resize the browser. Any suggestions? Thanks.

Kiki said...

Hi,

I've got it almost working as it should - however, for some reason when I reduce the browser to mobile size the contents are hidden completely and the jquery box to select which columns to show shows everything as unchecked (empty boxes). Even though when I started at the Desktop size all the columns were checked (turned on). Has anyone else experienced this problem?

Also, when I downloaded your code, there was one file missing so I snagged the one from github that you mention. It's this file: jquery.mediaTable.css -- but I'm not sure if there are issues with it, if that's the issue or something else? Can you post your original file (just in case you made changes to it since the one from Github is from an old repository and the person warns against the code being out of date: https://github.com/marcopeg/MediaTable

Thanks so much for any help you can provide!