JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

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


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

CSS

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

#container {
    height: 400px;
}

.highcharts-background {
    fill: transparent;
}

.highcharts-datagrid-table tbody tr {
    height: 70px;
}

JavaScript

DataGrid.dataGrid('container', {
    dataTable: {
        columns: {
            a: Array.from({ length: 100 }, (_, i) => `A${i} quite a long text`),
            b: Array.from({ length: 100 }, (_, i) => `B${i} Lorem ipsum dolor sit amet, consectetur adipiscing elit.`), // eslint-disable-line
            c: Array.from({ length: 100 }, (_, i) => `C${i}`),
            d: Array.from({ length: 100 }, (_, i) => Array.from({ length: 10 }, () => Math.round(Math.random() * 10))),
            'lorem ipsum': Array.from({ length: 100 }, (_, i) => `E${i}`), // eslint-disable-line
            f: Array.from({ length: 100 }, (_, i) => `F${i}`)
        }
    },
    settings: {
        rows: {
            strictHeights: true
        }
    },
    columns: [{
    	id: 'd'
    }],
    rendering: {
    	rows: {
        	strictHeights: true
        }
    },
    events: {
    	cell: {
        	afterSetValue: function() {
            	if (this.column.id !== 'd') {
                	return;
                }
                
                const el = this.htmlElement;
                el.innerHTML = '';
                
                const chart = document.createElement('div');
                el.appendChild(chart);
                
                Highcharts.chart(chart, {
                	chart: {
                    	height: 60,
                        styledMode: true,
                        animation: false,
                        margin: [0, 0, 0, 0]
                    },
                    title: {
                    	text: ''
                    },
                    credits: {
                    	enabled: false
                    },
                    xAxis: {
                    	visible: false
                    },
                    yAxis: {
                    	visible: false
                    },
                    legend: {
                    	enabled: false
                    },
                    plotOptions: {
                    	series: {
             ...