JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="http://localhost:3031/grid/grid-lite.js"></script>

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

CSS

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

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

body {
    background: #fff;
}

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

#container {
    height: 250px;
}

/* ============= */

JavaScript

// Decide on the default behavior (whether true or false):
Grid.Table.RESIZING_SHOULD_CHANGE_ALL_WIDTHS_UNITS_TO_PIXELS = false;

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: '50px'
    }, {
        id: 'weight',
        header: {
        	format: '100px width'
        },
        width: '50px'
    }, {
        id: 'price',
        header: {
        	format: 'undefined width'
        },
        width: '50px'
    }, {
        id: 'icon',
        header: {
        	format: '15% width'
        },
        width: '50px'
    }, {
    	id: 'meta',
        header: {
        	format: 'undefined width'
        },
        width: '50px'
    }]
});