Hi!,

I want to use FixedHeader but it doesn't seem to work. My datatable is inside a Bootstrap Card and I'm using KnockoutJS.

Here is my initialization:

   let columns=[{data:"order",title:"",render:function(data,type,row){return data},width:"25px"},{data:null,title:"",render:function(data,type,row){return'<div class="border rounded expand-collapse"><i class="fas"></i></div>'},width:"25px"},{data:"coverage_description()",title:"Coverage",render:function(data,type,row){if(type=="filter"){return data}
return'<div class="input-group ko-element">'+'<input class="form-control" type="text" data-bind="value: coverage_description, enable: false" />'+'</div>'},orderDataType:"dom-text",type:"string",searchable:!0,width:"auto",},{data:"coverage_group_name()",title:"Coverage Group",render:function(data,type,row){if(type=="filter"){return data}
return'<div class="input-group ko-element">'+'<input class="form-control" type="text" value="'+row.coverage_group_name()+'" disabled />'+'</div>'},type:"string",searchable:!0,visible:!0,width:"160px",},{data:"risk_ref_name()",title:"Risk",render:function(data,type,row){if(type=="filter"){return data}
return'<div class="input-group ko-element">'+'<input class="form-control" type="text" value="'+row.risk_ref_name()+'" disabled />'+'</div>'},type:"string",searchable:!0,visible:!0,width:"170px",},{data:"amount_insurance()",title:"Amount ($)",render:function(data,type,row){if(type=="filter"){return(!data)?0:data}
return'<input type="text" class="form-control input-text-right ko-element editable" data-bind="formatAsCurrency: amount_insurance, enable: !isReadOnly" />'},orderDataType:"dom-text-numeric",type:"currency",width:"120px",searchable:!1},{data:"rate()",title:"Rate (%)",render:function(data,type,row){if(type=="filter"){return(!data)?0:data}
return'<input type="text" class="form-control input-text-right ko-element editable" data-bind="value: rate, enable: !isReadOnly"/>'},orderDataType:"dom-text-numeric",type:"currency",width:"70px",searchable:!1},{data:"net_premium()",title:"Premium ($)",render:function(data,type,row){if(type=="filter"){return(!data)?0:data}
return'<input type="text" class="form-control input-text-right ko-element editable" data-bind="formatAsCurrency: net_premium, enable: !isReadOnly "/>'},orderDataType:"dom-text-numeric",type:"currency",width:"120px",searchable:!1},{data:"included()",title:"Included",render:function(data,type,row){if(type=="filter"){return(!data)?!1:data}
return'<select class="form-control ddl-included ko-element-select" data-bind="options: CoverageStatusList, value: status_option_ref_id, optionsText: \'Text\', optionsValue: \'Value\', optionsCaption: \'\', enable: !isReadOnly"></select>'},orderable:!1,searchable:!1,width:"150px",},{data:null,title:"",render:function(data,type,row){return'<input type="checkbox" class="checkbox-for-delete" data-bind="checked: isChecked" />'},width:"25px",orderable:!0,className:"text-center",visible:(viewModel.Policy().is_template()||bindingContext.$root.Policy().transaction_type_ref_id()=='z:NB'||bindingContext.$root.Policy().transaction_type_ref_id()=='z:RWL')}]

let dt = $(element).DataTable({
            //dom: '<"toolbar sticky sticky-top">frtip', // This is for the tools.
            dom: '<"toolbar">frtip', // This is for the tools.
            processing: true,
            deferRender: true,
            rowId: "array_id",
            info: false,
            paging: false,
            rowReorder: {
                enable: false,
                dataSrc: "order",
                update: true,
                snapX: 10,
                selector: "tr"
            },
            order: [[0, "asc"]],
            columnDefs: [
                { targets: 0, visible: false }
            ],
            autoWidth: false,
            columns: columns, // <-- Separate variable with all columns
            createdRow: function (row, data, dataIndex) {
                
                // Knockout binding to the row.
                ko.applyBindings(data, row);
            },
            select: {
                style: "single",
                className: "row-selected"
            },
            rowGroup: {
                enable: !isNullOrEmpty(localStorage.getItem(localStorageGroupByKey)),
                dataSrc: [],
                startRender: function (rows, group) {

                    // This is a custom grouping.
                    let template = $('<tr/>')
                        .append('<td colspan="8"><span class="group-name">' + group + ' <b>(' + rows.nodes().length + ')</b></span></td>');
                    
                    if (bindingContext.$root.Policy().is_template() ||
                        bindingContext.$root.Policy().transaction_type_ref_id() == 'z:NB' ||
                        bindingContext.$root.Policy().transaction_type_ref_id() == 'z:RWL') {

                        let groupModel = {
                            isChecked: ko.observable(false)
                        }
                        groupModel.isChecked.subscribe(function (val) {
                            checkedByGroup(val, rows);
                        });

                        let checkbox = (!bindingContext.$root.Policy().is_bound()) ? '<input type="checkbox" class="checkbox-for-delete float-right mr-1 " data-bind="checked: isChecked" />' : '';

                        template = $('<tr/>')
                            .append('<td colspan="8"><span class="group-name">' + (!isNullOrEmpty(group) ? group : "No Group") + ' <b>(' + rows.nodes().length + ')</b></span>' + checkbox + '</td>');

                        if (!bindingContext.$root.Policy().is_bound()) {
                            ko.applyBindings(groupModel, template.find(".checkbox-for-delete")[0]);
                        }
                        
                    }

                    return template;

                }
            },
            language: {
                emptyTable: "No Coverages",
                zeroRecords: "No matching coverage found"
            },
            fixedHeader: true
        });

**I'm also using other extensions. See below all the references: **

    <link rel="stylesheet" href="https://nightly.datatables.net/css/dataTables.bootstrap4.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css" />

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/custom-data-source/dom-text.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/custom-data-source/dom-text-numeric.js"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/date-dd-MMM-yyyy.js"></script>
    <script src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/currency.js"></script>

Thank you!

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.