Highcharts Dashboards Demo

author(s): Sebastian Bochan

by stitot

HTML

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

<div id="demo">
    <div id="container"></div>
    <div id="custom-options">
        <select id="select-column"></select>
        <select id="select-order">
            <option value="asc">Ascending</option>
            <option value="desc">Descending</option>
            <option value="">-</option>
        </select>
        <button id="apply-btn">Sort</button>
    </div>
</div>

CSS

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

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#demo {
    padding: 8px;
}

#custom-options {
    margin-top: 5px;
}

JavaScript

const columnSelectEl = document.getElementById('select-column');
const orderSelectEl = document.getElementById('select-order');
const applyBtnEl = document.getElementById('apply-btn');

Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5],
            metaData: ['a', 'b', 'c', 'd'],
            icon: ['Apples URL', 'Pears URL', 'Plums URL', 'Bananas URL']
        }
    },
    columns: [{
        id: 'product',
        sorting: {
            enabled: false
        }
    }, {
        id: 'price',
        sorting: {
            order: 'asc'
        }
    }],
    events: {
        column: {
            afterSort: function () {
                const { sorting } = this.viewport.grid.querying;

                columnSelectEl.value = this.id;
                orderSelectEl.value = sorting.currentSorting.order || '';
            }
        }
    }
}, true).then(dg => {
    const currentSorting = dg.querying.sorting.currentSorting;

    console.log(dg);

    dg.enabledColumns.forEach(columnId => {
        let selected = '';

        if (currentSorting.columnId === columnId) {
            selected = 'selected';
        }

        columnSelectEl.innerHTML += `
            <option value="${columnId}" ${selected}>${columnId}</option>
        `;
    });

    if (currentSorting.order) {
        orderSelectEl.value = currentSorting.order;
    }

    applyBtnEl.addEventListener('click', () => {
        dg.viewport.getColumn(columnSelectEl.value).sorting.setOrder(
            orderSelectEl.value
        );
    });

});