igGrid - excel style filtering and hiding extended

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/nw-products"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>
<div id="combo" style="margin-top:1rem;"></div>

JavaScript

$(function () {
						//variables
            let uniqueCategoriesSet = new Set();
            let uniqueCategories = [];

						//for each produc get the category
            northwindProducts.forEach(function (product) {
                uniqueCategoriesSet.add(product.CategoryName)
            });
            
            //add first item all
            uniqueCategories.push('All');

						//get only unique categories
            uniqueCategoriesSet.forEach(function (item) {
                uniqueCategories.push(item);
            });
            
						//define a custom editor provider that extends the EditorProviderCombo class
            $.ig.CustomComboEditorProvider = $.ig.CustomComboEditorProvider || $.ig.EditorProviderCombo.extend({
                setSize: function (width, height) {
                    this.editor.element.css({
                        width: width,
                        height: height
                    });
                },
                getValue: function () {
                		//it goes through the selected options and if there is an option all selected, all elements are selected 
                    for(let i = 0; i < this.editor.value().length; i++){
                    	if(this.editor.value()[i] === "All"){
                    		this.editor.selectAll();      
                    	}
                    }
                    return this.editor.value();
                },
                destroy: function () {
                    this.editor.element.remove();
                }
            });

						//creathe the grid
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: '100%',
                height: '500px',
                //creathe the columns
                columns: [
                	{ headerText: "Product Name", key: "ProductName", dataType: "string" },
                	{ headerText: "Units In Stock", key: "InStock", dataType: "number" },
                	{ headerText:...