How can we hide the document library column title called 'Name' using JSLink? I would still like it to display the contents

Tried the solution Amal Hashim, there is some space issue in the library

Before js link the display of library

enter image description here

After the jsLink

enter image description here

  • 3
    Just don't include it in your view to begin with, although in either case, it will make it difficult to interact with the document for your users, I'd make sure this is absolutely required to exclude it as it really messes with the user experience. – Eric Alexander Aug 29 '16 at 14:21
  • my bad, just update the question – spStacker Aug 29 '16 at 14:58

You can hide a field using JSLink as below

(function () {
    var context = {};
    context.Templates = {};
    context.OnPostRender = hideFields;

function hideFields(ctx) { 
    var cell = $("div [name='Name']").closest('th'); 
    var cellIndex = cell[0].cellIndex + 1; 
    //$('td:nth-child(' + cellIndex + ')').hide(); 
    $('th:nth-child(' + cellIndex + ')').hide(); 
| improve this answer | |
  • i updated the question, can we make it so it hides only the title and not the content underneath – spStacker Aug 29 '16 at 14:58
  • Just remove or comment the line as in the updated answer – Amal Hashim Aug 29 '16 at 14:59
  • it works fine.., but then there is some additional space generated...please see my updates in question – spStacker Aug 29 '16 at 15:42
  • That happens when the th count doesn't match the td count of the body. Try $('th:nth-child(' + cellIndex + ') > *').hide(); – Mx. Aug 29 '16 at 16:07
  • @Mx. we are just hiding not removing.. won't the count stays the same? – Amal Hashim Aug 29 '16 at 16:09

Here is a CSR that doesn't require jQuery and has no spacing issues:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
  function init() {
       OnPostRender: function(ctx) {
         //document.querySelectorAll("[name=LinkFilenameNoMenu]")[0].parentNode.innerHTML = "<th>"
         //document.querySelectorAll("[name=LinkFilename]")[0].parentNode.innerHTML = "<th>"
         //document.querySelectorAll("[name=FileLeafRef]")[0].parentNode.innerHTML = "<th>"
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/hidenamecolumnheading.js"), init);

There are 3 OOTB columns called name (internal names: FileLeafRef, LinkFilenameNoMenu, LinkFilename), uncomment the one that you want to hide.

You might also want to change the URL in the RegisterModuleInit function.

| improve this answer | |
  • Hi Daniel thanks for the answer, we want the flexibility of having the code in JSLink, it seems like here the url to the .js file is in the code not outside – spStacker Aug 31 '16 at 15:27
  • 1
    The URL in the script is necessary if Minimal Download Strategy is activated on your site. Without that part or with a wrong URL the script wouldn't work correctly with MDS. – Daniel Stölzner Aug 31 '16 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.