Issue removing a row with fixed header + fixed columns + scroll x/y

kloh

Hello!

After several hours trying to find a way out, I give up and come here to see if someone has an idea about my problem.

I have a pretty complex dataTable with fixed header, fixed columns (first and second, but also the last one) and both scroll directions (X/Y).
To better understand I've attached an anonymized screen: fixed header in yellow; fixed columns in pink.
And here is the code used to achieve this:

$('#myTable').DataTable({
    "paging": false,
    "ordering": false,
    "info": false,
    "searching": false,
    "scrollY": "48vh",
    "scrollCollapse": true,
    "scrollX": true,
    "fixedHeader": true,
    "fixedColumns": {
        "leftColumns": 2,
        "rightColumns": 1
    },
    "columnDefs": [
        {
            "width": 180,
            "targets": 0
        },
        {
            "width": 130,
            "targets": 1
        }
    ],
});

But as it wasn't complicated enough, user can remove a line, thanks to cross icons on the screen. I achieve this with following code:

$(".close-icon").click(function () {
    $('#myTable').DataTable()
        .row($(this).parents('tr'))
        .remove()
        .draw(false);
});

Now, let me describe the issue I'm facing.
When I remove a row, a duplicated version of the fixed header appears at the top of the page (in green in the screen attached).

This occurs only at some point after having scrolled in the dataTable (it seems being about twice the height of the dataTable). Meaning if I remove one of the first rows, the issue doesn't happen.
Moreover, in the DOM, this duplicated header is appended just before the body closing tag (it's the reason why it is positionned at the top of the page).

In the same time, fixed header still seems to work in the dataTable.

I've tried several things but nothing works.
For instance, I've tried to hide the duplicated header in CSS (display none), but doing this the horizontal scroll stops working in dataTable.
I've also tried using fixedHeader.adjust() after removing the row.

I'm pretty stuck right now.

Does anyone would have an idea about this?

Thanks in advance!

kthorngren

There is a documented compatibility issue with FixedHeader and the scroll(X/Y) options:
https://datatables.net/extensions/fixedheader/

Maybe the behavior you are experiencing is due to the incompatibility. Does removing a row work properly if you remove the scroll(X/Y) options?

Kevin

kloh

Thank you!

I didn't remove scroll options but you put me on the way: I solved it removing fixedHeader option.
In fact I didn't need it as scrollCollapse makes the job too.

So much time to find a so much easy solution.

Anyway, thank you again for your help.