datatable not load properly on page load

ranu70

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
In my project datatable is not loading properly on first time but it load properly after refreshing the page
1st time: on page load

after refreshing the page

please help me
my index.html file is
below are my css files in head tag
<link rel="stylesheet" href="assets/css/app.min.css">
<link rel="stylesheet" href="assets/bundles/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="assets/bundles/material-icons/material-icons.css">

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/components.css">
<link rel="stylesheet" href="assets/bundles/prism/prism.css">

<link rel="stylesheet" href="assets/bundles/datatables/datatables.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">

<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="assets/bundles/pretty-checkbox/pretty-checkbox.min.css">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">

and below are the js files in body tab bottom

ranu70

JS file not included in post
below are these

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