JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<link rel="stylesheet" href="https://cpprod1.catchpoint.com/ui/App_Themes/NewUI/css/all-min.css">

JavaScript

<script type='text/javascript'>
	document.addEventListener('DOMContentLoaded', function (event) {
		var width = 100, height = 20;

		var selector = CPVisualization.getContainerSelector();
		var visualization = CPVisualization.getData();
		var headers = visualization.headers;
		var metrics = headers.metrics;
		var data = visualization.data;

		var hasBreakdown1 = !!headers.breakdown1;
		var hasBreakdown2 = !!headers.breakdown2; 

		var arr = [], d, b1, b2, found, a;
		for (var i = 0; i < data.length; i++) {
			d = data[i];

			b1 = d.breakdown1;
			b2 = d.breakdown2;

			found = false;
			for (var j = 0; j < arr.length; j++) {
				a = arr[j];
				if (a[0] == b1 && a[1] == b2) {
					found = true;
					break;
				}
			}

			if (found) {
				for (var j = 0; j < d.metrics.length; j++) {
					a[j + 2].push(d.metrics[j]);
				}
			}
			else {
				a = [b1, b2];
				for (var j = 0; j < d.metrics.length; j++) {
					a.push([d.metrics[j]]);
				}

				arr.push(a);
			}
		}

		var table = d3.select(selector).append("table").attr("class", "sparkline-tbl");

		var thead = table.append("thead");
		if (hasBreakdown1) {
			thead.append("th").attr("data-sort", "b1").append("span").text(headers.breakdown1);
		}

		if (hasBreakdown2) {
			thead.append("th").attr("data-sort", "b2").append("span").text(headers.breakdown2);
		}

		thead.selectAll("th").on("click", function () {
			var el = d3.select(this);
			var sortBy = el.attr("data-sort");

			var func;
			var span = el.select("span");

			if ($(span[0]).hasClass("sort-asc")) {
				func = d3.descending;
				span.attr("class", "sort-desc");
			}
			else {
				func = d3.ascending;

				if (!$(span[0]).hasClass("sort-desc")) {
					thead.selectAll("span").attr("class", "");
				}

				span.attr("class", "sort-asc");
			}

			tr.sort(function (a, b) {
				if (sortBy == "b1") {
					return func(a[0], b[0]);
				}

				if (sortBy == "b2") {
					return func(a[1], b[1]);
				}
			});
		});

		for (var i = 0; i < metrics.length; i++)...