JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

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

<div class="demo">
    <div id="container"></div>
    <p class="highcharts-description">
        A simple Grid with custom cell formatting, using the <code>className</code>, <code>format</code> and <code>formatter</code> API options. See comments in the source code to learn more. 
        <ul>
            <li>Salary column is formatted to a currency string with `k` abbreviation.</li>
            <li>The entire row is highlighted if salary is greater than 80k.</li>
            <li>The performance value is highlighted green if greater than 80 and red if less than 75.</li>
            <li>Content in first column is centered, and values in the Name column are always bold.</li>
            <li>Any numeric value in the entire grid, except for ID and Salary, that are greater than 50 is put inside a box.</li>
        </ul>
    </p>
</div>

CSS

@import url("http://localhost:3030/code/grid/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;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

:root,
.highcharts-light {
    --code-background: #f7f7f7;
    --code-border: #e1e1e1;
}

.demo {
    padding: 8px 12px;
}

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

.custom-theme,
.highcharts-light .custom-theme {
    /* This starts of by defining some custom color variabled */
    --highlight-color: #e2e2e2;
    --highlight-border-color: #cec184;
    --high-color: #348700;
    --low-color: #d8003a;

    /* The custom variables are then applied to the included theming --hcg variables */
    --hcg-padding: 10px;
    --hcg-header-row-border-width: 2px;
    --hcg-header-row-border-color: var(--highlight-color);
    --hcg-row-border-width: 1px;
    --hcg-row-border-color: var(--highlight-color);
    --hcg-cell-hovered-background: var(--highlight-color);
    --hcg-cell-hovered-column-border-width: 1px;
    --hcg-cell-hovered-column-border-color: var(--highlight-color);

    /* Button styles */
    --hcg-button-color: #333;
    --hcg-button-border-radius: 6px;
    --hcg-button-hover-color: #000;
    --hcg-button-hover-background: var(--highlight-color);

    /* Icon styles */
    --hcg-icon-hover-color: #000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --code-background: #2a2a2a;
        --code-border: #4a4a4a;
    }

    .custom-theme {
        --highlight-color: #4c4c4c;
        --highlight-border-color: #7d754c;
        --high-color: #98d76a;
        --low-color: #ffa8a8;

        /* Button styles */
        --hcg-button-color: #ddd;
       ...

JavaScript

Grid.grid('container', {
    dataTable: {
        columns: {
            ID: [1, 2, 3, 4, 5, 6],
            Name: ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'John'],
            Age: [28, 51, 40, 60, 53, 39],
            Department: [
                'HR',
                'Engineering',
                'Sales',
                'Marketing',
                'Finance',
                'Finance'
            ],
            Salary: [50000, 75000, 55000, 85000, 65000, 83000],
            PerformanceScore: [85, 49, 95, 40, 88, 73]
        }
    },
    columnDefaults: {
        cells: {
            /*
            Use the formatter callback function only when needed, for more
            complex formatting. This example wraps numeric values, except the
            first column, inside a span. If value > 50 a highlight CSS class is
            appended. Since inside columnDefaults this applies to all columns in
            the grid. See also CSS comment.
            */
            formatter: function () {
                const value = this.value;
                const id = this.column.id;

                if (typeof value !== 'number' || id === 'ID') {
                    return value;
                }

                const className = value > 50 ? 'highlight' : '';
                return `<span class="box ${className}">${value}</span>`;
            }
        }
    },
    rendering: {
        theme: 'custom-theme'
    },
    description: {
        text: '* Performance Score'
    },
    columns: [
        /*
        The included hcg-center, hcg-left and hc-right CSS classes can be used
        for text alignment in headers and cells. Observe that column headers can
        be removed by passing an empty string in the columns[].header.format.
        */
        {
            id: 'ID',
            cells: {
                className: 'hcg-center'
            },
            header: {
                format: ''
      ...