JSFiddle - React, Tailwind, and code Playground

Events

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>

<button onclick="loadIncorrectData()">Load data</button>

<p>
Press the "LOAD DATA" button to trigger the "dataerror" event. Flexmonster's error pop=up would be immediately closed with mutation observer.
</p>

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

CSS

/* #fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-ui-window.fm-ui-popup.fm-alert-view.fm-layout-tablet {
  display: none !important;
} */

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 340,
})

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    const okButton = document.querySelector(
      "div.fm-ui-popup.fm-alert-view div > button",
    )
    if (okButton) {
      okButton.click()
      console.log("An error pop-up is automatically closed.")
    }
  }
})

observer.observe(document.querySelector("#fm-pivot-view"), {
  childList: true,
  subtree: true,
})

function loadIncorrectData() {
  pivot.connectTo({
    filename: "data/datas.csv",
  })
}