FixedHeader not working with Bootstrap

ErnestUser

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.

kthorngren

It doesn't look like you are using the proper JS and CSS Bootstrap integration files for the Datatables extensions. For example you should be using fixedHeader.bootstrap4.min.css for BS4 instead of fixedHeader.dataTables.min.css. Please see the Styling docs for more information. See this BS 4 FixedHeader example. Use the Download Builder to generate teh proper files for the styling framework you are using.

Kevin

ErnestUser

Hi kthorngren,

I figured out the problem. It's actually working however because we have top navigation that's using Bootstrap sticky-top the floating table headers are being covered. I think I'll just try to change the top position of the floating table header.

Thank you

allan

You can use fixedHeader.headerOffset to allow for a fixed positioned element at the top of the page. Or add the class fh-fixedHeader to the element to have it automatically accounted for. Example here.

Allan

edit I'm honestly not sure why this thread from two years ago was on my screen. Answered it before seeing the date - didn't mean to necro the thread! Oh well...