JSFiddle - React, Tailwind, and code Playground

by rdillman

HTML

<table>
	<tbody>
		<tr data-name="Dreamstarter.com" data-fee="30" data-cost="62" data-members="1102000" data-visits="11">
			<td><b>Name:</b></td><td class="name"></td>
			<td><b>Yearly Fee:</b></td><td class="box fee"></td>
			<td><b>Visit Cost:</b></td><td class="box cost"></td>
			<td><b>Total Members:</b></td><td class="box members" ></td>
			<td><b>Avg Visits:</b></td><td class="box visits"></td>
			<td><b>Total Avg Cost:</b></td><td class="box total"></td>
		</tr>
		<tr data-name="webIntegrity.com" data-fee="32" data-cost="60" data-members="2100100" data-visits="10">
			<td><b>Name:</b></td><td class="name"></td>
			<td><b>Yearly Fee:</b></td><td class="box fee"></td>
			<td><b>Visit Cost:</b></td><td class="box cost"></td>
			<td><b>Total Members:</b></td><td class="box members" ></td>
			<td><b>Avg Visits:</b></td><td class="box visits"></td>
			<td><b>Total Avg Cost:</b></td><td class="box total"></td>
		</tr>
		<tr data-name="CatalpaSoft.com"  data-fee="31" data-cost="59" data-members="1109000" data-visits="7">
			<td><b>Name:</b></td><td class="name"></td>
			<td><b>Yearly Fee:</b></td><td class="box fee"></td>
			<td><b>Visit Cost:</b></td><td class="box cost"></td>
			<td><b>Total Members:</b></td><td class="box members" ></td>
			<td><b>Avg Visits:</b></td><td class="box visits"></td>
			<td><b>Total Avg Cost:</b></td><td class="box total"></td>
		</tr>
	</tbody>
</table>

CSS

.box {border: 1px solid #000; padding: 2px 6px;}

JavaScript

/**
 * Convert a string number into an actual number with commas and decimal places.
 *  devided into Millions or Thousands with character after
 *
 * @param      {number}  value - The value to cbe converted
 * @param      {number}  decimals - The decimal
 * @param      {string}  split - A character to denote how to devide this number accepts 'M' or 'K'.
 * @param      {string}  symbol - The symbol to put before this ammout '$'.
 * @return     {string}  Returns a stringified number.
 * @example
 *   formatted(1102000.322, 2, 'M', '$')  // returns "$1.10 M"
 *   formatted(1102000.322, 2, 'K', '$')  // returns "$1,102.00 K"
 *   formatted(1102000.322, 2, 'K')  // returns "1,102.00 K"
 */
function formatted(value, decimals, split, symbol) {
  var pre = symbol === '$' ? '$' : '';
  var reducer = split === 'M' ? 1000000 : split === 'K' ? 1000 : 1;
  var num = parseFloat(value);
  var frac =  { 'minimumFractionDigits': decimals,'maximumFractionDigits': decimals };
  var formatNum = (num / reducer).toLocaleString(undefined, frac);
  return  pre  + formatNum + ' ' + (split || '');
}

(function () {
  [].slice.call(document.querySelectorAll('tr')).map(function (item) {
  	var d = item.dataset
    item.querySelector('.name').innerText = d.name;
    item.querySelector('.fee').innerText = formatted(d.fee * 12, 2, null, '$');
    item.querySelector('.cost').innerText = formatted(d.cost, 2, null, '$');
    item.querySelector('.members').innerText = formatted(d.members, 1, 'K');
    item.querySelector('.visits').innerText = d.visits;
    var total = parseFloat(d.fee) * 12 * parseFloat(d.cost) * parseFloat(d.members) * parseFloat(d.visits);
    item.querySelector('.total').innerText = formatted(total, 1, 'M', '$');
  });
})();