JSFiddle - React, Tailwind, and code Playground

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" />

    <link rel="stylesheet"  href="demo.css" />

    <style id="hcg-highlights" type="text/css"></style>
    
    
    <div id="container_1"></div>
<div id="container_2"></div>

JavaScript

Grid.grid(
  "container_1",
  {
    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: "dessert",
        cells: {
          formatter: function () {
            /*
            Scope is column, so check against value in all cells. Alternative is the check
            against value in current cell and apply styling to all cells in column.
            Both approaches could potentially be cached after first hit, to avoid the
            repeated check in every row.
            */
            const values = this.column.data;
            if (values.includes("Custard")) {
              this.htmlElement.classList.add("highlight");
              this.htmlElement.classList.add("important"); // 'cause highlight.important: true
              Object.assign(this.htmlElement.style, {
                backgroundColor: "#aaaaaa",
                color: "#ffffff",
              });
            }
            return this.value;
          },
          highlight: {
            styles: function () {
              // Some conditions
              return {
                backgroundColor: "#aaaaaa",
                color: "#ffffff",
              };
            },
            important: true,
            scope: ["column"],
          },
        },
      },
      {
        id: "carbs",
        cells: {
          formatter: function ()...