Hello Justin,

Thank you for posting into our community!

I have been looking into your question and an approach I could suggest is hiding the span element that contains the number of hidden columns via css, e.g.

button[name="btnColumnHiding"] span:first-of-type {
    display: none;
}

and using the buttonText property to add a custom text inside the button. Additionally, this should be done inside the handler for the columnVisibilityChanged event of the IgxGrid component in order to change the number of hidden columns when hiding/showing columns.

Here could be found a small sample demonstrating my suggestion.

Additionally, regarding defining a custom button that toggles these functionalities, I believe that you will find our Column Hiding UI section here quite helpful on this matter as it demonstrates how the column hiding UI could be put anywhere on the page. Also, our Toolbar Custom Content section here demonstrates how a custom button could be included and in order to achieve your requirement, you should handle the click event of that button and use the IgxToggle and IgxOverlay directives to display the content in the proper position. More information could be found in our Toggle Directive topic here.

Please test these approaches on your side and let me know if you need any further assistance regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer