Welcome folks today in this blog post we will be reading csv files and display it inside bootstrap table in browser using papaparse library. All the full source code of the application is shown below.
Get Started
In order to get started you need to include the cdn of the papaparse library as shown below inside the index.html file
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <input type="file" id="file-input" accept=".csv"> <table id="csv-table" class="table table-bordered"> <!-- table rows and columns will be added here dynamically --> </table> </div> </body> </html> |
As you can see we have also imported the bootstrap css cdn as well and then inside the html we have the simple input field where we allow the users to only upload the csv files by providing a accept attribute where we only accept the .csv extensions of the files. And then we have the table tag where we will be displaying the result of the csv file and we have attached some bootstrap classes to the table.
Now we need to add the javascript code required for this application. Just create a script.js file and copy paste the below code to it
script.js
|
1 2 |
const input = document.getElementById('file-input'); const table = document.getElementById('csv-table'); |
As you can see we are getting the references of the dom elements which includes the input field and the table. We are getting the references using their id.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
input.addEventListener('change', (event) => { const file = event.target.files[0]; Papa.parse(file, { header: true, complete: (results) => { // Clear the table table.innerHTML = ''; // Add the headers to the table const headers = results.meta.fields; const thead = document.createElement('thead'); const tr = document.createElement('tr'); headers.forEach((header) => { const th = document.createElement('th'); th.textContent = header; tr.appendChild(th); }); thead.appendChild(tr); table.appendChild(thead); // Add the rows to the table const tbody = document.createElement('tbody'); results.data.forEach((row) => { const tr = document.createElement('tr'); headers.forEach((header) => { const td = document.createElement('td'); td.textContent = row[header]; tr.appendChild(td); }); tbody.appendChild(tr); }); table.appendChild(tbody); } }); }); |
As you can see we have attached the onchange event listener to the input field such that when the file is changed or selected by the user then we are making use of the Papaparse library and using the parse() method to load the csv file and basically it takes the boolean parameter of headers to include the headers in the parsing process and then we have the complete event which basically executes after all the data inside the csv file is read. Inside it we are displaying all the headers of the csv file and then we are displaying all the rows of the csv file using the forEach loop And lastly we are adding the tr to the table tag using the appendChild() method.
Now if you open the index.html file inside the browser and select an csv file you will see the contents displayed inside the html5 table as shown below
Full Source Code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <input type="file" id="file-input" accept=".csv"> <table id="csv-table" class="table table-bordered"> <!-- table rows and columns will be added here dynamically --> </table> </div> </body> <script> const input = document.getElementById('file-input'); const table = document.getElementById('csv-table'); input.addEventListener('change', (event) => { const file = event.target.files[0]; Papa.parse(file, { header: true, complete: (results) => { // Clear the table table.innerHTML = ''; // Add the headers to the table const headers = results.meta.fields; const thead = document.createElement('thead'); const tr = document.createElement('tr'); headers.forEach((header) => { const th = document.createElement('th'); th.textContent = header; tr.appendChild(th); }); thead.appendChild(tr); table.appendChild(thead); // Add the rows to the table const tbody = document.createElement('tbody'); results.data.forEach((row) => { const tr = document.createElement('tr'); headers.forEach((header) => { const td = document.createElement('td'); td.textContent = row[header]; tr.appendChild(td); }); tbody.appendChild(tr); }); table.appendChild(tbody); } }); }); </script> </html> |
