It is causing dropdown to be hidden. This started for me after updating to latest datables. It was working previously.

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.

We have now migrated to using Bootstrap with the latest DataTables release. The issue has re-appeared & is very easy to reproduce on our system.
In the linked chat, he had mentioned the fix being in version 4.0.2, which I do not see.
(at the time of the fix, we just rolled with using the Nightly version -- but now, of course, would like to use the official released version)

We are seeing this issue on Firefox, Chrome, and Safari on a MAC.

Any thoughts?
Sincerely,
-- Lisa

Description of problem: Is there a way to exclude a column from being searchable? Is there a way to not show the footer?

function ShowListOfCriteriaAvaiableFields(oRetVal) {
var oTblList = $("#tblCustReportCriteriaAvailableFields")
var btnClassName = 'btn btn-sm gtd-header-button';

var dtData = oRetVal.lAvalableCriteriaFields;
oCustReportCriteriaAvailabelField =
    oTblList.DataTable({
        data: dtData,
        fixedHeader: true,
        rowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData != null && aData != "") {
                $('td', nRow).css({ 'background-color': "#e3f9e0" });
                $('td', nRow).eq(0).css({ 'background-color': "#27d7ea" });
            }
        },
        "aoColumns": [
            { "mData": "field_name", "sTitle": "Field Name", "sWidth": "30%" },
            //{ "mData": "group_name", "sTitle": "Group Name", "sWidth": "30%" },
            { "mData": "ui_control_type", "sTitle": "Control Type", "sWidth": "10%" },
            {
                "sWidth": "10%",
                "sTitle": "In Use",
                "mData": "in_criteria_list",
                "mRender": function (data, type, full) {
                    var htmlStr = "";
                    var inCriteriaList = full.in_criteria_list;
                    var btnType = 'pill';
                    var stateName = '';
                    var GTDSubmissionNo = '0';
                    var cbChecked = inCriteriaList ? " checked " : ""

                    var groupName = '';
                    var groupIndex = 0
                    htmlStr = htmlStr + '<input  type="checkbox" id="btnAdAvaiCriteria' + '_' + full.field_no + '" data-toggle="tooltip" data-placement="top" ' + cbChecked + '>'
                    return htmlStr;
                }
            },
            {
                "sWidth": "20%",
                "sTitle": "Add/Remove",
                "mData": "in_criteria_list",
                "mRender": function (data, type, full) {
                    var htmlStr = "";
                    var inCriteriaList = full.in_criteria_list;
                    var btnColor = inCriteriaList ? "warning" : "royal";
                    var btnText = inCriteriaList ? "Remove" : "Add"
                    var btnType = 'pill';
                    var popup = 'Click here to add this field to report criteria list';
                    var groupName = '';
                    var groupIndex = 0
                    //if (!inCriteriaList) {
                        htmlStr = htmlStr + '<a id="btnAdAvaiCriteria' + '_' + full.field_no + '" class="button button-tiny button-' + btnColor + ' button-' + btnType + ' button-raised" ' +
                            ' data-toggle="tooltip" data-placement="top"  title="' + popup + '" href="#" onclick=\"javascript:ShowCriteriaAvailabeFieldInfo(' + full + ')\">' + btnText + '</a>'

                    //}
                    return htmlStr;
                }
            }
        ],
        select: {
            style: 'single',
            selector: 'td:first-child'
        },
        "scrollY": "40vh",           
        "scrollCollapse": true,          
        "paging": true,
        "info": true,
        "ordering": true,
        "searching": true,
        "bDestroy": true,
        "lengthMenu": [[15, 20, 30, 40, 100, -1], [15, 20, 30, 40, 100, "All"]]
    });

//correct the datatable behavior when hovering
CorrectHoveringOnSelectedRow();
oCustReportCriteriaAvailabelField
    .on('select', function (e, dt, type, indexes) {
        oCustReportCriteriaAvailabelField[type](indexes).nodes().to$().addClass('custom-selected');
        if (type == 'row') {
            var oRowData = oCustReportCriteriaAvailabelField.rows(indexes).data().toArray();
            ShowCriteriaSetupDetail(oRowData)
        }
    })
    .on('deselect', function (e, dt, type, indexes) {
        var rowData = oCustReportCriteriaAvailabelField.rows(indexes).data().toArray();
    });

oCustReportCriteriaAvailabelField.columns.adjust().draw();

}

Description of problem:
If an initially enabled FixedHeader is disabled by calling fixedHeader.disable(), calling columns.adjust() after that seems to re-enable it. On the FixedHeader example page it can be seen that the initially enabled header is disabled if the "Disable FixedHeader" button is pressed, but is enabled again if you interact with the table or change the browser window size.

I wasn't able to enable an initially disabled FixedHeader with fixedHeader.enable() at all, so I'm not sure if this happens the other way around also, or if that is caused by the same issue.

RESPONSIVENESS

FixedHeader 3.2.1 or later is slower to react than 3.1.9, which is snappier. 3 comparative examples:

https://fplform.com/Fixed-Header-3pt1pt9.php
https://fplform.com/Fixed-Header-3pt2pt1.php
https://fplform.com/Fixed-Header-3pt2pt3.php

ROWS JUMP WHEN SELECTED

With FixedHeader 3.2.2 or later, with the Select plugin, my rows are jumping downwards significantly when selected or de-selected. With 3.2.1 or earlier, I only occasionally see a small jump upwards. 2 comparative examples:

https://fplform.com/SearchPanes-1pt4-FixedHeader-3pt2pt1.php
https://fplform.com/SearchPanes-2pt0pt1-FixedHeader-3pt2pt3.php

(Note that the searchPanes versions are different to illustrate a separate problem, but don't affect the FixedHeader issue.)

I have tried a few things without success. This code should convey what I'm trying to achieve.

$(document).ready(function() {
  var table = $('#example').DataTable( {
    paging: false,
    fixedHeader: {
      header: true,
      footer: function(){
        if(window.innerHeight > 800){
          return 'true';
        } else {
          return 'false';
        }
      }
    }
  } );
} );

Here's an example: http://live.datatables.net/foherewu/1/edit

I actually can't even work out how to dynamically change an option between true and false. I've tried 1 and 0. I've also tried setting window.innerHeight as a variable outside the function and passing it in.

I need to create complex header like this dynamically:

With the new version of fixed header I get issues with Chrome scrolling down on a page with multiple data tables. Some users can no longer scroll down because it has become really difficult to do this: Chrome starts "shaking" and you can't scroll using the mouse wheel. You have to force it by clicking on the scroll bar and pull that down. That occurs shortly before the fixed header of the table disappears and the next table below is being shown. There had been no issues with version 3.1.7.

This is from the console (yes, only a warning but it causes the issues when scrolling down):

Please also see this screenshot showing the upper table's fixed header shortly before it should disappear giving way for the following data table below. That is when the problem for the user occurs.

For the time being I have completely deactivated FixedHeader to avoid the issue. But I would like to turn it back on asap. Thanks for your help.

/*distable sorting icons in restock FBA table*/

#restockTable table.dataTable>thead .sorting::before,
#restockTable table.dataTable>thead .sorting_asc::before,
#restockTable table.dataTable>thead .sorting_desc::before,
#restockTable table.dataTable>thead .sorting_asc_disabled::before,
#restockTable table.dataTable>thead .sorting_desc_disabled::before {
    right: 0;
    content: "";
}

#restockTable table.dataTable>thead .sorting::after,
#restockTable table.dataTable>thead .sorting_asc::after,
#restockTable table.dataTable>thead .sorting_desc::after,
#restockTable table.dataTable>thead .sorting_asc_disabled::after,
#restockTable table.dataTable>thead .sorting_desc_disabled::after {
    right: 0;
    content: "";
}

#restockTable table.dataTable>thead>tr>th:not(.sorting_disabled),
#restockTable table.dataTable>thead>tr>td:not(.sorting_disabled) {
    padding-right: 4px;
    padding-left: 4px;
}

#restockTable table.dataTable>thead>tr>th,
#restockTable table.dataTable>thead>tr>td {
    padding-right: 4px;
    padding-left: 4px;
}

But when I use FIXED HEADER the styles are back
What are the correct styles for fixed header?
Kind regards
Jack

n/a (sorry quite tricky to create a simple test case from my use of framework code)

Debugger code (debug.datatables.net):

https://debug.datatables.net/upugok

Error messages shown:

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')
at FixedColumns._addStyles (jquery.dataTables.source.js:33:1)
at jquery.dataTables.source.js:33:1

Description of problem:

using DataTables-1.11.4 and FixedColumns-4.0.1 (with bootstrap3 integrations).

When I do a destroy on a datatable with FixedColumns configured on it, I am getting an error. This doesn't happen if I downgrade back to FixedColumns-3.2.2

When the table is first loaded, the FixedHeader
is a no show. When the windows is resized or clicked on one of the tables' header to sort then it appears.

I tried so far after table draw():
columns.adjust()
fixedheader.adjust()

My test case is here:
https://www.villas-mina.com/new2/index_test_datatables.html

I need the help from you!. I would like to recreate a table. After I have done this, the datatable dose not take up full width of the window (see picture).

I use fixedheader and fixedcolumns, and it is due to these settings. But it is strange because it works first time I load the table. Maybe I do not destroy the previous table correct?

This is how I destroy the old table:

if ($.fn.DataTable.isDataTable('#idTable')) {
$('#idTable').DataTable().destroy();
}
$('#idTable').empty();

I have created an example (http://live.datatables.net/zenogaze/1/edit)

1) Start the example. Maximize the window
2) Press table2
3) Minimize the table
4) => you got window scrollers and the extra space to the right of the datatable

What can I do to make this work? Destroy the table in another way?

Link to test case: http://live.datatables.net/wiqelema/5/edit
Description of problem:
When in small window/responsive mode and you can scrollX the table sideways - the fixed header is not moving/updating.

I have a similar situation where when I scroll sideways the fixed header will not move/update, but then if I scroll up/down it will fix the header in the position.

I have a rowspan=2 with multiple colspan columns.

Any idea on what to do to get it fixed ?

Thanks!

We are using SpringBoot Java application with DataTables and also ServerSide set to true. When tried to use the configuration option specified for the FixedHeader, it is completely ignored, no errors either. Any suggestions or any additional setup necessary to trigger the functionality?

Below is the JS code :

    $(document).ready(function() {
        App.init();
        Dashboard.init();

        var matchingRepositoriesTable = $('#matchingRepositories').DataTable({
            ajax: '/subjectrepository/select/datatables/',
            serverSide: true,
            processing: true,
            deferLoading: 0,
            fixedHeader: {
                header: true,
                footer: true
            },
            order: [ ['12','desc'],['13','desc'] ],
            drawCallback: function (data, type, full, meta) {
                $('[data-toggle="tooltip"]').tooltip({ 
                    placement: 'right',
                    title: 'heyo',
                    container: 'body',
                    html: true 
                });
            },
            columns: [
                {
                    data: 'createDate',
                    searchable:false,
                    sortable:false,
                    orderable:false,
                    width: '5%',

Instead of defining fixedHeader on the table itself, I use the following initialization:
new $.fn.dataTable.FixedHeader(table1, { header: true, alwayCloneTop: true });

The I track when the tab selection changes and based on which tab is selected, I do the enable/disable mechanism as seen in this code example I found elsewhere in the forum: https://jsfiddle.net/qamn26zp/14/

This example is basically what I am doing. My only issue is that the fixedHeader is set slightly left of the table. I thought using adjust() would resolve but it doesn't. I thought headerOffset would help, but it does something different than what I hoped for.

Anyway, let me know if this should be handled in css or if I am just missing a property, etc. Thanks in advance!

I have turned on fixedHeader and it works just fine as long as I don't have too many detailed/child rows are not showing. I have functionality to expand all detail/child rows via a button (expands for the current page) or header row (expands all rows).

At any rate, let's say I have (100) rows and I expand each rows detail/child row. The fixedHeader works initially but if I scroll down far enough, the header eventually scrolls out of sight. But again, if all detail/child rows are collapsed, it doesn't seem to affect the header row. I tested with a few hundred rows and it stayed in place.

Just wondering if I missed a setting or not. I reviewed the examples, but none of them involved detail/child rows so I'm guessing it is not fully designed to work with detail/child rows.

Fyi, "freakin awesome stuff you guys have created! I love datatables and the customers using my app seem to love it to!

var myTable = $("#example).DataTable({
"search": {
"caseInsensitive": true
},
data: dataSet,
dom: "<lBf<t>ip>",
initComplete: (settings, json) => {
}
}),
new $.fn.dataTable.FixedHeader(myTable)

What would be the issue to block the fixed header onload?

I have done an example there I have split the screen in two. On the left side I got some "settings" and on the right side I got an datatable. I configure the datatable with fixedheader. When I scroll in the datatable window I do not get the fixedheader however when I scroll in the setting window it apperas.I would like to have the "main" scroller to the left to be able to scroll when one of the select is at the bottom.

Are there away to bind the datatable to the right side of the window?

I have done an example to demostare my problem.
https://jsfiddle.net/un0bk61o/

//L

I need help from you! I need fixedheader, fixedcolumn and scrollx for my table. I have read that these does not work at the same time? However, I think they work good together apart from scrollX.

When I resize the window width (minimized), the table is not resize and the scollX is shown instead, but if I reload the page the table is resized and the scrollX is updated to correct value. I have tested to redraw the when I resized the window with no luck. Can I test something else?

I have done a jsfiddle that show the behaviour.
https://jsfiddle.net/fjr230np/

Cheers
Ludde

fixedHeader: {
    header: true,
    headerOffset: 55
}

CSS resource: https://cdn.datatables.net/v/bs5/dt-1.11.3/fh-3.2.0/datatables.min.css
JS resource: https://cdn.datatables.net/v/bs5/dt-1.11.3/fh-3.2.0/datatables.min.js

All that is required to restore the header offset is to change the FixedHeader JS include from version from 3.2.0 back to 3.1.9. The CSS can remain at 3.2.0.

To be clear, the fixed-header functionality IS working, it's simply ignoring my headerOffset value. Any suggestions?

This is the part where I am setting it:

$('#table2').DataTable( {
fixedColumns: {
leftColumns: 1
},
fixedHeader: true,

I've included all the libraries as well, but nothing is happening:

https://media.giphy.com/media/ooj008OoQxY4pJkN3z/giphy.gif

However, I believe that is no longer a limitation, per the release notes for FixedHeader 2.3.0.

Thank You

Link to test case: https://gist.github.com/stephenyeargin/b0a203f6598b958943b43e766b65908d

Curious if anyone has tackled this one before. I have a rather wide table with a lot of related columns. For usability, the columns are grouped under a heading. There is a request from the team to use FixedHeader, but it appears the calculated column widths get out of whack when the user scrolls. Doesn't happen if I remove the extra rowspan.

So far, my options appear to be:

• Don't use FixedHeader
• Manually specify the column widths (breaks responsive design a bit)
• Remove the rowspan headings entirely

Can anyone think of another approach?

Each datatable uses the Fixed Header plugin, which seems to create new parent containers for each initialisation (see screenshot below).

For the user, all headers (even for tables that no longer exist as PJAX clears the Datatables HTML on each "page load") will appear when the table is scrolled.

I've tried various combinations of using the fixedHeader.adjust() call to attempt to clear the phantom headers, (on initialisation for example), however it doesn't resolve the issue.

Unfortunately I'm not able to provide a test case at this time, however I thought it was worth a shot to ask anyway.

Appreciate any ideas.

I need some help from you.

I would like to have a table with fixed header. My html header will change height dependent on the window size. How can I make the headerOffset dynamic to follow the html header? Is it possible?

I have made an example that can be found here:
https://jsfiddle.net/xeavcts2/

Cheers Ludde