Answers

• kthorngren Posts: 20,346Questions: 26Answers: 4,776

  November 2018

  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 Posts: 3Questions: 1Answers: 0

  November 2018 edited November 2018

  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 Posts: 20,346Questions: 26Answers: 4,776

  November 2018

  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 Posts: 20,346Questions: 26Answers: 4,776

  November 2018

  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 Posts: 3Questions: 1Answers: 0

  November 2018

  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 Posts: 20,346Questions: 26Answers: 4,776

  November 2018

  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