add style in a cell

[TheMalloum]

Hi,

I want to add style dynamically in a cell. for exemple valuePrepareFunction : (cell, row) => { return <span class="myclass" style="background-color: yellow !important;">${cell}</span>; }

no problem for my class but the style is ignore.

Do you know why ?

[lexzhukov]

try to use [style.background-color]="value" instead of style="...."

[TheMalloum]

Hi,

I use this, but it doesn't works.

valuePrepareFunction : (cell, row) => { return <span [style.background-color]="'red'">${cell}</span>; }

thanks for your answer

[nnixaa]

Hey @TheMalloum, your first example should work, just specify the column type as 'html'.

[TheMalloum]

Hi @nnixaa,

that is my columns settings but it doesn't works, color is ignore.

    color: {
      type: "html",
      title: 'color',
      filter: false,
      valuePrepareFunction: (cell, row) => {
          return `<span class="fa fa-users" style="color:${cell};" >${cell}</span>`;
      }

thanks

[TheMalloum]

Hi @nnixaa,

I want to know if is possible, if is it, i could validate the use of ng2-smart-table.

[lexzhukov]

@TheMalloum for your example, you can use only the classes or use a custom view component.. Please, take a look at this docs.

[TheMalloum]

Hi @nnixaa, thanks a lot

[vmanishasannu]

For People Who still stuck to add a class to a cell in the table below is a sample code where taskStatus is the column name , title: 'Task Status' is the displayed title in the table settings = { columns: { taskStatus: { title: 'Task Status', type: 'html', filter: false, valuePrepareFunction: (value) => {
return '

' + value + '

';
} } } };

[Balachandar1996]

try this one, valuePrepareFunction: (data) => { return '\

' + data + '\

'; },

CSS :host /deep/ .cell_right { width:100%; height: 100%; text-align: right; } thanks ;)

[amethiarunmaurya]

Hello, Please help me i want to use row groupping in ngx-smart table . Plese share some example code

[Balachandar1996]

Use prime Ng table or prime Ng tree table instead of this is easy to handle and more features in it

On Thu 30 Aug, 2018, 4:10 PM Arun Kumar Maurya, notifications@github.com wrote:

Hello, Please help me i want to use row groupping in ngx-smart table . Plese share some example code

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/akveo/ng2-smart-table/issues/315#issuecomment-417274326, or mute the thread https://github.com/notifications/unsubscribe-auth/Aic_atez7ftu1jkojzhWrE_7q_oIWlotks5uV8ErgaJpZM4NDL0P .

[lukele1607]

Hi @TheMalloum, Did you resolve this problem ? I get same issues. I have tried component, renderConponent and valuePrepareFunction but all of them not working. ng2-smart-table is ignore style

[lukele1607]

Hi, It is work fine with renderConponent . Thank for all

[toilabeos]

@lukele1607 can you give me example about this?

[lukele1607]

@khyynld : code sample

generateTable() {
    this.tableSettings = {
      actions: false,
      hideSubHeader: true,
      columns: {
        tunnel: {
          title: tunnelHeader,
          filter: false,
          type: 'string',
        },
        tunnelState: {
          title: tunnelState,
          filter: false,
          type: 'custom',
          renderComponent: ProgressComponent
        },
      },
      pager:
      {
        perPage: 4
      }
    };
  }

progress.component.ts:

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

@Component({
  selector: 'app-progress',
  template: `
    <div class="progress" >
      <div class="{{stateClass}}" aria-valuemin="0" aria-valuemax="100" [attr.aria-valuenow]="percentage"
        role="progressbar" [style.width]="styleWidth" >
          {{percentage}}%
      </div>
  </div>`
})
export class ProgressComponent implements ViewCell, OnInit {

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

  constructor() { }

  ngOnInit() {
    this.stateClass = this.rowData.tunnelState.state === '1' ? 'progress-bar bg-success' : 'progress-bar bg-danger';
    this.percentage = this.rowData.tunnelState.percentage;
    this.styleWidth = this.percentage + '%';
  }
}

[WiharlleyWill]

Change the type oc collum to HTML

nameColumn: { title: "titleColumn", type: "html", valuePrepareFunction: ((data, row) => { if (row.VALUE === 'EXAMPLE') { return '<p class="cell_style">' + data + '</p>'; } else { return

${row.StatusBoleto}

; } }),

Style: :host /deep/ .cell_style { width:100%; height: 100%; text-align: right; }

[InovantNodeTeam]

For People Who still stuck to add a class to a cell in the table below is a sample code where taskStatus is the column name , title: 'Task Status' is the displayed title in the table settings = { columns: { taskStatus: { title: 'Task Status', type: 'html', filter: false, valuePrepareFunction: (value) => { return '

' + value + ' '; } } } };

im not able to add class plz help