JSFiddle - React, Tailwind, and code Playground

Options

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="pivot-container"></div>

<datalist id="categories"></datalist>

CSS

.category-search {
  border: none;
  outline: none;
  padding: 8px;
}
.category-search::placeholder {
  color: black;
}

JavaScript

let allowedValues;

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  reportcomplete: () => {
    allowedValues = pivot.getMembers("Category").map((member) => member.caption)
    let memberListHtml = allowedValues
      .map((member) => ` <option value="${member}"></option>`)
      .join("")
    document.querySelector("#categories").innerHTML = memberListHtml
  },
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    options: {
      grid: {
        type: "flat",
      },
    },
  },
})

let valueTable = new Map()

function customizeCellFunction(cell, data) {
  if (
    data.hierarchy.uniqueName == "Category" &&
    data.type === "value" &&
    data.label
  ) {
    cell.style["z-index"] = 2
    let value = valueTable.get(data.rowIndex)
    cell.text = `<input onkeyup="prevent(event)" onkeydown="prevent(event)" list="categories" onchange="handleInputChange(this.value,${data.rowIndex})" class="category-search" placeholder="${value ? value : data.label}">`
  }
}

function prevent(event) {
	event.stopPropagation();
}

function handleInputChange(value, rowIndex) {
  if (allowedValues.includes(value)) {
    valueTable.set(rowIndex, value)
  }
  pivot.refresh()
}