JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="demo-explanation">
    <h3>Demo Instructions</h3>
    
    <div class="console-info">
        <p>💡 <strong>Check the browser console</strong> after clicking each button to see the filter structure being automatically modified when only the data changes.</p>
        <p>The console will display the current filter configuration, showing how Flexmonster converts <code>exclude</code> to <code>members</code> when filtered data is not present.</p>
    </div>

    <p>Click the buttons below to see how the filter structure changes when data is modified:</p>
    
    <div class="button-container">
        <button id="setData1" class="demo-btn" onclick="setData1()">setData1</button>
        <button id="setData2" class="demo-btn" onclick="setData2()">setData2</button>
    </div>
</div>

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

CSS

.demo-explanation {
    border: 2px solid #e3f2fd;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    background-color: #f8fdff;
    font-family: Arial, sans-serif;
}

.demo-explanation h3 {
    color: #1976d2;
    margin-top: 0;
    border-bottom: 1px solid #e3f2fd;
    padding-bottom: 10px;
}

.button-container {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}

.demo-btn {
    background-color: #1976d2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.demo-btn:hover {
    background-color: #1565c0;
}

.console-info {
    background-color: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 15px;
    border-radius: 0 5px 5px 0;
    margin-top: 15px;
}

.console-info p {
    margin: 8px 0;
    color: #5d4037;
    font-size: 14px;
}

.console-info code {
    background-color: #ffecb3;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

JavaScript

var jsonData1 = [{
	    "Color": "green",
	    "Country": "Canada",
	    "State": "Ontario",
	    "City": "Toronto",
	    "Price": 174,
	    "Quantity": 22
	  },
	  {
	    "Color": "red",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 166,
	    "Quantity": 19
	  },
	  {
	    "Color": "red",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 166,
	    "Quantity": 11
	  },
	  {
	    "Color": "blue",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 152,
	    "Quantity": 16
	  }
	];
	var jsonData2 = [{
	    "Color": "green",
	    "Country": "Canada",
	    "State": "Ontario",
	    "City": "Toronto",
	    "Price": 174,
	    "Quantity": 22
	  },
	  {
	    "Color": "blue",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 152,
	    "Quantity": 16
	  }
	];
  
  var pivotFlex = {
	  container: "pivot-container",
	  componentFolder: "https://cdn.flexmonster.com/",
	  toolbar: true,
	  report: {
	    dataSource: {
	      data: jsonData1
	    },
			options: {
				filter: {
					allowEmptyMembersFilter: true
				}
			},
	    slice: {
					columns: [{
					uniqueName: "[Measures]"
				}],
					measures: [{
					aggregation: "sum",
					uniqueName: "Price"
				}],
					rows: [{
							uniqueName: "Country"
						}, {
							filter: {
								exclude: ["color.[red]","color.[orange]"]
							},
						uniqueName: "Color"
					}]
			}
	  }
	}

	var pivot = new Flexmonster(pivotFlex);
	pivot.on('reportcomplete', function () {
		console.log('Report filter: ', pivot.getReport().slice.rows.find(item => item.filter));
	});
	
	function setData1() {
		let _pivotFlex = pivotFlex
		_pivotFlex.report.dataSource.data = jsonData1
	  pivot.setReport(_pivotFlex.report);
		
	}

	function setData2() {
		let _pivotFlex =...