Minimal Grid

author(s): Sebastian Bochan

by stitot

HTML

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

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

CSS

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

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

JavaScript

Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            cbx: [true, false, false, true],
            price: [1.5, 2.53, 5, 4.5]
        }
    },
    columns: [{
        id: 'cbx',
        cells: {
            renderer: {
                type: 'checkbox'
            },
            events: {
                afterEdit: function() {
                    console.log('test');    
                }
            }
        }
    }]
});