Highcharts Dashboards Component DataGrid

by stitot

HTML

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

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

CSS

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

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

.custom-theme {
    
}

.row-header-column {
    background: red !important;
}

JavaScript

const table = new Dashboards.DataTable({
    columns: {
        rowHeader: [1, 2, 3, 4],
        dataA: ['lorem', 'ipsum', 'dolor', 'sit'],
        dataB: [111, 222, 333, 444]
    } 
});

Grid.grid('container', {
	dataTable: table,
    rendering: {
    	theme: 'custom-theme'
    },
    columns: [{
    	id: 'rowHeader',
        className: 'row-header-column',
        header: {
        	format: ''
        },
        cells: {
        	format: 'Row {value}'
        }
    }]
});