JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>

<div id="container"></div>
<p class="highcharts-description">
    A simple DataGrid with a custom cell format. Some of the changes:
    <ul>
        <li>The salary is formatted to a currency string with `k` abbreviation.</li>
        <li>The entire row is highlighted if the salary is greater than 50k.</li>
        <li>The performance value is highlighted green if it is greater than 80 and red if it is less than 80.</li>
        <li>Change font-weight and alignment in first column</li>
        <li>Any cell that has a value greater than 30 is highlighted purple.</li>
    </ul>
</p>

CSS

@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

#container {
    height: 235px;
    margin: 8px;
}

.highcharts-description {
    padding-left: 10px;
}

.highcharts-datagrid-table tbody tr.highcharts-datagrid-row:has(td.highlight-cell) {
    background-color: #f0f2ca;
}

/* stylelint-disable max-line-length */
.highcharts-datagrid-table tbody tr.highcharts-datagrid-hovered-row:has(td.highlight-cell),
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row.highcharts-datagrid-row-odd.highcharts-datagrid-hovered-row:has(td.highlight-cell),
.highcharts-datagrid-table tbody tr.highcharts-datagrid-hovered-row td.highcharts-datagrid-hovered-column.highlight-column,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-hovered-row .highlight-column,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row.highcharts-datagrid-row-odd.highcharts-datagrid-hovered-row .highlight-column {
    background-color: var(--highcharts-highlight-color-10);
}
/* stylelint-enable max-line-length */


/* Custom classes added to the DataGrid */
.bold-column {
    font-weight: bold;
    text-align: center;
}

.high-color {
    color: #3ea100;
    font-weight: bold;
}

.low-color {
    color: #c11a1a;
    font-weight: bold;
}

.over-30 {
    color: #8c00ff;
    font-weight: bold;
}

JavaScript

DataGrid.dataGrid('container', {
    dataTable: {
        columns: {
            ID: [1, 2, 3, 4, 5],
            Name: ['Alice', 'Bob', 'Charlie', 'David', 'Eve'],
            Age: [28, 35, 40, 23, 30],
            Department: ['HR', 'Engineering', 'Sales', 'Marketing', 'Finance'],
            Salary: [50000, 75000, 55000, 45000, 65000],
            PerformanceScore: [85, 70, 95, 60, 88]
        }
    },
    columnDefaults: {
        cells: {
            className: '{#if (gt value 30)}over-30{/if}'
        }
    },
    columns: [{
        id: 'ID',
        cells: {
            className: 'bold-column'
        }
    }, {
        id: 'Salary',
        cells: {
            className: '{#if (gt value 50000)}highlight-cell{/if}',
            format: '${(divide value 1000):.0f}k'
        }
    }, {
        id: 'PerformanceScore',
        cells: {
            className: '{#if (gt value 80)}high{else}low{/if}-color'
        },
        header: {
            format: 'Performance score (0-100)'
        }
    }]
});