Column resizing mode Demo

author(s): Dawid Dragula Sebastian Bochan

by stitot

HTML

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

<div class="demo">
    <div id="container"></div>
    <div>
        <label for="select-distr">Column Distribution: </label>
        <select id="select-distr">
            <option selected>adjacent</option>
            <option>independent</option>
            <option>distributed</option>
        </select>
    </div>
    <div>
        <label for="cbx-virt">Virtualization: </label>
        <input type="checkbox" id="cbx-virt">
    </div>
    <div>
        <button id="btn-remove-widths">Remove Width Options</button>
    </div>
</div>

CSS

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

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

.hcg-theme-default {
    --hcg-column-border-width: 1px;
    --hcg-header-column-border-width: 1px;
}

#container {
    height: 250px;
    padding: 8px;
}

JavaScript

const grid = Grid.grid('container', {
    dataTable: {
        columns: {
            product: Array.from({ length: 40 }, (_, i) => `A${i}`),
            weight: Array.from({ length: 40 }, (_, i) => `B${i}`),
            price: Array.from({ length: 40 }, (_, i) => `C${i}`),
            icon: Array.from({ length: 40 }, (_, i) => `E${i}`),
            meta: Array.from({ length: 40 }, (_, i) => `F${i}`)
        }
    },
    columns: [{
        id: 'product',
        header: {
            format: '20% width'
        },
        width: '20%'
    }, {
        id: 'weight',
        header: {
            format: '100px width'
        },
        width: '100px'
    }, {
        id: 'price',
        header: {
            format: 'Not defined width'
        }
    }, {
        id: 'icon',
        header: {
            format: '15% width'
        },
        width: '15%'
    }, {
        id: 'meta',
        header: {
            format: 'Not defined width'
        }
    }]
});

document.getElementById('select-distr').addEventListener('change', e => {
    grid.update({
        rendering: {
            columns: {
                resizing: {
                    mode: e.target.value
                }
            }
        }
    });
});

document.getElementById('cbx-virt').addEventListener('change', e => {
    grid.update({
        rendering: {
            rows: {
                virtualization: e.target.checked
            }
        }
    });
});

document.getElementById('btn-remove-widths').addEventListener('click', () => {
    grid.update({
        columns: [{
            id: 'product',
            width: null
        }, {
            id: 'weight',
            width: null
        }, {
            id: 'icon',
            width: null
        }]
    });
});