Ng2-smart-table cell background color depending on content

ng2-smart-table column class
ng2-smart-table column settings
localdatasource ng2-smart-table
ng2-smart-table-responsive
ng2-smart-table pagination style
ng2-smart-table custom filter
ng2-smart-table search box
ng2 smart table filter css

I'm using the module Ng2-smart-table (https://akveo.github.io/ng2-smart-table/#/documentation).

Is it possible to customize the background of a cell / or entire row depending of the content of the same cell / or a cell of the same row? Can you provide an example?

Thank you


I figured it out:

import { Component, Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';


@Component({
  template: `
  <span [ngClass]="classToApply">{{renderValue}}</span>
  `,
  styles: ['.error { color: red; }']
})
export class MyColumnRenderComponent implements ViewCell, OnInit {

  renderValue: string;

  @Input() value: string | number;
  @Input() rowData: any;

  classToApply = '';

  ngOnInit() {
    if(this.value == 'MY_ERROR_CODE') {
      this.classToApply = 'error';
    }
    this.renderValue = this.value.toString().toUpperCase();
  }

}

add style in a cell · Issue #315 · akveo/ng2-smart-table · GitHub, return <span class="myclass" style="background-color: yellow !important;">${cell}​</span> ; }. no problem for my I want to know if is possible, if is it, i could validate the use of ng2-smart-table. text-align: right; } thanks ;)  :host /deep/ ng2-smart-table thead > tr > th { background-color:blue; } More info on host and hostcontext link share | improve this answer | follow | | | |


If you only need to change the class based on a cell value, there is valuePrepareFunction :

valuePrepareFunction: (cell) => {
  if (cell === 'one') {
    return '<p class="firstCellClass">' + cell + '</p>';
  } else if (row.anotherCellName == 'two') {
    return '<p class="secondCellClass">' + cell + '</p>';
  } else {
    return '<p class="defaultCellClass">' + cell + '</p>';
  }
},

There also is a rowClassFunction, for the entire row too:

https://github.com/akveo/ng2-smart-table/pull/355


The custom render component can be usefull when you want to inject specific css style that is not rendered within a 'html' cell type.

Change color Row · Issue #762 · akveo/ng2-smart-table · GitHub, How can I color the record in red when the field myfield = -1? Skip to content .solved { background: rgba(86, 241, 86, 0.5); } .aborted { background: <tr _ngcontent-c14="" class="solved" ng-reflect-klass="ng2-smart-row"  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.


You can apply a style with a dynamic variable. In my case, I needed to apply background based on the type of fuel so I use as follows

 Volume: {
    type: 'html',
    title: 'Volume',
    valuePrepareFunction: ((Volume, row)=> {
        return this.domSanitizer.bypassSecurityTrustHtml(`<h6 class="text-white p-t-0 qlz-line-height text-center" style="background:${this.getFuelColor(row.FuelType)}"><strong>${Volume} gal </strong> </h6>`);
    }),
    width: '15%'
  }

And in getFuelColor(fuelType) I am derving color based on fuelType.

Change the color of the selected row · Issue #1079 · akveo/ng2 , When I select a row, how do I change the color of that row? ng2-smart-table table tr.selected { background-color: lightblue !important; }  row.data.GestionFacturacion is actually 'Observado', it goes inside the "if" but the row doesn't change to red (the color i want).highlightObservado{ color: red; } SOLVED !!! just put the css at global style css


akveo/ng2-smart-table, 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; } B text-decoration: none; // for remove under line of link } Thanks npm install --save ng2-smart-table This command will create a record in your package.json file and install the package into the npm modules folder. Minimal Setup Example. First thing you need to do is to import the ng2-smart-table directives into your component. import { Ng2SmartTableModule } from 'ng2-smart-table';


How to override ng2-smart-table highlight and stripped row color, I need to change the text color of a row when certain condition with the row data is true. Is there any way to accomplish that? Thank You! @ameagol thanks for this solution but this doesn't really solve a problem, someone who is using something like bootstrap should be able to style the ng2-smart-table just by adding css classes like table-stripped without overriding that css or even including it.


How to add custom css in ng2-smart-table - angular - html, Selected table row color should be the color specified/overridden in the scss /​deep/ .ng2-smart-row { &.selected { background: nbtheme(color-primary) !​important; .ng2-smart-actions { &.ng2-smart-action-multiple-select { text-align: center; }  I have an html table and in a particular column the text is either set to 'Y' or 'N'. I'm wondering if it is possible to set the colour of the text to Red programmatically on load if the value is'N