JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>

JavaScript

$(function () {
var data = [
            { id: 0, month: "January", min: 0, max: 750, consumption: 555, production: 550, ranges: [{ start: 0, end: 500 }, { start: 500, end: 640 }, { start: 640, end: 750 }] },
            { id: 1, month: "February", min: 0, max: 750, consumption: 670, production: 620, ranges: [{ start: 0, end: 333 }, { start: 333, end: 567 }, { start: 567, end: 750 }] },
            { id: 2, month: "March", min: 0, max: 750, consumption: 670, production: 700, ranges: [{ start: 0, end: 320 }, { start: 320, end: 567 }, { start: 567, end: 750 }] },
            { id: 3, month: "April", min: 0, max: 750, consumption: 610, production: 666, ranges: [{ start: 0, end: 320 }, { start: 320, end: 567 }, { start: 567, end: 750 }] }
        ], bg;

        $(function () {

            $("#grid").igGrid({
                primaryKey:"id",
                columns: [
                    { headerText: "id", key: "id", dataType: "number", hidden: true },
                    { headerText: "Month", key: "month", dataType: "string", width: 100 },
                    { headerText: "Consumption (TWh)", key: "consumption", dataType: "number", width: 130 },
                    { headerText: "Production (TWh)", key: "production", dataType: "number", width: 120 },
                    { headerText: "Consumption Graph (TWh)", key: "graph", width: 470, template: "<div class='bullet-graph'></div>" }
                ],
                dataSource: data,
                autoGenerateColumns: false,
                rowsRendered: function (evt, ui) {
                    $(".bullet-graph").each(function (i) {
                        var item = data[i];
                        $(this).igBulletGraph({
                            height: "60px",
                            width: "450px",
                            backingBrush: 'transparent',
                            backingOutline: 'transparent',
                            minimumValue: item.min,
                           ...