How to change the header color from blue to something else.

[jayeshiitr]

Hi folks, This can be a very naive question. Bear with me for that. I could change the color of other cells; but not able to change the color of the header. I have tried this :host /deep/ ng2-smart-table thead > tr > th { color: red; } But this changed the color of the 'Actions' but not of the sortable column headers. They still appears in blue. I want to change to #BF3D1A . I tried this too: :host{ /deep/ { *{ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

} }

My data looks like this settings = { columns: { stageNo: { title: 'Stage #', filter:false }, stageName: { title: 'Stage Description', filter:false, class: "{color:red}" }, startDate: { title: 'Start Date (DD/MM/YYYY)', filter:false }, endDate: { title: 'End Date (DD/MM/YYYY)', filter:false } } };

Any help is greatly appreciated !

[avighoga]

set defaultStyle in table settings object see below: settings = { defaultStyle: false, attr: { class: 'responstable' // this is custom table scss or css class for table },

and set in your custom css or scss file th { color: #000000; // black padding: 1em; a{ color: #000000; // black } a:hover { color: #fff; // white text-decoration: none; // for remove under line of link } Thanks Avinash

[janpansa]

I am trying what @avighoga said, however the default blue styling is still there...

[chlehtin]

Try :host /deep/ ng2-smart-table-title > a { color: red; }

[janpansa]

@chlehtin @avighoga I managed to fix my issues a few days ago by using :host and /deep/ . See here #464 .

[Deddoh]

Try this: in Settings, attr:{class: 'table table-striped changeTableHeaderColor'}

define the class in the custom scss file: .changeTableHeaderColor{ ng2-smart-table-title { color: #ffffff !important; } }

Hope this helps

[josephjoju2]

this worked for me in angular: add this following code to styles.css

ng2-smart-table table tr th a { color: red !important; }