inserting style into javascript based on a condition

Question

I'm using grid.js to put some data into the table.

In one column I have an icon and I want it to change color based on a condition I pass, as shown below.

style='color: " + cell.amount ? + " 'green' " : " 'red' '

Specifically I want this to be green when amount is full, red otherwise.

I'm having a problem; I notice that NaN is shown in the column.

Can anyone kindly help me?

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        formatter: (cell) => html(`<b style='color: " + cell.amount ? + " 'green' " : " 'red' '>${cell}</b>`)
      },
      'Email',
      { 
        name: 'Actions',
        formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`)
      },
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    null
  ])
});

Answer 1

You have extra quotes that aren't needed.

And since you're using a template literal, you substitute into it with ${...}, not concatenation.

formatter: (cell) => html(`<b style='color: ${cell.amount ? "green" : "red"}'>${cell}</b>`)