Table works, but without style

[zezke]

I am quite a rookie with Angular. I was under the impression that using ng2-smart-table would automatically apply the included CSS style. However it does not, the page is rather dull without any table borders. I am missing something? Should I include some version of Twitter Bootstrap?

[piotrgolawski]

Same here, tired.

[AkhilNaidu09]

Even i faced same issue. But I have added external css using (/deep/).

[mfsi-surajs]

Did you find any solution ?

[Xstoudi]

Up!

[zezke]

@mfsi-surajs I did not, just using it "as is" for the time being.

[mfsi-surajs]

@zezke Got a temporary workaround, paste below style in your css or scss file

$table-font-color: #606c71;
$table-border-color: #e9ebec;

:host{
  /deep/ {

    table{
      color: $table-font-color;
      tr {
        td,th{
          border: 1px solid $table-border-color;
        }
      }
    }
  }
}  

[SajithSUA]

please give right ansers

[ankypant]

use below configuration in the settings 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'
      }
};

[ovidiubarbu]

I struggled a bit with this too. I was getting no grid and was quite annoying. Here what worked for me. I have added this into the css file for my component. I hope this helps:

:host /deep/ ng2-smart-table table{
    border-style: inset;
    border-color: initial;
    border-image: initial;
    border-width: 2px;
    
    display: table;
    border-spacing: 2px;
    border-color: grey; /* border of the big table*/

/* grid lines */
:host /deep/ ng2-smart-table table > tbody > tr > td {
    box-sizing: border-box;
    border: 1px solid grey;
}

/* headers grid color*/
:host /deep/ ng2-smart-table thead > tr > th  { 
    border: 1px solid grey;
    background-color:#673ab7;
}  
/*font size*/
:host /deep/ ng2-smart-table {
    font-size:16px;
}

[alejandrotamayo]

use below configuration in the settings 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'
      }
};

It worked for me. Thanks!!!

[lorranpalmeira]

I need to change color of table-bordered, i tried border-color ... doesn´t work.
Any Ideia?

[ajlg-vzla]

What if i wanted the default style? i mean, the one showing when you install a full ngx-admin? thank you!

[nvmnghia]

What if i wanted the default style? i mean, the one showing when you install a full ngx-admin? thank you!

Did you find a way to use it with ngx-admin? I did install ngx-admin, then I somehow have to install ng2-smart-table separately, and now it is ugly as hell, not the gorgeous, corner-rounded one shown in the demo.

[SashaSkywalker]

Hi @nvmnghia
ngx-admin uses @nebular/theme package, if you install that package and follow installation instruction (https://akveo.github.io/nebular/docs/guides/install-nebular#manually) then smart table will look like in ngx-admin.

[nvmnghia]

Hi @nvmnghia
ngx-admin uses @nebular/theme package, if you install that package and follow installation instruction (https://akveo.github.io/nebular/docs/guides/install-nebular#manually) then smart table will look like in ngx-admin.

Hi,
Thanks for the quick support. I did install Nebular manually like by following that guide, and the problem is still there. Can you help me fix this? This is the smart table right now:

Edit: I saw the screenshot attached in the smart table page, and indeed the component works :) just not the way in the Nebular page.

[SashaSkywalker]

You are right, some steps in the nebular setup instruction are missed.
Have a look at demo, this is working example of smart tables with nebular.

smart table page example just add some basic styles to table

table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

table th {
  font-weight: bold;
}

table th, table td {
  padding: 0.5rem 1rem;
  border: 1px solid #e9ebec;
}

table tr.section {
  font-size: .75rem;
  font-weight: bold;
}

[nvmnghia]

@SashaSkywalker Please update it. Also, what are the purposes of @theme and @core folder? I have to manually copy them to use ThemeModule

import { ThemeModule } from '../../@theme/theme.module';

And now I lost the icons :v. The reason why I got text instead of icons in the previous reply was that I didn't notice the <i>s were manually added in the settings.

I will try your method in the next hour.

[nvmnghia]

I think some CSS is not loaded in my case. When I paste the CSS <link> from the demo site to my page, things eventually look good.

[nvmnghia]

I fixed my issue. I installed some missing styles package in angular.json. Did I do something wrong in my installation? I just follow the guide in the main page, and it should have installed all styles for me in the first place.

Styles I installed:

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.css",
    "./node_modules/typeface-exo/index.css",
    "./node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
    "./node_modules/@fortawesome/fontawesome-free/css/all.css",
    "./node_modules/socicon/css/socicon.css",
    "./node_modules/nebular-icons/scss/nebular-icons.scss",
    "./node_modules/angular-tree-component/dist/angular-tree-component.css",
    "./node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
    "./node_modules/leaflet/dist/leaflet.css",
]

[Ajinkyadon]

table{
color: $table-font-color;
tr {
td,th{
border: 1px solid $table-border-color;
}
}
}

Hey man thanks

[Mustapha-HajRomdhane]

to edit table you can use :
:host /deep/ ng2-smart-table table{
border-collapse:separate !important;
border-spacing:0.3125rem 0.3125rem !important;
}

you can edit td too using :
:host /deep/ ng2-smart-table tbody > tr:first-child > td:nth-child(2) {
color: white;

background-color: #4472C4 !important;
width: 200px !important;
background-image: url("assets/img/icons8-chargement-en-cours-32.png") !important;
background-position: 5% 50% !important; /* Center the image */

background-repeat: no-repeat !important; /* Do not repeat the image */

}