JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>

<div id="container"></div>

CSS

@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

#container {
    height: 408px;
    margin: 8px;
}

:root,
.highcharts-light {
    --highcharts-background-color: #ffffff;
    
    --highcharts-neutral-color-20: #c7c7c7;
    --highcharts-neutral-color-3: #f7f7f7;

  .highcharts-datagrid-table thead tr {
      background-color: var(--highcharts-neutral-color-10);
  }
}

@media (prefers-color-scheme: dark) {
    :root {
        /* UI colors */
        --highcharts-background-color: #1f1f20;
        --highcharts-neutral-color-20: #707073; /* extracted from HC does not pass the validation */
        --highcharts-neutral-color-3: #404043;
        
        /* Highlight color variations */
        --highcharts-highlight-color-10: #707073; /* 707073 extracted from HC does not pass the validation */
        --highcharts-highlight-color-7: #505053;
        
        .highcharts-datagrid-table thead tr {
            background-color: var(--highcharts-neutral-color-7);
        }
    }
}

JavaScript

window.dataGrid = DataGrid.dataGrid('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, 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'
            ]

        }
    },
    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',
                    format: 'Protein (g)'
                }]
            }, {
                format: 'Other Nutrients',
                columns: [{
                    columnId: 'fiber',
                    format: 'Fiber (g)'
                }, {
                    columnId: 'sugar',
                    format: 'Sugar (g)'
                }, {
                    columnId: 'sodium',
                    format:...