Dynamic HTML table from CSV file - html

Question

I have a simple csv file. Sample data is given below (sample.csv).
date,team_1,team_2
2019-06-12,AUS,PAK
2019-06-13,IND,NZ
I want the above to be displayed as a table in a HTML page, such that new rows will automatically add to the table as and when a new record is added to the csv file.
Can someone please help me with a very simple solution?
EDIT: Based on answer to this question, I have written (copied) the following piece of code, but other than the first line, it does not show anything.
function createTable() {
var array = [
["date","team_1","team_2"],
["2019-06-12","AUS","PAK"],
["2019-06-13","IND","NZ"]
];
var content = "";
array.forEach(function(row) {
content += "<tr>";
row.forEach(function(cell) {
content += "<td>" + cell + "</td>";
});
content += "</tr>";
});
document.getElementById("t1").innerHTML = content;
}
createTable()
<table id="t1"> </table>

Answer 1

Here this code works correctly. Open a file.csv as you described. When you add or delete line in the CSV it works accordingly in the HTML page.
var init;
const logFileText = async file => {
const response = await fetch(file);
const text = await response.text();
all = text.split('\n');
if (init !== all.length) {
//console.log(all.length, init);
init = all.length;
//console.log('changed');
var arr=[];
all.forEach(el => {
el=el.split(',');
arr.push(el);
});
// console.log(arr);
createTable(arr);
}
}
function createTable(array) {
var content = "";
array.forEach(function (row) {
content += "<tr>";
row.forEach(function (cell) {
content += "<td>" + cell + "</td>";
});
content += "</tr>";
});
document.getElementById("t1").innerHTML = content;
}
var file = 'file.csv';
logFileText(file);
setInterval(async () => {
await logFileText(file);
}, 2000);
<table id="t1"> </table>