Remove filter control in column using Client-Side-Rendering

Question

Background:

I have a listview ¹ and I'm using CSR for set specific rows with Hyperlinks and hide only a column (called Id with InternalName Id0) in the OnPreRender > Templates. Here is the code that I have so far:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    OnPreRender: function(ctx) {
        var arrayLength = ctx.ListSchema.Field.length;
        for (var i=0; i < arrayLength;i++) {                
            switch (ctx.ListSchema.Field[i].DisplayName) {
            /* This is the column that I'm trying to remove the filtering control. */
                    case 'Id':
                         ctx.ListSchema.Field[i].DisplayName = '';
                         ctx.ListSchema.Field[i].AllowGridEditing = 'FALSE';
                         ctx.ListSchema.Field[i].AutoHyperLink = 'FALSE';
                        break;
                    default:
                        break;
            }
        }           
      },Templates: {
            Fields: {
                    'Name': {
                            'View': function(ctx) {
                                    var url = String.format('URL_SAMPLE.aspx?DetailsId={0}&', ctx.CurrentItem.Id0);
                                    url = url + "IsDlg=1";          
                                    return String.format('<span class=\'cssCSRLinkStyle\' onclick="{0}">{1}</span>', url, ctx.CurrentItem.Id0);
                                }
                            },
               /* Here, I just removed the value before rendering. */
                    'Id0': {
                            'View': function(ctx) {
                                    return '<span></span>';
                                }
                            },
        }
    },
});

Problem:

The value of the cells (from the hidden column Id) now are hidden and the displayname of the header column too, but after tried with no success, the header column stills having the filter column.

how can be disabled/removed filter control in column using CSR?

---

¹ I created a view for use only a few columns.

Answer 1

The cell is not hidden, you have emptied the contents.

You have to hide that whole column by hiding every individual cell .. including the TH header row where the label resides.

The DOM is not there yet in your OnPreRender so you have to do another loop over those Fields in the OnPostRender
With either new CSS nth-child(i) you add to the page, or JavaScript to set the style.

Search for 'Javascript hide table column'

And you do not need jQuery for this.. search for document.querySelector solutions

Update #1

Here is generic code,

function tableActions(table, rowaction, cellaction) {
    //convert HTML node object of elements to an array
    Array.prototype.slice.call(table.rows).forEach(function (row, rownr) {
        rowaction && rowaction(row);
        Array.prototype.slice.call(row.cells).forEach(function (cell, colnr) {
            cellaction && cellaction(cell, rownr, colnr);
        });
    });
}

Example Usage:

var table = document.getElementById(ctx.clvp.tab.id);
tableActions(table, false ,
    function (cell, rownr, colnr) {
        if (colnr === 3) cell.style.display = 'none';
    });

You have to match that colnr with i from the loop like in your OnPreRender

If you have more complex CSS layout going on, note that (for performance reasons) the Table width is not recalculated when you hide table elements... you know... DOM Repaints.. reflows..etc. etc.