How to add custom css in ng2-smart-table

Question

I am using angular 2 with ng2-smart-table.

Here is my code.

settings = {
    mode:"external",
    actions:{add:false,position:'right',custom: [{ name: 'View', title: `<i class="fa fa-eye" aria-hidden="true"></i>` }]},
    edit: {
      editButtonContent: '<i class="fa fa-pencil-square" aria-hidden="true"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent:'<i class="ion-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>',
      confirmDelete: true
    },
    columns: {
       Check:{
        title: "Check",
        type: 'html',
        },
        filter: false
       },
       orderby:{
        title: "Name",
        filter: true
       },
       purchased:{
        title: "Purchased",
        type: 'html',
        },
        filter: false
       },
       shipto:{
        title: "Ship To",
        filter: true
       },
       date:{
        title: "Date",
        filter: true
       },
       total:{
        title: "Total Amount",
        filter: true
       },
       status: {
        title: "Status",
        filter: true
      }
    }
  };

I added custom view icon in table. It works, but how to add custom css in ng2-smart-table?

I tried this

 ng2-smart-table thead > tr > th { background-color: blue; }

But it doesn't work.

Answer 1

Try this making using of host in order to style the components as view encapsulation is not set.

:host /deep/ ng2-smart-table thead > tr > th  { 
        background-color:blue;  
}

More info on host and hostcontext link

Answer 2

use below configuration in the setting object

attr: {
        class: 'table table-bordered'
      },

and

 :host /deep/ ng2-smart-table { 
    font-size: 16px; 
}

Example :

settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  },
attr: {
        class: 'table table-bordered'
      }
};