Custom column distribution Demo

by stitot

HTML

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

<div id="container" class="hcg-theme-default"></div>

CSS

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

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

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

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

JavaScript

class CustomDistributionStrategy extends Grid.ColumnDistribution.types.mixed {
    constructor(viewport) {
        super(viewport);
        this.type = 'custom';
    }

    resize(resizer, diff) {
        const column = resizer.draggedColumn;
        if (!column) {
            return;
        }

        this.columnWidths[column.id] = Math.max(
            (resizer.columnStartWidth || 0) + diff,
            CustomDistributionStrategy.getMinWidth(column)
        );
        this.columnWidthUnits[column.id] = 0; // Always save in px
    }
}

Grid.ColumnDistribution.types.custom = CustomDistributionStrategy;

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}`)
        }
    },
    rendering: {
        columns: {
            distribution: 'custom'
        }
    },
    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'
        }
    }]
});