JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        client_id: {
          type: 'number'
        },
        lm_customer_name: {
          type: 'string'
        },
        client_wins: {
          type: 'string'
        },
        city: {
          type: 'string'
        },
      }
    },
    "slice": {
      "rows": [{
        "uniqueName": "city"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "Clients",
          "formula": "distinctcount(\"client_id\")",
          "caption": "Clients"
        },
        {
          "uniqueName": "New Clients",
          "formula": "distinctcount(\"client_wins\")",
          "caption": "New Clients"
        },
        {
          "uniqueName": "Last Month Active Clients",
          "formula": "distinctcount(\"lm_customer_name\")",
          "caption": "Last Month Active Clients",
          "active": false
        },
        {
          "uniqueName": "Client Retention",
          "formula": "\"Clients\" - \"New Clients\" / \"Last Month Active Clients\"",
          "caption": "Client Retention",
          "format": "-19pif54cfgee00"
        }
      ]
    },
    "formats": [{
      "name": "-19pif54cfgee00",
      "decimalPlaces": 2
    }]
  }
});

function getData() {
  return [{
      "client_id": 0,
      "city": "Wedgewood"
    },
    {
      "lm_customer_name": "Angelia",
      "city": "Wedgewood"
    },
    {
      "client_wins": "Lynn",
      "city": "Wedgewood"
    },
    {
      "client_id": 3,
      "city": "Wedgewood"
    },
    {
      "lm_customer_name": "Watson",
      "city": "Chase"
    },
    {
      "client_id": 5,
      "city": "Chase"
    },
    {
      "client_id": 6,
      "city": "Chase"
    },
    {
      "client_id": 7,
      "city": "Chase"
    },
    {
      "client_id": 8,
     ...