JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://rawgit.com/Mottie/tablesorter/master/css/theme.blue.css">
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.widgets.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-sortTbodies.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
<div id="table-wrapper">
  <table id="table" class="tablesorter-blue paginated">
  </table>
  <div id="toggle-buttons">
    <button class="button" data-id="first">
              First Page
            </button>
    <button class="button disabled" data-id="previous">
              Prev Page
            </button>
    <button class="button" data-id="next">
              Next Page
            </button>
  <button class="button" data-id="last">
              Last Page
            </button>            
                <button class="button" id="all-button">
              Show All
            </button>
  </div>
</div>

CSS

/* Make the primary row stand out */

  .tablesorter tbody tr.summary td {
    background: #d7e5f3;
    color: black;
  }

  /* dark border to make each tbody distinct */

  #table tbody tr.main td {
    border-top: 1px solid #777;
    /* main row is clickable; toggle sibling/child rows */
    cursor: pointer;
  }

  .disabled {
    color: gray;
  }

  #table {
    margin: 5px;
  }

  #previous-button {
    margin-left: 5px;
    margin-right: 5px;
  }

  #next-button {
    margin-left: 5px;
  }

  #last-button {
    margin-left: 5px;
  }

  .summary td {
    font-weight: bold;
    /* background-color: lightgrey; */
    cursor: pointer;
  }

JavaScript

console.log('The final data will get sent to a table here');
const merged = [{
    date: "2018-10-18",
    affiliateId: "1234",
    spend: 5.00,
    revenue: .75,
    cpc: .12,
    rpc: .50,
    rpa: .05,
    profit: -5.1,
    Clicks: 34,
    Conversions: 4,
    profitMargin: -2,
    Campaign_Name: "Test campaign",
    affiliate: "test affiliate"
  },
  {
    date: "2018-10-18",
    affiliateId: "9876",
    spend: 1.00,
    revenue: 5.00,
    cpc: .02,
    rpc: .10,
    rpa: .15,
    profit: 4.1,
    profitMargin: 7,
    Campaign_Name: "Reed",
    affiliate: "Store",
    Clicks: 34,
    Conversions: 4,
    advertiser: "skdjfh"
  },
  {
    date: "2018-10-18",
    affiliateId: "4567",
    spend: .40,
    revenue: .5,
    cpc: .1,
    rpc: .01,
    rpa: .01,
    profit: .1,
    profitMargin: 0,
    Campaign_Name: "Driver",
    affiliate: "Insurance",
    Clicks: 34,
    Conversions: 4,
    advertiser: "skdjfh"
  },
  {
    date: "2018-10-17",
    affiliateId: "1234",
    spend: .30,
    revenue: .50,
    cpc: .03,
    rpc: .40,
    rpa: .02,
    profit: .13,
    profitMargin: 2,
    Campaign_Name: "Test campaign",
    Clicks: 34,
    Conversions: 4,
    affiliate: "test affiliate",
    advertiser: "skdjfh"
  },
  {
    date: "2018-10-17",
    affiliateId: "9876",
    spend: 4.00,
    revenue: .5,
    cpc: .13,
    rpc: .07,
    Clicks: 34,
    Conversions: 4,
    rpa: .01,
    profit: .71,
    profitMargin: 4,
    Campaign_Name: "Reed",
    affiliate: "Store",
    advertiser: "skdjfh"
  },
  {
    date: "2018-10-17",
    Clicks: 34,
    Conversions: 4,
    affiliateId: "4567",
    spend: .64,
    revenue: 5.44,
    cpc: .12,
    rpc: .76,
    rpa: .88,
    profit: -5.1,
    profitMargin: -7,
    Campaign_Name: "Driver",
    affiliate: "Insurance",
    advertiser: "skdjfh"
  },
  {
    date: "2018-10-16",
    Clicks: 34,
    Conversions: 4,
    affiliateId: "1234",
    spend: .11,
    revenue: 7.0,
    cpc: .12,
    rpc: .67,
    rpa: .05,
    profit: .64,
   ...