JSFiddle - React, Tailwind, and code Playground

Mapping configuration

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: '#pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  width: '100%',
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      type: 'api',
      url: 'https://olap.flexmonster.com:9500',
      index: 'fm-product-sales',
      mapping: {
        Category: {
          filters: {
            members: false,
          },
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: 'Category',
        },
      ],
      columns: [
        {
          uniqueName: 'Color',
        },
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'Price',
        },
      ],
    },
  },
  reportcomplete: () => {
    pivot.off('reportcomplete');
    pivot.setFilter('Category', {
      members: ['category.[bikes]', 'category.[cars]'],
    });
  },
  filteropen: addClearFilter,
  filterclose: removeClearFilterButton,
});
function addClearFilterButton() {
  let clearFilterButton = document.createElement('a');
  clearFilterButton.classList = 'fm-ui-element fm-ui fm-ui-link-btn fm-muted';
  clearFilterButton.role = 'button';
  clearFilterButton.id = 'clearFilterButtonX';
  clearFilterButton.textContent = 'Clear selection filter';
  const clearFilterWrap = document.createElement('div');
  clearFilterWrap.append(clearFilterButton);
  const filterViewContent = document.querySelector(
    '.fm-filter-view .fm-filter-view-content',
  );
  filterViewContent.append(clearFilterWrap);
  clearFilterCreated = true;
}

function addClearFilter(params) {
  let membersList = document.querySelector(
    '.fm-filter-view .fm-filter-view-content .fm-filters-table',
  );
  if (!membersList || membersList.style.display != 'none') {
    return;
  }
  addClearFilterButton();

  let clearFilterButton = document.querySelector(
    '.fm-filter-view .fm-filter-view-content...