JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

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

<div id="container"></div>
<p class="highcharts-description">
    Adding HTML from an untrusted source into the DOM is a <a href="https://www.highcharts.com/docs/chart-concepts/security" target="_blank">
    potential security risk</a>, as it may execute unauthorized code in the browser.
    This demo shows how you can whitelist selected tags and attributes if you need to use custom HTML in table cells.
</p>

CSS

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

.hcg-theme-default {
    --anchor-color: #007bff;
}

.highcharts-description {
    padding: 0 20px;
}

@media (prefers-color-scheme: dark) {
    .hcg-theme-default {
        --anchor-color: #8ec3fc;
    }

    #container {
        background-color: #292929;
    }
}

#container {
    padding: 8px;
}

.column-description {
    font-size: 0.8em;
}

.hcg-container h2 {
    font-size: 1.5em;
    font-weight: bold;
}

td {
    align-items: center;
    text-align: center;
}

.hcg-theme-default a {
    color: var(--anchor-color);
}

td button {
    background: #007bff;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 8px;
}

JavaScript

//Grid.AST.allowedTags.push('input');
//Grid.AST.allowedAttributes.push('checked');
Grid.grid('container', {
    dataTable: {
        columns: {
            Id: [1, 2, 3],
            Header: ['Title 1', 'Title 2', 'Title 3'],
            Description: [
                `Loreum ipsum dolor sit amet, consectetur adipiscing elit.
                In in nulla euismod, ultrices.`,
                `Loreum ipsum dolor sit amet, consectetur adipiscing elit.
                In in nulla euismod, ultrices.x `,
                `Loreum ipsum dolor sit amet, consectetur adipiscing elit.
                In in nulla euismod, ultrices.x `
            ],
            List: ['item1, item2', 'item3, item4', 'item5, item6'],
            Image: ['sun', 'snow', 'sun'],
            Link: [
                'https://www.github.com',
                'https://www.google.com ',
                'https://developer.mozilla.org/'
            ],
            Checked: [true, false, false]
        }
    },
    rendering: {
        rows: {
            virtualization: false
        }
    },
    columns: [{
        id: 'Header',
        cells: {
            format: '<h2>{value}</h2>'
        }
    }, {
        id: 'Description',
        cells: {
            format: '<div class="column-description">{value}</div>'
        }
    }, {
        id: 'List',
        cells: {
            formatter: function () {
                const items = this.value.split(',');
                let list = '';

                items.forEach(el => {
                    list += '<li>' + el + '</li>';
                });

                return '<ul>' + list + '</ul>';
            }
        }
    }, {
        id: 'Image',
        cells: {
            format: '<img src="https://www.highcharts.com/samples/graphics/{value}.png"/>'
        }
    }, {
        id: 'Link',
        cells: {
            format: '<a href="{value}" target="_blank">URL</a>'
        }
    }, {
        id: 'Checked',
        cells: {
            formatter:...