JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

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

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

CSS

/**
 * @license Highcharts Dashboards v3.0.0
 *
 * (c) 2009-2023 Highsoft AS
 *
 * License: www.highcharts.com/license
 */

:root,
.highcharts-light {
    --highcharts-background-color: #ffffff;

    /* Neutral colors */
    --highcharts-neutral-color-100: #000000;
    --highcharts-neutral-color-80: #333333;
    --highcharts-neutral-color-60: #666666;
    --highcharts-neutral-color-40: #999999;
    --highcharts-neutral-color-20: #cccccc;
    --highcharts-neutral-color-10: #e6e6e6;
    --highcharts-neutral-color-5: #f2f2f2;
    --highcharts-neutral-color-3: #f7f7f7;
    --highcharts-neutral-color-0: #ffffff;

    /* Highlight colors */
    --highcharts-highlight-color-100: #0022ff;
    --highcharts-highlight-color-80: #334eff;
    --highcharts-highlight-color-60: #667aff;
    --highcharts-highlight-color-20: #ccd3ff;
    --highcharts-highlight-color-10: #e6e9ff;
    --highcharts-highlight-color-7: #0000ff07;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* UI colors */
        --highcharts-background-color: #333333;

        /*
            Neutral color variations
            https://www.highcharts.com/samples/highcharts/css/palette-helper
        */
        --highcharts-neutral-color-100: rgb(255, 255, 255);
        --highcharts-neutral-color-80: rgb(214, 214, 214);
        --highcharts-neutral-color-60: rgb(173, 173, 173);
        --highcharts-neutral-color-40: rgb(133, 133, 133);
        --highcharts-neutral-color-20: rgb(92, 92, 92);
        --highcharts-neutral-color-10: rgb(71, 71, 71);
        --highcharts-neutral-color-5: rgb(61, 61, 61);
        --highcharts-neutral-color-3: rgb(57, 57, 57);
        --highcharts-neutral-color-0: rgb(0, 0, 0);

        /* Highlight color variations */
        --highcharts-highlight-color-100: rgb(122, 167, 255);
        --highcharts-highlight-color-80: rgb(108, 144, 214);
        --highcharts-highlight-color-60: rgb(94, 121, 173);
        --highcharts-highlight-color-20: rgb(65, 74, 92);
       ...

JavaScript

DataGrid.dataGrid('container', {
    dataTable: {
        columns: {
            product: [
                'Apples', 'Pears', 'Plums', 'Bananas', 'Oranges', 'Grapes',
                'Strawberries', 'Blueberries', 'Cherries', 'Mangoes'
            ],
            weight: [100, 40, 0.5, 200, 150, 120, 50, 30, 25, 200],
            price: [1.5, 2.53, 5, 4.5, 3, 2.8, 6, 4.2, 7, 3.5],
            metaData: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
            icon: [
                'Apples URL', 'Pears URL', 'Plums URL', 'Bananas URL',
                'Oranges URL', 'Grapes URL', 'Strawberries URL',
                'Blueberries URL', 'Cherries URL', 'Mangoes URL'
            ]
        }
    },
    rendering: {
        columns: {
            distribution: 'full'
        }
    }
});