Oleg39reg · January 25, 2022 21:47
diff --git a/csv-viewer-with-html-css-javascript.markdown b/csv-viewer-with-html-css-javascript.markdown
diff --git a/index.html b/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/[email protected]/papaparse.min.js"></script>
    </body>
 </html>
diff --git a/script.js b/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]);
    }
  });
 });
diff --git a/style.css b/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/[email protected]/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;
	}