Display data table with conditional styling

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css" />
    
    <div id="container">
    
    </div>

JavaScript

Grid.grid(
  "container",
  {
    dataTable: {
      columns: {
        dessert: ["Fruit Salad", "Rice Pudding", "Custard", "Bread Pudding", "Ice Cream", "Cheesecake", "Brownie", "Chocolate Mousse"],
        calories: [50, 118, 122, 153, 207, 321, 260, 250],
        fat: [0.3, 2.0, 3.5, 4.0, 11.0, 23.0, 14.0, 16.0],
        carbs: [13, 15, 20, 17, 24, 29, 34, 30],
        protein: [1.0, 3.0, 4.0, 5.0, 3.5, 6.0, 3.0, 4.5],
        fiber: [2.0, 1.0, 0.5, 1.0, 0.5, 1.0, 2.0, 1.0],
        sugar: [10, 10, 15, 18, 14, 22, 19, 16],
        sodium: [5, 55, 47, 105, 90, 270, 140, 60],
        healthScore: ["healthy", "moderate", "unhealthy", "unhealthy", "moderate", "healthy", "moderate", "healthy"],
      },
    },
    columns: [

      {
        id: "healthScore",
        cells: {
          formatter: function () {
            
            console.log(this.row.htmlElement.className);
             
            return this.value;
          },
        },
      },
    ],
  },
);