igGrid - excel style filtering

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>

JavaScript

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

						//for each produc get the category
            northwindProducts.forEach(function (product) {
                uniqueCategoriesSet.add(product.CategoryName)
            });

						//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 () {
                    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: "Category", key: "CategoryName", dataType: "string" }
                ],
                //set the data source
                dataSource: northwindProducts,
                autoCommit: true,
                //add features
                features: [
                {
                		//add filtering
                    name: "Filtering",
                    type: "local",
                    //handle columnSettings
                    columnSettings:...