How to color a cell dynamically based on criteria?

[Matt-Heun Hong]

If the data is, as in the original example:

const data = [
  { id: 1, name: 'Chikwa Eligson', age: 24, location: 'Lagos', level: 'stage-1', mood: 'happy' },
  { id: 2, name: 'Bamidele Johnson', age: 18, location: 'Anambra', level: 'stage-4', mood: 'anxious' },
  { id: 3, name: 'John Lee', age: 20, location: 'Abuja', level: 'stage-2', mood: 'indifferent' },
  { id: 4, name: 'Binta Pelumi', age: 22, location: 'Jos', level: 'stage-3', mood: 'sad' },
]

Is there a way I could color the 'mood' column so that the 'mood' cell for the 'happy' is green, 'anxious' is yellow, etc.?

[Matt-Heun Hong]

Silly me (new to ES6). I can just return a styled HTML element in the renderAs callback for that column.

[Vishal Sharma]

@mhong19414 close the ticket if you figured it out.