JSFiddle - React, Tailwind, and code Playground

by yashnigam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.3/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row content">
    <div class="col-md-8" style:"padding-left:20px">          
        <div class="row marginClass">
            <h4 class="pull-left" id="Introduction"><small>Fictitious Company Data | Drilldown Example |  </small></h4>
            <h6 class="dc-data-count" style="float: left;margin-left:5px;">
                   
                    <span>
                        <span class="filter-count"></span>
                         selected out of 
                        <span class="total-count"></span>
                         records |  
                        <a  id="reset" > Reset All</a>
                      </span>
                
                    </h6>
        
          
      </div>
      
     
    <div class="col-md-6">
    
            <br>
           <a  id="resetTable"  href="javascript:marketTable.filter(null);dc.renderAll();"> Reset</a>
            <table class="table" id="Markets">
                <thead>
                    <tr>
                      <th>Market</th>
                      <th>Cost</th>
                      <th>Volume</th>
                      <th>Average</th>    
                    </tr>
                </thead>
           </table>

           
           <hr>

           <table class="table" id="Clients">
            <thead>
                <tr>
                  <th>Vendor</th>
                  <th>Cost</th>
                 ...

JavaScript

var marketTable = dc.dataTable("#Markets");
var clientTable = dc.dataTable("#Clients");
var CategoryTable = dc.dataTable("#CAT");


data = [{"Month":1,"Location":"CANADA","Vendor":"Amazon","Category":"Fruits And Vegetables","Product":"Grapes","TotalCost":35536,"Quantity":1220},{"Month":1,"Location":"EUROPE","Vendor":"Walmart","Category":"Electronics","Product":"TV","TotalCost":59319,"Quantity":140},{"Month":1,"Location":"CANADA","Vendor":"Walmart","Category":"Electronics","Product":"TV","TotalCost":40438,"Quantity":100},{"Month":2,"Location":"EUROPE","Vendor":"Walmart","Category":"Fruits And Vegetables","Product":"Apples","TotalCost":46077,"Quantity":3000},{"Month":3,"Location":"EUROPE","Vendor":"Amazon","Category":"Fruits And Vegetables","Product":"Broccoli","TotalCost":55418,"Quantity":12000},{"Month":3,"Location":"USA","Vendor":"Walmart","Category":"Furniture","Product":"Sofa","TotalCost":46413,"Quantity":90},{"Month":3,"Location":"EUROPE","Vendor":"Walmart","Category":"Fruits And Vegetables","Product":"Apples","TotalCost":39798,"Quantity":8000},{"Month":3,"Location":"CANADA","Vendor":"Walmart","Category":"Furniture","Product":"Sofa","TotalCost":22198,"Quantity":50},{"Month":4,"Location":"EUROPE","Vendor":"COSTCO","Category":"Furniture","Product":"Dining Table","TotalCost":22198,"Quantity":100},{"Month":4,"Location":"CANADA","Vendor":"Amazon","Category":"Electronics","Product":"Laptop","TotalCost":41998,"Quantity":300},{"Month":4,"Location":"EUROPE","Vendor":"COSTCO","Category":"Fruits And Vegetables","Product":"Broccoli","TotalCost":39498,"Quantity":8000},{"Month":5,"Location":"EUROPE","Vendor":"Amazon","Category":"Electronics","Product":"Iphone","TotalCost":42298,"Quantity":300},{"Month":5,"Location":"USA","Vendor":"Walmart","Category":"Furniture","Product":"Sofa","TotalCost":39165,"Quantity":300},{"Month":5,"Location":"CANADA","Vendor":"Walmart","Category":"Fruits And...