JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi"></script>
<div id="category_filter_container"></div>
<div id="summary_details_table"></div>
JavaScript
function drawChart() {
var data = google.visualization.arrayToDataTable([
['P/A', 'Value'],
['A', 10000],
['B', 500],
['C', 3000]
]);
var view = new google.visualization.DataView(data);
var category_Picker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
//'view': {'columns': [1,2,3,4,7,8]},
'containerId': 'category_filter_container',
'options': {
'filterColumnLabel': 'P/A',
'ui': {
'matchType':'any',
'label': '',
'caption':'All',
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'cssClass':'category_Picker_Class'
}
},
'state':{'selectedValues':['A']}
});
google.visualization.events.addListener(category_Picker, 'ready', function () {
$(".category_Picker_Class .charts-menu-button-caption").css({"color":"red"});
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'summary_details_table',
'options': {'allowHtml': true,'alternatingRowStyle':true,'width':'100%','height':'600px'}
});
// Create the dashboard.
var data_DashBoard = new google.visualization.Dashboard(document.getElementById('summary_details_table'))
.bind(category_Picker, table).draw(view);
}
google.load("visualization", "1", {packages:["controls"], callback: drawChart});