sharepoint SharePoint 2013 Client Side Rendering Change column display name in list view using CSR

Example

There are cases when you need to change Display Name of column in a list view

e.g. Column Name showing in the view is "IsApprovalNeeded" and you want to appear as "Is Approval Needed?".

You can, of course change the display name of a column by changing the column title in list settings, but if you want to keep it as it is in the list settings and only modify it on the page preview then you can do it by using CSR(Client-Side-Rendering).

Here is the code...

(function () {    

    function preTaskFormRenderer(renderCtx) {
       modifyColumns(renderCtx);       
    }

    function modifyColumns(renderCtx)
    {
      var arrayLength= renderCtx.ListSchema.Field.length;
        for (var i=0; i < arrayLength;i++)
        {
           if(renderCtx.ListSchema.Field[i].DisplayName == 'IsApprovalNeeded')
             {
               var newTitle= "Is Approval Needed?";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
         }
    }
    
    function registerRenderer()
    {
      var ctxForm = {};
      ctxForm.Templates = {};
      ctxForm.OnPreRender = preTaskFormRenderer;
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }

    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();