JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

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

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

CSS

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

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]
        }
    },
    header: ["product", "weight", "price", "magic", "notsomagic"],
    columns: [{
        id: "magic",
        cells: {
            formatter: function(){
                return this.row.data.weight * this.row.data.price
            }
        }
    },
    {
        id: "notsomagic",
        cells: {
            formatter: function(){
                return this.row.data.onthefly
            }
        }
    }]
});