JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataGrid CSS Variables</title>
    <link rel="stylesheet"  href="http://localhost:3030/code/dashboards/css/datagrid.css" />
    <script src="http://localhost:3030/code/dashboards/datagrid.js"></script>

</head>
<body>
    <div id="table_1" class="table"></div>
    <div id="table_2" class="table"></div>
    <div id="table_3" class="table"></div>
    <div id="table_4" class="table"></div>
    <div id="table_5" class="table"></div>
    <div id="table_6" class="table"></div>
    
</body>
</html>

CSS

body {
    background: #d1d1d1;
    padding: 5%;
}

.table {
    margin-bottom: 50px;
    height: 350px;
}

.theme-custom-base {
    --hcdg-font-size: 14px;
    --hcdg-color: #808080;
    --hcdg-header-color: #fff;
    --hcdg-background: #fff;
    --hcdg-padding: 20px;
    --hcdg-caption-font-family: "Courier New";
    --hcdg-caption-font-size: 20px;
}

.theme-custom-1 {
    --hcdg-header-row-background: #36304a;
    --hcdg-column-hovered-background: #f2f2f2;
    --hcdg-row-hovered-background: #f2f2f2;
    --hcdg-cell-hovered-background: #6c7ae0;
    --hcdg-header-column-hovered-background: #484848;
    --hcdg-header-cell-hovered-background: #484848;
    --hcdg-cell-hovered-color: #fff;
   
}

.theme-custom-2 {
    --hcdg-header-row-background: #333333;
    --hcdg-row-even-background: #eaf8e6;
    --hcdg-column-hovered-background: #83d160;
    --hcdg-row-hovered-background: #83d160;
    --hcdg-cell-hovered-background: #57b846;
    --hcdg-header-column-hovered-background: #484848;
    --hcdg-column-hovered-color: #fff;
    --hcdg-row-hovered-color: #fff;
    --hcdg-header-cell-hovered-background: #484848;
}

.theme-custom-3 {
    --hcdg-header-row-background: #6c7ae0;
    --hcdg-column-hovered-background: #fcebf5;
    --hcdg-row-hovered-background: #fcebf5;
    --hcdg-cell-hovered-background: #e03e9c;
    --hcdg-header-column-hovered-background: #7b88e3;
    --hcdg-cell-hovered-color: #fff;
    --hcdg-row-border-width: 1px;
    --hcdg-row-border-color: #e5e5e5;
    --hcdg-header-cell-hovered-background: #7b88e3;
}

.theme-custom-4 {
    --hcdg-header-row-background: #fa4251;
    --hcdg-column-hovered-background: #ffebed;
    --hcdg-header-column-hovered-background: #f95462;
    --hcdg-row-hovered-color: #fa4251;
    --hcdg-header-cell-hovered-background: #f95462;
}

.theme-custom-5 {
    --hcdg-header-row-background: #002933;
    --hcdg-row-even-background: #e9faff;
    --hcdg-header-column-hovered-background: #1a3f48;
    --hcdg-header-column-hovered-color:...

JavaScript

const data = {
  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, 22, 20, 28, 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",
    ],
  },
}

const lessdata = {
  columns: {
    dessert: [
      "Fruit Salad",
      "Rice Pudding",
      "Custard",
      "Bread Pudding",
      "Ice Cream",
      "Cheesecake",
    ],
    calories: [50, 118, 122, 153, 207, 321],
    fat: [0.3, 2.0, 3.5, 4.0, 11.0, 23.0],
    carbs: [13, 22, 20, 28, 24, 29],
    protein: [1.0, 3.0, 4.0, 5.0, 3.5, 6.0],
    fiber: [2.0, 1.0, 0.5, 1.0, 0.5, 1.0],
    sugar: [10, 10, 15, 18, 14, 22],
    sodium: [5, 55, 47, 105, 90, 270],
  },
}

let config = {
  dataTable: lessdata,
  rendering: {
    rows: {
      virtualization: false,
      strictHeights: true,
    },
  },
  caption: {
    text: "",
  },
  credits: {
    enabled: true,
  },
  // header: [
  //   "dessert",
  //   {
  //     format: "Nutritional Info",
  //     columns: [
  //       {
  //         format: "Macronutrients",
  //         columns: [
  //           {
  //             columnId: "calories",
  //             format: "Calories",
  //           },
  //           {
  //             columnId: "fat",
  //             format: "Fat (g)",
  //           },
  //           {
  //             columnId: "carbs",
  //             format: "Carbs (g)",
  //           },
  //           {
  //             columnId: "protein",
  //            ...