I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance 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>REGISTRATION</th>
<th>STATUS</th>
<th>HIGH</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersArray" class="text-center">
<td>{{user.ID}}</td>
<td>{{user.NICKNAME}}</td>
<td>{{user.EMAIL}}</td>
<td>{{user.REGISTRATION | date: 'dd-MMMM-yyyy' | uppercase}}</td>
<td>
<span class="bg-success pd-y-3 pd-x-10 text-white tx-11 tx-roboto">
{{user.STATUS | toStatusReadable}}
</span>
</td>
<td>{{user.ACCESS_PROVIDER}}</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">Options</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> Edit data</a>
</nav>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
TS File code for the table:
export class AdministratorsComponent implements OnInit, OnDestroy {
dtOptions: any = {};
dtTrigger: Subject<any> = new Subject<any>();
usersArray: Array<Users> = [];
constructor(
private devInfo: DevelopmentService,
private dtService: DatatableService,
private administratorsService: AdministratorsService
) {
this.GetSmartliveUsers();
}
ngOnInit() {
document.getElementById('mainSystemPanel').removeAttribute('class');
document.getElementById('mainSystemPanel').className = 'br-mainpanel';
this.dtOptions = this.dtService.getDataTableConfig();
}
ngOnDestroy() {
this.dtTrigger.unsubscribe();
}
async GetSmartliveUsers() {
const users = <any []> await this.administratorsService.getSmartliveUsersList();
for ( let i = 0; i < users.length; i++) {
this.usersArray.push(JSON.parse(users[i]));
}
this.dtTrigger.next();
}
}
The service providing the table configuration:
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 have installed all necessary package files for the datatable, but I am struggling with achieving correct 100% width and the positioning of the pagination and search input over the table.