I'm using the JSLink feature to put some buttons at the top of a list view. A screenshot of the relevant code is posted below. It's working, but a few users have noted that the column names row disappeared. They should be right below the buttons (second screenshot), but don't appear at all. I used the F12 developer tools to inspect elements on the page, but couldn't find that row. I think it's because the JSLink script is overriding the header, and that row is part of the original header.

Is it possible to have a custom header AND the original column names on a list view?

Fig. 1 - the custom header code: enter image description here

Fig. 2 - the custom header seen on page: enter image description here

1 Answer 1


Can you change your logic as below

(function () {    
    var requestCtx = {};
    requestCtx.Templates = {};
    requestCtx.Templates.Header = overrideHeader;



function overrideHeader(ctx) {
    var htmlTmp = RenderHeaderTemplate(ctx);        
    htmlTmp += "<a href='#'>Refresh</a>";

    return htmlTmp;     

I am using RenderHeaderTemplate to get the existing header template.

  • Thank you! I replaced 'RenderTableHeader' with 'RenderHeaderTemplate' and my column names are back where they should be.
    – Omegacron
    Commented Jul 13, 2017 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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