Oleg39reg/csv-viewer-with-html-css-javascript.markdown

## csv-viewer-with-html-css-javascript.markdown

      
    Raw
  

              csv-viewer-with-html-css-javascript.markdown
            
          
    CSV Viewer with HTML, CSS & JavaScript

Taken from my YouTube tutorial:
https://youtu.be/fwyN81KiAWU
In today's video we'll be creating a CSV Viewer that can be used on the web using HTML, CSS & JavaScript.
A Pen by Oleg39reg on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSV Viewer with HTML, CSS & JavaScript</title>
    </head>
    <body>
        <input type="file" id="csvFileInput" style="padding-bottom: 15px">
        <table id="csvRoot"></table>

      <script src="https://cdn.jsdelivr.net/npm/papaparse@5.2.0/papaparse.min.js"></script>
    </body>
</html>

## script.js
class TableCsv {
  /**
   * @param {HTMLTableElement} root The table element which will display the CSV data.
   */
  constructor(root) {
    this.root = root;
  }

  /**
   * Clears existing data in the table and replaces it with new data.
   *
   * @param {string[][]} data A 2D array of data to be used as the table body
   * @param {string[]} headerColumns List of headings to be used
   */
  update(data, headerColumns = []) {
    this.clear();
    this.setHeader(headerColumns);
    this.setBody(data);
  }

  /**
   * Clears all contents of the table (incl. the header).
   */
  clear() {
    this.root.innerHTML = "";
  }

  /**
   * Sets the table header.
   *
   * @param {string[]} headerColumns List of headings to be used
   */
  setHeader(headerColumns) {
    this.root.insertAdjacentHTML(
      "afterbegin",
      `
            <thead>
                <tr>
                    ${headerColumns.map((text) => `<th>${text}</th>`).join("")}
                </tr>
            </thead>
        `
    );
  }

  /**
   * Sets the table body.
   *
   * @param {string[][]} data A 2D array of data to be used as the table body
   */
  setBody(data) {
    const rowsHtml = data.map((row) => {
      return `
                <tr>
                    ${row.map((text) => `<td>${text}</td>`).join("")}
                </tr>
            `;
    });

    this.root.insertAdjacentHTML(
      "beforeend",
      `
            <tbody>
                ${rowsHtml.join("")}
            </tbody>
        `
    );
  }
}

const tableRoot = document.querySelector("#csvRoot");
const csvFileInput = document.querySelector("#csvFileInput");
const tableCsv = new TableCsv(tableRoot);

csvFileInput.addEventListener("change", (e) => {
  Papa.parse(csvFileInput.files[0], {
    delimiter: ",",
    skipEmptyLines: true,
    complete: (results) => {
      tableCsv.update(results.data.slice(1), results.data[0]);
    }
  });
});

## style.css
table {
  border-collapse: collapse;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
  font-size: 14px;
}

th {
  background: #009578;
  color: #ffffff;
  text-align: left;
}

th,
td {
  padding: 10px 20px;
}

tr:nth-child(even) {
  background: #eeeeee;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSV Viewer with HTML, CSS & JavaScript</title>
	</head>
	<body>
	<input type="file" id="csvFileInput" style="padding-bottom: 15px">
	<table id="csvRoot"></table>

	<script src="https://cdn.jsdelivr.net/npm/papaparse@5.2.0/papaparse.min.js"></script>
	</body>
	</html>
	class TableCsv {
	/**
	* @param {HTMLTableElement} root The table element which will display the CSV data.
	*/
	constructor(root) {
	this.root = root;
	}

	/**
	* Clears existing data in the table and replaces it with new data.
	*
	* @param {string[][]} data A 2D array of data to be used as the table body
	* @param {string[]} headerColumns List of headings to be used
	*/
	update(data, headerColumns = []) {
	this.clear();
	this.setHeader(headerColumns);
	this.setBody(data);
	}

	/**
	* Clears all contents of the table (incl. the header).
	*/
	clear() {
	this.root.innerHTML = "";
	}

	/**
	* Sets the table header.
	*
	* @param {string[]} headerColumns List of headings to be used
	*/
	setHeader(headerColumns) {
	this.root.insertAdjacentHTML(
	"afterbegin",
	`
	<thead>
	<tr>
	${headerColumns.map((text) => `<th>${text}</th>`).join("")}
	</tr>
	</thead>
	`
	);
	}

	/**
	* Sets the table body.
	*
	* @param {string[][]} data A 2D array of data to be used as the table body
	*/
	setBody(data) {
	const rowsHtml = data.map((row) => {
	return `
	<tr>
	${row.map((text) => `<td>${text}</td>`).join("")}
	</tr>
	`;
	});

	this.root.insertAdjacentHTML(
	"beforeend",
	`
	<tbody>
	${rowsHtml.join("")}
	</tbody>
	`
	);
	}
	}

	const tableRoot = document.querySelector("#csvRoot");
	const csvFileInput = document.querySelector("#csvFileInput");
	const tableCsv = new TableCsv(tableRoot);

	csvFileInput.addEventListener("change", (e) => {
	Papa.parse(csvFileInput.files[0], {
	delimiter: ",",
	skipEmptyLines: true,
	complete: (results) => {
	tableCsv.update(results.data.slice(1), results.data[0]);
	}
	});
	});
	table {
	border-collapse: collapse;
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	font-family: "Quicksand", sans-serif;
	font-weight: bold;
	font-size: 14px;
	}

	th {
	background: #009578;
	color: #ffffff;
	text-align: left;
	}

	th,
	td {
	padding: 10px 20px;
	}

	tr:nth-child(even) {
	background: #eeeeee;
	}