Header row not scrolling?

HomerJaySimpson

I'm having some basic difficulties (using current version) (and I am using this for the first time, so I'm sure I'm doing something unintentionally wrong).

So, I started by building the buddle of features I wanted. I wanted to be able to freeze the header and the first two columns, so I included those and a few other features I thought would be useful once I got going.

Anyway, when I got my first example up and running, I noticed that the header looked good, but all the rows scrolled horizontally under it (which seemed totally wrong; at least NOT what I was expecting with lockedColumns! ;-) )

Anyway, is this a known thing? I wasn't able to get locked or rows or columns to work for me at all...

kthorngren

I wanted to be able to freeze the header and the first two columns, so I included those and a few other features I thought would be useful once I got going.

The FixedHeader docs state that it is not compatible with the Datatables scrolling features like scrollX which is used with FixedColumns. The Compatibility Matrix shows this too.

Essentially you can use one or the other but not both.

Kevin

tangerine

Presumably you have this:

fixedColumns: true

but are you also referencing the necessary extension's js file?
https://datatables.net/extensions/fixedcolumns/

The same scenario will apply to fixed Headers.

HomerJaySimpson

So my includes look like (using PUG):

link(rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css")
   link(rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css")
   link(rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.dataTables.min.css")
   link(rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css")
 
   script(type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js")
   script(type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js")
   script(type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js")
   script(type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js")
   script(type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js")
   script(type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js")
   script(type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js")

And my init looks like:

$(document).ready(function() {
        $('#example').DataTable( {
            data: report.rows,
            columns: report.columns,
            deferRender:    true,
            fixedHeader:    true,
            buttons: [
              'excelHtml5'
            ],
            fixedColumns: {
              leftColumns: 2
            }
        } );
    } );

What am I doing wrong? (again, thanks in advance!)

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

            fixedHeader:    true,
            buttons: [
              'excelHtml5'
            ],
            fixedColumns: {
              leftColumns: 2
            }

Did you read my above comments? It is documented that FixedHeader and FixeColumns are not compatible. This is why you are having that problem.

Kevin