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
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.
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!
pcchadra said…
Dear Sir,
In my case some sharepoint columns are automatically uncheked can you please help

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…

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 RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…