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="productsGrid"></table>

JavaScript

$(function () {
            let uniqueCategoriesSet = new Set();
            let uniqueCategories = [];
            
            let uniqueInStockSet = new Set();
            let uniqueStocks = [];

            northwindProducts.forEach(function (product) {
                uniqueCategoriesSet.add(product.CategoryName)
                uniqueInStockSet.add(product.InStock)
            });

            uniqueCategoriesSet.forEach(function (item) {
                uniqueCategories.push(item);
            });
            
            uniqueInStockSet.forEach(function (item) {
                uniqueStocks.push(item);
            });

            $.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();
                }
            });

            $("#productsGrid").igGrid({
                autoGenerateColumns: false,
                width: '100%',
                columns: [
                { headerText: "Product Name", key: "ProductName", dataType: "string" },
                { headerText: "Units In Stock", key: "InStock", dataType: "number" },
                { headerText: "Category", key: "CategoryName", dataType: "string" }
                ],
                dataSource: northwindProducts,
                responseDataKey: "results",
                autoCommit: true,
                features: [
                {
                    name: "Sorting",
                    sortingDialogContainment: "window"
                },
                {
                    name: "Filtering",
                    type: "local",
      ...