CODEWITHSUNDEEP
twitter-bootstrapangulardatatables
Cosma Iaffaldano
Cosma Iaffaldano

Reputation: 221

Bootstrap 4 Datatablejs in Angular4 CLI project

I just created a web app in Angular 4 with the Angular CLI utility.

I want to display in one page of my web app one table with DatatableJs. I got it, but the style is horrible.

This my result

I think it's due to a dependency installation problem. I installed Bootstrap 4 and DataTables core via npm.

This my configuration in .angular-cli.json file:

enter image description here

Thanks.

Upvotes: 2

Views: 3425

Answers (2)

Ravindra Vairagi
Ravindra Vairagi

Reputation: 1083

To use Bootstrap 4 with DataTablejs use npm to install Bootstrap 4 package.

npm install --save datatables.net-bs4

Then, Update ".angular-cli.json" files Styles and scripts properties as below.

{
 ........
  "apps": [
    { 
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
      ]
      ...
    }
  ],
 .....
}

after above changes, we can use bootstrap4 classes to shows table like a bootstrap4 table for example

<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
      </table>

Upvotes: 5

user320487
user320487

Reputation:

You need the datatables bootstrap4 css.

https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css

Upvotes: 1

Related Questions