Skip to main content

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.

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
Unknown 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...
Unknown 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.
Unknown 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.
Unknown 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.
Unknown 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.

Popular posts from this blog

How To: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class. I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover. Ribbon Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title