JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My First Grid</title>
        <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-lite.css" />
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

JavaScript

// Data preparation
const data = new Grid.DataTable({
    columns: {
        instanceId: [
            'i-18cd0d5', 'i-2b3f4e6', 'i-3c5d6e3', 'i-4d7e8f6', 'i-5e9f0a7',
            'i-6f1a2b2', 'i-7a2b3c4', 'i-8b3c4d8', 'i-9c4d5e3', 'i-0d5e6f2',
            'i-1f2g3h4', 'i-2g3h4i5', 'i-3h4i5j6', 'i-4i5j6k7', 'i-5j6k7l8',
            'i-6k7l8m9', 'i-7l8m9n0', 'i-8m9n0o1', 'i-9n0o1p2', 'i-0o1p2q3',
            'i-1p2q3r4', 'i-2q3r4s5', 'i-3r4s5t6', 'i-4s5t6u7', 'i-5t6u7v8',
            'i-6u7v8w9', 'i-7v8w9x0', 'i-8w9x0y1', 'i-9x0y1z2', 'i-0y1z2a3'
        ],
        running: [
            true, true, true, true, true, false, true, true, false, true,
            true, false, true, true, true, true, false, true, true, false,
            true, true, false, true, true, true, true, false, true, true
        ],
        cpuUtilization: [
            '15, 18, 29, 48, 56, 54, 34, 28, 23, 13, 8, 5, 9, 15, 25',
            '99, 96, 82, 53, 33, 22, 29, 38, 52, 73, 84, 91, 97, 89, 70',
            '1, 4, 24, 65, 79, 77, 52, 38, 29, 22, 16, 10, 6, 9, 15',
            '50, 54, 64, 78, 89, 96, 99, 95, 89, 86, 83, 80, 76, 73, 70',
            '20, 21, 22, 25, 28, 31, 35, 43, 51, 58, 58, 55, 59, 58, 54',
            '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0',
            '97, 92, 89, 85, 82, 81, 85, 88, 91, 97, 97, 94, 93, 92, 91',
            '5, 2, 1, 2, 4, 7, 9, 6, 4, 3, 3, 2, 1, 1, 0',
            '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0',
            '86, 73, 57, 38, 35, 44, 70, 56, 33, 23, 18, 15, 11, 8, 5',
            '45, 48, 52, 58, 64, 70, 75, 78, 74, 68, 62, 55, 48, 42, 38',
            '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0',
            '30, 35, 42, 51, 58, 64, 68, 65, 59, 52, 46, 39, 33, 28, 24',
            '88, 85, 80, 75, 71, 68, 66, 64, 62, 61, 60, 59, 58, 57, 56',
            '12, 15, 19, 25, 32, 40, 48, 55, 61, 65, 67, 66, 63, 58, 52',
            '95, 93, 90, 87, 84, 82, 80, 78, 76, 75, 74, 73, 72, 71, 70',
        ...