HTML Table With Fixed Header And Fixed Leading Columns With Knockout Controls In The Header And First Column

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

Solution 1:

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

Demo