JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<head>
<title>Load CSV</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"></link>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"></link>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://malsup.github.io/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>
<p>Load CSV</p>
<input type="file" id="input">
<hr/>
<table id="example">
</table>
</body>
JavaScript
function handleFiles() {
let file = this.files[0];
if (window.File && window.FileReader && window.FileList && window.Blob) {
if (csvs.indexOf(file.type) === -1) {
alert("Please only upload CSV files.");
} else {
$.blockUI();
let timer = {
start: moment()
};
Papa.parse(file, {
"download": true,
"header": true,
"dynamicTyping": true,
"complete": results => {
if ($.fn.DataTable.isDataTable("#example")) {
example.destroy();
$('#example').empty();
}
example = $("#example").DataTable({
"responsive": true,
"columns": results.meta.fields.map(c => ({
"title": c,
"data": c,
"visible": c.toLowerCase() !== "id",
"default": ""
})),
"data": results.data,
"drawCallback": function(settings) {
$.unblockUI();
timer.end = moment();
let duration = moment.duration(timer.end.diff(timer.start));
console.log("timer", timer);
console.log("duration", duration.asSeconds());
}
});
}
});
}
}
}
var csvs = ["text/csv", "application/vnd.ms-excel"];
$( document ).ready(function() {
let inputElement = document.getElementById("input"),
example = null;
inputElement.addEventListener("change", handleFiles, false);
});