SharePoint 2013: Hide List and Library Column Headings

 

This is an update to an older article to include support for SharePoint 2013.

---

Hiding Column Headings

I had a request to hide the column headings of a list displayed in a web part. First thought was that they wanted to hide the toolbar, but they were asking about the clickable column headings. I think they were wanting to make a page look more like a regular web page instead a page full of lists. By the way, this makes for a better way to display a view with only one column.

Note: This will of course remove the ability of the site visitor to sort and filter the web part.

Note: This will also work in the view page (view pages use web parts!), but in SharePoint 2010 and 2013 adding a web part to a view page will change how the ribbon gets displayed and will remove the View dropdown menu from the title area crumb trail.

Before:

After:

With Toolbar set to "No Toolbar":

Remove additional clutter…

You can edit the web part and then click "Edit the current view" further clean up the display of the list.

• Remove the checkbox column: In the Tabular View section uncheck "Allow individual item checkboxes".
• Remove the "…": In the Columns section uncheck "Name (linked to document with edit menu)" and checkmark "Name (linked to document)".
• Remove the hyperlink: In the Columns section uncheck "Name (linked to document with edit menu)" and checkmark "Name (for use in forms)".
• Remove any unneeded columns such as Modified or Modified By.

 

Steps:

• Add your web part for the list or library to a page.
• For a minimal look set the web part's Toolbar Type property to “No Toolbar”.
• Copy the JavaScript below to a Notepad file (name it something like “HideHeading.html”) and upload this file to a library such as Site Assets.
• In the library where you uploaded this file, click the "…" and copy the displayed URL. It should look something like this:
      https://yourServerDomain/sites/training/SiteAssets/HideColumnHeadings.html
• Below your list / library web part add a Content Editor Web Part (CEWP).
• If the CEWP displays it’s title bar then in the Appearance section set the Chrome to “none”.
• Paste the URL copied above into the Content Link box.
• In the web part properties editor, click OK.
• In the PAGE ribbon, click Save.
• Or (for SharePoint view pages)
  • Edit the view page in SharePoint Designer 2013. 
  • Copy and paste the Javascript to just before the end tag for PlaceHolderMain (just before </asp:Content>).
• If you want to hide the column headings of multiple web parts modify the IF statement like this Three web parts

Web part summary name!

In SharePoint 2007, the summary name is usually just the list’s name: “Shared Documents”.

In SharePoint 2010, the summary name is usually the list’s name PLUS the list’s description. For example the default for Shared Documents is: “Shared Documents Share a document with the team by adding it to this document library.”  (including the period)

To find the correct name use your browser’s View Source option to display the HTML of the page and search for “summary=” and copy the text that follows. Or, use the browser's developer tools (usually F12) and search for "summary="

    <table  …  summary="Shared Documents Share a document with the team by adding it to this document library."   … >

 

The JavaScript

Need to change multiple web parts? Edit the line that contains "if (x[i].summary==""

Two web parts:
             if (x[i].summary=="Tasks" | x[i].summary=="Shared Documents"
Three web parts:
             if (x[i].summary=="Tasks" | x[i].summary=="Links" | x[i].summary=="Shared Documents"

<script type="text/javascript">
// CEWP trick from techtrainingnotes.blogspot.com!

// techtrainingnotes.blogspot.com/2015/07/sharepoint-hide-list-and-library-column.html
// Hide column headings in web parts

function TTNHideHeadings()
{
  //Find the list  (change "Documents" to your web part's "summary" name)
  var x = document.getElementsByTagName("TABLE"); // find all of the Tables 
  var y;
  for (var i=0;i<x.length;i++) 
  {
    if (x[i].summary=="Documents")  //find the table with this name
    {
      y = x[i].getElementsByTagName("TR");
      y[0].style.display="none";  //hide the first row
    } 
  }
}

try {
  // for 2010 and 2013
  ExecuteOrDelayUntilScriptLoaded( TTNHideHeadings, "sp.js" );
}
catch (e) {
  // for 2007
  _spBodyOnLoadFunctionNames.push('TTNHideHeadings');
}
  
</script>