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>

<p>
  Start typing to search through Countries
</p>
<input name="search" type="text" id="search" placeholder="Search..." />
<br>


<div id="pivot-container"></div>

CSS

input {
  margin: 10px;
  border: none;
  border-bottom: solid 1px black;
  height: 25px;
  padding: 3px;
}

input:active, input:focus-visible {
  border: none;
  border-bottom: solid 2px black;
  outline: none;
  background-color: #f0f0f0
}

p {
  font-size: 15px;
  line-height: 1.5;
  padding-right: 10px;
  padding-left: 10px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
    licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 470,
  report: {
    dataSource: {
      filename: "data/retail-data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
        },
      ],
    },
  },
});

const searchElement = document.getElementById("search");

searchElement.addEventListener("input", function(event) {
  const inputValue = event.target.value;
  setFilter(inputValue);
});

function setFilter(input) {
  flexmonster.setFilter("Country", {
    query: {
      contain: input,
    },
  });
}