Display grid with minimal configuration

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

<div id="container"></div>
<p class="highcharts-description">
    Grid with a bare-bone minimal configuration, using only the required <code>dataTable</code> API option.
</p>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css");

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#container {
    padding: 8px;
}

.highcharts-description {
    padding: 0 10px;
}


@media (prefers-color-scheme: dark) {
    body {
        background-color: #141414;
        color: #ffffff;
    }
}

JavaScript

Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5]
            bla: [1.5, 2.53, 5, 4.5]
            bla: [1.5, 2.53, 5, 4.5]
        }
    }
});