JSFiddle - React, Tailwind, and code Playground

by draj8126

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<table id="ConsumptionTable" class="table  table-hover table-bordered"></table>

CSS

.add-btn {
  color: #048E3B;
  /* green color */
  cursor: pointer;
  margin-right: 6px;
}

.remove-btn {
  color: #A93636;
  /* red color */
  cursor: pointer;
  margin-right: 6px;
}

div.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}

table.table-bordered>thead>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 9pt;
  padding: 5px 5px 5px 5px;
  background-color: #697649;
  font-weight: normal;
  text-align: center;
  color: white;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid rgba(29, 150, 178, 1);
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 8pt;
  background-color: #C5E5EC;
  padding: 5px 5px 5px 5px;
  color: black;
}

JavaScript

function format(number, decimals = 2, locale = 'en-in') {
  const fixed = parseFloat(number).toFixed(decimals);
  const [float, dec] = fixed.split('.')
  const intFormatted = (+float).toLocaleString(locale)
  return intFormatted + (dec ? '.' + dec : '');
}
class CellEntry {

  constructor() {
    this.sum = 0;
    this.percentage = 0;
    this.Sales = 0;
  }
}

class OutletBasedRowEntry {
  constructor() {
    this.cells = {
      Total: new CellEntry(),

    };
    this.childRows = {};
  }
  add(entry) {
    var NetAmount = 0;
    var NetAmountSales = 0;
    if (entry.transactionType == "TransferIn") {
      NetAmount = entry.netamount
    }
    if (entry.transactionType == "Sales") {
      NetAmountSales = entry.netamount
    }

    this.cells.Total.sum += NetAmount || 0;
    this.cells.Total.Sales += NetAmountSales || 0;
    this.getOrCreateCellById(entry.outlet).Sales += NetAmountSales || 0;
    this.getOrCreateCellById(entry.outlet).sum += NetAmount || 0;

  }

  getOrCreateChildRowById(id) {
    if (!this.childRows[id]) this.childRows[id] = new OutletBasedRowEntry();
    return this.childRows[id];
  }
  getOrCreateCellById(id) {
    if (!this.cells[id]) this.cells[id] = new CellEntry();
    return this.cells[id];
  }
}

function tabulizeData(data) {
  let TotalRowEntry = new OutletBasedRowEntry();
  data.forEach(entry => {

    if (entry.transactionType == "TransferIn" && entry.brandname !== "NA" && entry.itemname !== "NA")

    {

      brandName = entry.brandname
      itemName = entry.itemname

    }
    TotalRowEntry.add(entry);
    TotalRowEntry.getOrCreateChildRowById(brandName).add(entry);
    TotalRowEntry.getOrCreateChildRowById(brandName).getOrCreateChildRowById(itemName).add(entry);

  });
  renderTable(TotalRowEntry);
}

function renderTable(TotalRowEntry) {
  let $table = $('#ConsumptionTable');
  let $thead = $('<thead><tr><th>Brand Name</th></tr><tr><th></th></tr><tr><th>Total</th></tr><thead>'),
    $tbody = $('<tbody>');
  let $headingRows...