Hello John

Thank you for your purchase.

I'm sorry to disappoint you, but unfortunately filters can only be assigned to a single column, so you wouldn't be able to include a filter that would pull data from two columns.

Freezing the first column and/or row is not possible with plugin's built-in features, but one of our customers made this possible. We did not get to test it, so you can try if is working for you.

He actually created a fixed header and column using translation of x and y (no absolute or fixed position used), and here's one solution, take a look:

First of all, you gotta set the z-index for each component below:

jQuery("#table td").css({"z-index": "-1", "position": "relative"});  
jQuery("table tr td:first-child").css({'z-index': '1', 'position': 'relative'});
jQuery("table th:first-child").css({ 'z-index':'2','position':'relative'});

Then you gotta add listener on scroll like this:

jQuery('document').scroll(function () {   scrollBlock();
});

If your table is set to be scrollable, then you might want to add this in as well:

jQuery('.wdtscroll').scroll(function () { scrollBlock();
});

And here's the scrollBlock() part, it is ugly though, but it works for me though. (noted: the numbers work for my theme, if it is not working correctly on yours, then try to adjust the number until it fits.)

function scrollBlock(){
                        var table = document.querySelector('table');
            var top = table.getBoundingClientRect().top;
            top = document.body.className.search('admin') > 0 ? top - 32 : top + 3; // this value can change
            var left = table.getBoundingClientRect().left;
            if(left >= 20){ // before scrolling left (before transforming)
                                if(top >= 0){ // before reaching header bar
                    jQuery("#table_1 thead th").css("transform", "translateY(0px)");
                     translate(jQuery("table th:nth-child(1)"), 0, 0);
                     translate(jQuery("table td:nth-child(1)"), 0, 0);
                                    } else{ // after reaching header bar
                     jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");
                     translate(jQuery("table th:nth-child(1)"), 0, -top);
                     translate(jQuery("table td:nth-child(1)"), 0, 0);
                 }
            } else{ // after scrolling left
                                if(top >= 0){
                    jQuery("#table_1 thead th").css("transform", "translateY(0px)");
                    translate(jQuery("table th:nth-child(1)"), -left + 46, 0);
                    translate(jQuery("table td:nth-child(1)"), -left + 46, 0);
                                    } else{
                     jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");
                     translate(jQuery("table th:nth-child(1)"), -left + 46, -top);
                     translate(jQuery("table td:nth-child(1)"), -left + 46, 0);
                     }
                }
            }
function translate(element, x, y) {
               var translation = "translate(" + x + "px," + y + "px)"
                element.css({
                        "transform": translation,
                                "-ms-transform": translation,
                                "-webkit-transform": translation,
                                "-o-transform": translation,
                                "-moz-transform": translation,
                });
}

It is kind of messy, you definitely can't copy and paste and expect it to work for you. You need to spend some time to figure it out.