Minimal Grid

author(s): Sebastian Bochan

by stitot

HTML

<script src="http://localhost:3031/highcharts.js"></script>
<script src="http://localhost:3031/datagrid/datagrid.js"></script>

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

CSS

@import url("http://localhost:3031/datagrid/css/datagrid.css");

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

.hcg-theme-default {
    --hcg-cell-hovered-row-even-background: none;
}

body {
    padding: 20px;
    background: #fff;
}

JavaScript

Grid.grid('container', {
    dataTable: {
        columns: {
            line: [
                '[1, 5, 2, 4, 3, 6]',
                '[5, 2, 3, 4, 7, 2]',
                '[1, 5, 2, 3, 3, 4]',
                '[7, 5, 4, 3, 4, 6]',
                '[1, 5, 2, 6, 3, 2]'
            ],
            pie: [
                '[20, 50, 30]',
                '[10, 50, 40]',
                '[1, 90, 9]',
                '[25, 25, 50]',
                '[5, 85, 10]'
            ],
            area: [
                '[5, 2, 4, 3, 5, 2]',
                '[1, 2, 3, 2, 4, 6]',
                '[7, 3, 3, 4, 5, 8]',
                '[2, 4, 3, 7, 3, 3]',
                '[10, 9, 2, 6, 5, 7]'
            ],
            bar: [
                '[1, 4, 2]',
                '[1, 1, 1]',
                '[0, 1, 5]',
                '[0, 5, 6]',
                '[10, 1, 10]'
            ],
            column: [
                '[1, 1, 2, 2, 3]',
                '[5, 3, 4, 5, 5]',
                '[1, 1, 6, 2, 1]',
                '[5, 2, 3, 5, 6]',
                '[1, 2, 1, 3, 2]'
            ],
            
            singleBar: [-5, 10, 4, -8, 9]
        }
    },
    columns: [{
        id: 'line',
        cells: {
            renderer: {
                type: 'sparkline'
            },
        }
    }, {
        id: 'pie',
        cells: {
            renderer: {
                type: 'sparkline',
                chartOptions: {
                    chart: {
                        type: 'pie'
                    }
                }
            }
        },
        width: '60px'
    }, {
        id: 'area',
        cells: {
            renderer: {
                type: 'sparkline',
                chartOptions: {
                    chart: {
                        type: 'area'
                    },
                    
                }
            }
        }
    }, {
        id: 'bar',
        cells:...