Unable to hide unused grid

This is related to this question
I tried the example in the answer & it worked. But if I put it inside a function it will throw TypeError.
Here are my codes, the only different from the example is that it calls setupTable() function:

<meta charset=”ISO-8859-1″>
<link href=”https://cdn.webdatarocks.com/latest/webdatarocks.min.css” rel=”stylesheet” />
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js”></script>
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.js”></script>
</head>
<body>
<div id=”wrap”>
<div id=”output”>
</div>
<script type=”text/javascript”>
setupTable();

function setupTable() {
var pivot = new WebDataRocks({
container: “#output”,
width: “100%”,
height: “100%”,
report: {
dataSource: {
filename: “https://cdn.webdatarocks.com/data/data.csv”
},
slice: {
rows: [{ uniqueName: “Color” }],
columns: [{ uniqueName: “Category” }, { uniqueName: “Country” }],
measures: [{ uniqueName: “Price” }]
},
options: {
grid: {
showTotals: “off”
}
}
}
});
webdatarocks.on(“reportchange”, ‘redraw’);
webdatarocks.on(“reportcomplete”, ‘redraw’);
function redraw() {
let col = 0, row = 0;
webdatarocks.customizeCell(function(cellStyle, cellData) {
if (cellData.columnIndex > col) col = cellData.columnIndex;
if (cellData.rowIndex > row) row = cellData.rowIndex;
});
webdatarocks.on(“aftergriddraw”, function() {
webdatarocks.off(“aftergriddraw”);
document.querySelector(“#wrap”).style.width = 100 * (col + 2) + ‘px’;
document.querySelector(“#wrap”).style.height = 30 * ++row + 27 + ‘px’;
});
}
}
</script>
</body>
</html>
 
The details of the error is:
webdatarocks.js:11 Uncaught TypeError: Cannot read property ‘call’ of undefined
at b.e.dispatch (webdatarocks.js:11)
at webdatarocks.js:1849
 
How to resolve this issue?