HTML table with fixed header and fixed leading col

I have a HTML table which can be customized by the user:

Every row has a checkbox (knockout bound, the user can override if the row is "included" or not).
The header columns have also checkboxes (knockout bound), which tell if the particular row affects the inclusion calculation.
Some columns even have knockout bound popup control, these even more customized filtering.
The number of columns can be configured by the user, so there can be so many that they don't fit the screen => horizontal scroll bar.
There can be so many rows that vertical scrollbar is needed.

Because of 5 we need fixed headers. Because of 4 we'd need fixed leading columns (first 3 in my case).

So far I tried various jQuery plugins for fixed header, but ko bindings doesn't seem to work. These plugins make a copy of the header, and float that div anchoring it over the header area when the user scrolls.

I ended up splitting the header and the body into two separate tables.

I could do that because we ended up setting the width pixels anyway, so the columns align with each other on the header and the body table.

That solved the fixed header problem, but it makes the fixed column problem even more infeasible: now that the header section is detached if there was a horizontal scrollbar, I'd have to synchronize any scroll bar move of the body table towards the header table.

Right now I restructured the content in the header cells to make it more compact and decrease the chance to have a horizontal scrollbar.

I wonder if there's any knockout compatible solution out there?

One big warning for anyone who is going down this road (having data bound controls in fixed columns or fixed headers). All fixed column or fixed header solutions (even not DataTables one) are cloning an exact copy of the fixed column or fixed header area. As soon as you start to scroll, that copy is fixed to that position and doesn't scroll away basically, that's how the effect is achieved. If you have some input elements with unique HTML ids in these fixed areas, the HTML code will become actually invalid when these inputs are replicated: the HTML ids won't be unique any more, there will be a clone of each element. You can go ahead and fix this situation by DOM manipulation, being very careful which element you treat and when does your data binding (Knockout, Angular, etc) exactly happen.

As I understand your real problem is with having a table with fixed columns bound to knockout.

You can use the DataTables plugin with the FixedColumns plugin.

I did a little example for you:

ko.bindingHandlers.dataTable = {
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        $(el).DataTable(ko.toJS(valueAccessor()));
    }
}

ko.bindingHandlers.fixedColumns = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        if ($.fn.dataTable.fnIsDataTable($(el))) {
           $(el).data("fixedColumns", 
                      new $.fn.dataTable.FixedColumns($(el).dataTable(), 
                                                      ko.toJS(valueAccessor())));
        }
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var fc = $(el).data("fixedColumns");
        if (fc) {
            $.extend(fc.s, ko.toJS(valueAccessor()));
            fc.fnRedrawLayout();
        }
    }
}