Skip to content

Instantly share code, notes, and snippets.

@Oleg39reg

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

Created January 25, 2022 21:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Oleg39reg/91c36051e7fae053c2e9e5610003ef84 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Oleg39reg/91c36051e7fae053c2e9e5610003ef84 to your computer and use it in GitHub Desktop.
Download ZIP
CSV Viewer with HTML, CSS & JavaScript
Raw
csv-viewer-with-html-css-javascript.markdown
Raw
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>
Raw
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]);
}
});
});
Raw
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;
}
@chandra4in-droid
Copy link

chandra4in-droid commented Jan 23, 2026

<title>Simple POS Billing System</title> <style> body { font-family: sans-serif; padding: 20px; background-color: #f4f7f6; } .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } th { background-color: #007bff; color: white; } .controls { display: flex; gap: 10px; margin-bottom: 20px; } input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .summary { margin-top: 20px; text-align: right; font-size: 1.2em; } button { padding: 10px 15px; cursor: pointer; border: none; border-radius: 4px; color: white; } .btn-add { background-color: #28a745; } .btn-export { background-color: #17a2b8; } </style>

Billing System (IRD Compliant Format)

<div class="controls">
    <input type="text" id="itemDesc" placeholder="Item Name">
    <input type="number" id="itemPrice" placeholder="Price">
    <input type="number" id="itemQty" placeholder="Qty" value="1">
    <button class="btn-add" onclick="addItem()">Add Item</button>
</div>

<table id="billTable">
    <thead>
        <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Qty</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<div class="summary">
    <div>Sub-Total: <span id="subTotal">0.00</span></div>
    <div>VAT (13%): <span id="vatAmount">0.00</span></div>
    <hr>
    <strong style="color: #d9534f;">Grand Total: <span id="grandTotal">0.00</span></strong>
</div>

<br>
<button class="btn-export" onclick="exportToCSV()">Export to CSV (IRD Report)</button>
<script> let items = []; function addItem() { const desc = document.getElementById('itemDesc').value; const price = parseFloat(document.getElementById('itemPrice').value); const qty = parseInt(document.getElementById('itemQty').value); if (!desc || isNaN(price)) return alert("Please enter valid details"); const total = price * qty; items.push({ desc, price, qty, total }); updateTable(); clearInputs(); } function updateTable() { const tbody = document.querySelector('#billTable tbody'); tbody.innerHTML = ''; let subTotal = 0; items.forEach(item => { subTotal += item.total; tbody.innerHTML += `${item.desc}${item.price}${item.qty}${item.total.toFixed(2)}`; }); const vat = subTotal * 0.13; const grand = subTotal + vat; document.getElementById('subTotal').innerText = subTotal.toFixed(2); document.getElementById('vatAmount').innerText = vat.toFixed(2); document.getElementById('grandTotal').innerText = grand.toFixed(2); } function clearInputs() { document.getElementById('itemDesc').value = ''; document.getElementById('itemPrice').value = ''; document.getElementById('itemQty').value = '1'; } function exportToCSV() { let csvContent = "data:text/csv;charset=utf-8,Description,Price,Quantity,Total\n"; items.forEach(item => { csvContent += `${item.desc},${item.price},${item.qty},${item.total}\n`; }); const sub = document.getElementById('subTotal').innerText; const vat = document.getElementById('vatAmount').innerText; const total = document.getElementById('grandTotal').innerText; csvContent += `\nSub-Total,, ,${sub}\nVAT (13%),, ,${vat}\nGrand Total,, ,${total}`; const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "daily_sales_report.csv"); document.body.appendChild(link); link.click(); } </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment