Cannot get FixedHeader work with Angular 6 + Bootstrap

RashmiDey

I am trying to use datatables.net-fixedheader-bs4 with Angular 6. Here is my code :

var dataTable = $('inbox-table').DataTable({
bAutoWidth: true
});
new $.fn.dataTable.FixedHeader( dataTable );

I am getting the error:
core.js:1673 ERROR TypeError: Cannot read property 'oFeatures' of undefined
at new FixedHeader (dataTables.fixedHeader.js:88)

Not sure what I am missing. I just want to use the Fixed header feature.

kthorngren

It seems like your dataTable variable does not contain the Datatable API. Based on your code snippet it looks like it should. You could try using the config option instead of the new constructor, like this:

var dataTable = $('inbox-table').DataTable({
bAutoWidth: true,
fixedHeader: true
});

If that doesn't work then a link to your page or a test case replicating the issue would be needed.

Kevin

RashmiDey

Thanks for the quick reply. I now am able to see the Fixed header implemented. But the behavior is strange. When I am scrolling and the header goes above the page, I see a new header at the bottom of the page and not at the top. What am I missing?

Just for information. I have a navbar and a button above the table.

kthorngren

Sounds like a CSS issue. Are you using a framework like Bootstrap and loading the Datatables integration files for that framework? If so make sure you are also loading the FixedHeader integration files. That usually fixes strange behavior. If not then a link to your page or a test is is definitely needed to help find the issue.

Kevin

kthorngren

Just noticed you mentioned BS4. Make sure you are loading the proper Datatables base and BS4 integration files. This example will show the files you should be loading. Make sure to look at the CSS tab.
https://datatables.net/extensions/fixedheader/examples/styling/bootstrap4.html

Kevin

RashmiDey

I am using bootstrap4 and angular 6.
Here is how I am including the datatable files:

"styles": [
"src/styles.css",
"node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css",
"node_modules/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
"node_modules/datatables.net-fixedheader-bs4/js/fixedHeader.bootstrap4.js"
]

Am I missing any file?

I cannot provide link to my page as it cannot be accessed.

kthorngren

I'm not familiar with how to use Angular but are you loading "node_modules/datatables.net/js/jquery.dataTables.min.js", ?

I presume you are loading Bootstrap:
"node_modules/bootstrap/dist/css/bootstrap.min.css" and "node_modules/bootstrap/dist/js/bootstrap.min.js"

Kevin