jubilancy · April 15, 2026 21:27
diff --git a/universal_table.js b/universal_table.js
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Universal CSV Viewer</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

    <style>
        :root {
            --bg: #0d1117; --card: #161b22; --text: #c9d1d9; --blue: #58a6ff; --border: #30363d;
        }
        body { background: var(--bg); color: var(--text); padding: 20px; font-family: sans-serif; }
        .container-fluid { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; }
        table.dataTable { background-color: var(--card) !important; color: var(--text) !important; }
        .thead-dark th { background-color: #21262d !important; color: var(--blue) !important; border-bottom: 2px solid var(--border) !important; }
        .dataTables_wrapper .dataTables_filter input { background: var(--bg); border: 1px solid var(--border); color: white; border-radius: 5px; }
    </style>
 </head>
 <body>

    <div class="container-fluid">
        <h2 id="table-title">Spreadsheet Viewer</h2>
        <div id="table-container"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-csv@1.0.11/src/jquery.csv.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

    <script>
        // UNIVERSAL LIBRARY LOGIC
        var UniversalTable = {
            init: function(csvFile) {
                $.get(csvFile).then(function(data) {
                    const csvData = $.csv.toArrays(data);
                    let html = '<table class="table table-striped table-bordered" id="main-table"><thead class="thead-dark"><tr>';
                    
                    // Auto-generate Headers
                    csvData[0].forEach(header => { html += `<th>${header}</th>`; });
                    html += '</tr></thead><tbody>';
                    
                    // Auto-generate Rows & Detect Links
                    for (let i = 1; i < csvData.length; i++) {
                        html += '<tr>';
                        csvData[i].forEach(cell => {
                            let content = cell;
                            // Auto-link Detection: if it looks like a URL, make it a link
                            if (cell && (cell.startsWith('http') || cell.includes('github.com'))) {
                                content = `<a href="${cell}" target="_blank" style="color:var(--blue)">Link</a>`;
                            }
                            html += `<td>${content}</td>`;
                        });
                        html += '</tr>';
                    }
                    html += '</tbody></table>';
                    
                    $('#table-container').html(html);
                    $('#main-table').DataTable({ "scrollX": true, "pageLength": 15 });
                    $('#table-title').text(csvFile.replace('.csv', '').replace('_', ' '));
                }).catch(() => {
                    $('#table-container').html('<div class="alert alert-danger">Error: Could not find "example.csv" in this folder.</div>');
                });
            }
        };

        // This line makes it adapt to "example.csv" automatically
        $(document).ready(function() {
            UniversalTable.init("example.csv"); 
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Universal CSV Viewer</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

	<style>
	:root {
	--bg: #0d1117; --card: #161b22; --text: #c9d1d9; --blue: #58a6ff; --border: #30363d;
	}
	body { background: var(--bg); color: var(--text); padding: 20px; font-family: sans-serif; }
	.container-fluid { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; }
	table.dataTable { background-color: var(--card) !important; color: var(--text) !important; }
	.thead-dark th { background-color: #21262d !important; color: var(--blue) !important; border-bottom: 2px solid var(--border) !important; }
	.dataTables_wrapper .dataTables_filter input { background: var(--bg); border: 1px solid var(--border); color: white; border-radius: 5px; }
	</style>
	</head>
	<body>

	<div class="container-fluid">
	<h2 id="table-title">Spreadsheet Viewer</h2>
	<div id="table-container"></div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery-csv@1.0.11/src/jquery.csv.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

	<script>
	// UNIVERSAL LIBRARY LOGIC
	var UniversalTable = {
	init: function(csvFile) {
	$.get(csvFile).then(function(data) {
	const csvData = $.csv.toArrays(data);
	let html = '<table class="table table-striped table-bordered" id="main-table"><thead class="thead-dark"><tr>';

	// Auto-generate Headers
	csvData[0].forEach(header => { html += `<th>${header}</th>`; });
	html += '</tr></thead><tbody>';

	// Auto-generate Rows & Detect Links
	for (let i = 1; i < csvData.length; i++) {
	html += '<tr>';
	csvData[i].forEach(cell => {
	let content = cell;
	// Auto-link Detection: if it looks like a URL, make it a link
	if (cell && (cell.startsWith('http') \|\| cell.includes('github.com'))) {
	content = `<a href="${cell}" target="_blank" style="color:var(--blue)">Link</a>`;
	}
	html += `<td>${content}</td>`;
	});
	html += '</tr>';
	}
	html += '</tbody></table>';

	$('#table-container').html(html);
	$('#main-table').DataTable({ "scrollX": true, "pageLength": 15 });
	$('#table-title').text(csvFile.replace('.csv', '').replace('_', ' '));
	}).catch(() => {
	$('#table-container').html('<div class="alert alert-danger">Error: Could not find "example.csv" in this folder.</div>');
	});
	}
	};

	// This line makes it adapt to "example.csv" automatically
	$(document).ready(function() {
	UniversalTable.init("example.csv");
	});
	</script>
	</body>
	</html>
No results found