Ngx-datatable: Bootstrap theme is not working

[DaoFof]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x
  

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I tried to add the bootstrap them on a component but it's not working
As per the bootstrap component https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/bootstrap.component.ts :
My component :
@Component({ selector: 'basic-bootstrap-theme-demo', template:

class="bootstrap"
[rows]="rows"
[loadingIndicator]="loadingIndicator"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="40"
[footerHeight]="40"
[limit]="10"
[rowHeight]="'auto'"
[reorderable]="reorderable">

`
})
export class BootstrapThemeComponent {

rows = [];
loadingIndicator: boolean = true;
reorderable: boolean = true;

columns = [
{ prop: 'name' },
{ name: 'Gender' },
{ name: 'Company' }
];

constructor() {
this.fetch((data) => {
this.rows = data;
setTimeout(() => { this.loadingIndicator = false; }, 1500);
});
}

fetch(cb) {
const req = new XMLHttpRequest();
req.open('GET', https://raw.githubusercontent.com/swimlane/ngx-datatable/master/assets/data/company.json);

req.onload = () => {
  cb(JSON.parse(req.response));
};

req.send();

}

}`

My component css :

@import '~@swimlane/ngx-datatable/release/index.css'; @import '~@swimlane/ngx-datatable/release/themes/bootstrap.css'; @import '~@swimlane/ngx-datatable/release/assets/icons.css';

I includes bootstrap 3.3.7 link in the index.html page

Here is the result

It should look like :+1

Solution:

ADD themes in parent styles.css file but the folllowing problem occur ;

[ramzilla007]

I'm having the same issue with dark bottom panel when adding the css sheets to my component's .scss file! Any idea what's causing that?

[evansque]

same here

[kyle-cameron]

Have you tried adding it to styles in angular-cli.json ?

     "styles": [
        ...,
        "../node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css",
        ...

[ramzilla007]

@kcbroomall I did try adding it to the angular-cli.json but still getting the same dark bottom pagination panel.

[DaoFof]

try to remove the default css of datatable into the angular-cli.json styles

This should do the trick, css conflict, I think . It works with me

[timothyblue]

I'm having the same issue and the only way I get rid of it is to remove my actual boostrap.css which obviously I cannot do.

"bootstrap": "^3.3.7"
"@swimlane/ngx-datatable": "^13.1.0"

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
              "node_modules/@swimlane/ngx-datatable/release/index.css",
              "node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css",
              "node_modules/@swimlane/ngx-datatable/release/assets/icons.css",
              "src/styles.css"
            ],

If I remove node_modules/bootstrap/dist/css/bootstrap.min.css the issue goes away

[manztihagi]

@timothyblue ... but if you integrate with AdminLTE, your action will be destroying the AdminLTE themes.

I'm still not yet found the solution of this integration and why it could be happened

[sgriff96]

Adding this to the styles.css file worked for me
@import "../node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css"

[goldel777Verizon]

I have this same issue when I build Angular 6 with Production configuaration but is okay with dev. It looks due to the following. This works fine in Angular 5. Also, this may be similiar to CleanCss issue -
https://github.com/angular/angular-cli/issues/10186

 .ngx-datatable.bootstrap .datatable-footer {
background: #424242;
color: #ededed;
margin-top: -1px; }

This shows up in dev as:

.ngx-datatable.bootstrap .datatable-footer{
background:#fff;
color:#000;
margin-top:-1px}

[soportehrm]

I'm still having issues with it, my table looks all white.

This is my angular.json

Guys can you please also update the docs ?

[AcidAndroid]

Same here. Does anybody could resolve this??