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>

CSS

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

body {
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

#container {
    padding: 12px;
}

.banque-france {
    --hcg-row-even-background:  transparent;
    --hcg-cell-hovered-row-background: transparent;
}

.hcg-container .empty {
    background-color: #ccc !important;
}

JavaScript

Grid.grid('container', {
    dataTable: {
        columns: {
            rowHeader: [
                'Financement des SNF',
                'Financement par crédit bancaire',
                'Investissement',
                'Equipement',
                'Immobilier',
                'Trésorerie',
                'Autres',
                'Crédits <= 1 million',
                'Crédits > 1 million',
                'Financement de marché'
            ],
            outstanding: [2105.3, 1387.5, 1013.3, 634.1, 379.2, 296.5, 77.6,,,717.7],
            transactions: [45.9, 32.1,,,,,,,,13.9],
            newBusiness: [685.8,336.9,,,,,,119.1,217.9,348.9],
            protein: [1.0, 3.0, 4.0, 5.0, 3.5, 6.0, 3.0, 4.5],
            fiber: [2.0, 1.0, 0.5, 1.0, 0.5, 1.0, 2.0, 1.0],
            sugar: [10, 10, 15, 18, 14, 22, 19, 16],
            sodium: [5, 55, 47, 105, 90, 270, 140, 60],
            healthScore: [
                'healthy',
                'moderate',
                'unhealthy',
                'unhealthy',
                'moderate',
                'healthy',
                'moderate',
                'healthy'
            ]
        }
    },
    columnDefaults: {
        cells: {
            className: '{#if (eq value "1")}empty{/if}',
            formatter: function() {
                return formatNumber(this)
            }
        }
    },
    rendering: {
        theme: 'hcg-theme-default banque-france'
    },
    columns: [
        {
            id: 'protein',
            //className: 'empty',
            header: {
                className: 'empty',
            }
        }
    ]
});



function formatNumber(el) {
    const num = el.value
    //el.htmlElement.classList.remove('empty'); // clean up for sorting

    if (num === '' || num === null || num === undefined) {
        //el.htmlElement.classList.add('empty');
        return '';
    }

    if (typeof num === 'number' &&...