Why angular-datatable not fill col in bootstrap 4? - html

Question

I tried to set a responsive table with angular-datatables (for angular 7) and bootstrap 4 but this is the current aspect of the table:
Current HTML code:
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-bordered">
<thead class="thead-colored thead-primary">
<tr class="text-center">
<th>ID</th>
<th>NICKNAME</th>
<th>EMAIL</th>
<th>REGISTRO</th>
<th>ESTATUS</th>
<th>ALTA</th>
<th>ACCIONES</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usersArray" class="text-center">
<td>{{usuario.ID}}</td>
<td>{{usuario.NICKNAME}}</td>
<td>{{usuario.EMAIL}}</td>
<td>{{usuario.REGISTRO | date: 'dd-MMMM-yyyy' | uppercase}}</td>
<td>
<span class="bg-success pd-y-3 pd-x-10 text-white tx-11 tx-roboto">
{{usuario.ESTATUS | toStatusReadable}}
</span>
</td>
<td>{{usuario.PROVEEDORACCESO}}</td>
<td>
<div type="button" class="dropdown">
<a [routerLink]="" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
<div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
<span class="mg-r-10 tx-13 tx-medium">Opciones</span>
<img src="https://via.placeholder.com/500" class="wd-25 rounded-circle" alt="">
<i class="fas fa-angle-down"></i>
</div>
</a>
<div class="dropdown-menu pd-10 wd-200">
<nav class="nav nav-style-2 flex-column">
<a [routerLink]="" class="nav-link"><i class="icon fas fa-edit"></i> Editar datos</a>
</nav>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
TS File code for the table:
export class AdministradoresComponent implements OnInit, OnDestroy {
/* dtOptions: DataTables.Settings = {}; */
dtOptions: any = {};
dtTrigger: Subject<any> = new Subject<any>();
usersArray: Array<Users> = [];
constructor(
private devInfo: DevelopmentService,
private dtService: DatatableService,
private administradoresService: AdministradoresService
) {
this.ObtenerUsuariosSmartlive();
}
ngOnInit() {
document.getElementById('mainSystemPanel').removeAttribute('class');
document.getElementById('mainSystemPanel').className = 'br-mainpanel';
this.dtOptions = this.dtService.getDataTableConfig();
}
ngOnDestroy() {
this.dtTrigger.unsubscribe();
}
async ObtenerUsuariosSmartlive() {
const usuarios = <any []> await this.administradoresService.getSmartliveUsersList();
for ( let i = 0; i < usuarios.length; i++) {
this.usersArray.push(JSON.parse(usuarios[i]));
}
this.dtTrigger.next();
}
}
The service to provide config of the table:
export class DatatableService {
constructor() {
}
getDataTableConfig() {
return {
language: {
url: 'assets/content/smartlive/spanish.json'
},
responsive: true
};
}
}
angular.json snippet:
"styles": [
"node_modules/#fortawesome/fontawesome-free/css/all.min.css",
"node_modules/animate.css/animate.min.css",
"src/assets/content/template/lib/ionicons/css/ionicons.min.css",
"src/assets/content/template/lib/rickshaw/rickshaw.min.css",
"src/assets/content/template/lib/select2/css/select2.min.css",
"src/assets/content/template/css/bracket.css",
"src/assets/content/template/css/bracket.oreo.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
"node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css",
"node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js",
"node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"
]
I already installed all the packages files for the datatable but i can't set a correct 100% of width and always the pagination and search input have a bad location over the table.

Answer 1

A bit late but it might help someone else ;-)
Try:
npm install datatables.net-bs4
Then call:
"styles": [
...
"./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
...
],
"scripts": [
...
"./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
...
],