Accessing JavaScript function written inside an iFrame

This might sound very trivial for all the web developers.
I am using iFrame to build my own custom table. I have written an HTML code inside an iframe which includes a table and a javascript function to access the data from the table. I am unable to access the javascript function(getCellData()) when I try to call the function from an onClick() event of a button on my main page.

I tried to call the function from the button,
{{showAlert(getCellData())}}

Could anyone please help me do that. Here is the code,

<html>
<head>
	<script>		
		function getCellData()
		{	
			let oTable = document.getElementById('myTable');
			let data = [...oTable.rows].map(t => [...t.children].map(u => u.innerText));
			return data;
		}
	</script>
</head>
<body>
<table id="myTable">
  <tr>
    <td>
		cell1
	</td>
    <td>
		cell2
	</td>
    <td>
		cell3
	</td>
	<td>
		cell4
	</td>
  </tr>
</table>
</body>
</html>

hey @Praveen, we are working on a feature that will enable communication within the parent container and the iframe (window.postMessage), once that feature is in, you will be able to implement this!