Csv Viewer With Html Css & Javascript

6 min read Jun 22, 2024

CSV Viewer with HTML, CSS & JavaScript

This article will guide you through creating a simple CSV viewer using HTML, CSS, and JavaScript. This viewer will allow you to upload a CSV file and display its contents in a user-friendly table format.

1. HTML Structure

First, we'll set up the basic HTML structure for our viewer. Create a file named index.html and paste the following code:




  CSV Viewer
  


  CSV Viewer

Explanation:

We have a basic HTML structure with a title "CSV Viewer".
An input element (<input type="file">) is used to allow users to choose a CSV file.
A table element (<table>) will be used to display the CSV data.
We link the external CSS file (style.css) and JavaScript file (script.js) for styling and functionality.

2. CSS Styling

Create a file named style.css and add the following CSS styles:

body {
  font-family: sans-serif;
}

#csvTable {
  border-collapse: collapse;
  width: 100%;
}

#csvTable th, #csvTable td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

#csvTable th {
  background-color: #f0f0f0;
}

Explanation:

We define basic body styles.
We style the table to have collapsing borders and adjust its width.
We add borders and padding to table cells (<th> and <td>).
We add a light gray background color to table headers (<th>).

3. JavaScript Functionality

Now, create a file named script.js and add the JavaScript code:

const csvFile = document.getElementById('csvFile');
const csvTable = document.getElementById('csvTable');

csvFile.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const csvData = event.target.result;
    const rows = csvData.split('\n');

    // Create table header row
    const headerRow = rows[0].split(',');
    const header = document.createElement('tr');
    headerRow.forEach(headerCell => {
      const th = document.createElement('th');
      th.textContent = headerCell;
      header.appendChild(th);
    });
    csvTable.appendChild(header);

    // Create data rows
    for (let i = 1; i < rows.length; i++) {
      const rowData = rows[i].split(',');
      const row = document.createElement('tr');
      rowData.forEach(cell => {
        const td = document.createElement('td');
        td.textContent = cell;
        row.appendChild(td);
      });
      csvTable.appendChild(row);
    }
  }

  reader.readAsText(file);
});

Explanation:

We get references to the file input and table elements.
We add an event listener to the file input. When a file is chosen, the event handler is triggered.
The event handler reads the file using FileReader.
Once the file is read, the CSV data is split into rows and columns.
We create table header cells from the first row.
We iterate through the remaining rows and create data cells for each row.
Finally, we append the header and data rows to the table.

4. Running the Viewer

Now you have all the files needed to create your CSV viewer. Save all the files in the same directory and open index.html in your browser. You can now choose a CSV file using the file input, and its contents will be displayed in a table format!

5. Enhancements

You can enhance the viewer by:

Adding error handling: Implement checks for invalid CSV files or unexpected data formats.
Styling improvements: Customize the table appearance with different colors, fonts, and layout.
Adding search functionality: Allow users to search within the displayed data.
Export functionality: Enable users to download the displayed data as a CSV file.

This simple example provides a foundation for building a more robust and feature-rich CSV viewer. Feel free to explore and implement your own customizations to make the viewer more suitable for your needs.

Csv Viewer With Html Css & Javascript