index.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap 5.3.3 JSON Table</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
	<link href="floating-labels.css" rel="stylesheet">
	<style>
		th.sortable:hover {
			cursor: pointer;
			text-decoration: underline;
		}
		.toast:not(.show){
			display:block;
		}
		.toast.fade {
			opacity: 0;
		}
		.toast.fade.show {
			opacity: 1;
		}
	</style>
</head>
<body>
<div class="container-fluid mt-4 px-3">
	<div class="row-fluid">
		<div class="col-lg-12 col-xl-8 mx-auto">
			<div class="card">
				<div class="card-header border-bottom-0">
					<div class="col-6 ms-auto">
						<div class="input-group">
							<span class="input-group-text" id="globalSearchIcon"><i class="bi bi-search"></i></span>
							<input id="globalSearch" type="text" class="form-control" placeholder="Search all rows" aria-label="Search all rows">
						</div>
					</div>
				</div>
				<div class="table-responsive">
					<table id="jsonTable" class="table table-striped table-hover mb-0 border-top">
						<thead></thead>
						<tbody></tbody>
						<tfoot></tfoot>
					</table>
				</div>
				<div class="card-footer border-top-0">
					<nav>
						<ul id="pagination" class="pagination justify-content-end mb-0"></ul>
					</nav>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="editModalLabel">Edit Row</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary save-edit">Save Changes</button>
			</div>
		</div>
	</div>
</div>

<div id="toastContainer" aria-live="polite" aria-atomic="true"
	class="toast-container position-absolute top-50 start-50 translate-middle">
	<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<strong class="me-auto">Row Edit</strong>
			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
		</div>
		<div class="toast-body"></div>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="JsonTable.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
	const table = new JsonTable({
		jsonUrl: 'data.json',
		rowsPerPage: 5,
		container: '#jsonTable',
		globalSearch: '#globalSearch',
		pagination: '#pagination',
		allowEdit: true,
		editSaveUrl: 'test.json',
		editPlacement: 'start',
		editSaveAdditionalData: {"additional": "data"},
		columns: [
			{ key: 'ID', title: 'ID', searchType: false, editFieldType: false },
			{ key: 'FirstName', title: 'First Name', searchType: 'text', editFieldType: 'text', columnIcon: 'bi bi-person-raised-hand' },
			{ key: 'LastName', title: 'Last Name', searchType: 'text', editFieldType: 'text', columnIcon: 'bi bi-person-raised-hand' },
			{ key: 'Age', title: 'Age', searchType: 'select', editFieldType: 'number', columnIcon: 'bi bi-cake2' },
			{ key: 'City', title: 'City', searchType: 'text', editFieldType: 'text', columnIcon: 'bi bi-buildings' },
			{ key: 'State', title: 'State', searchType: 'text', editFieldType: 'text', columnIcon: 'bi bi-globe-americas' },
			{ key: 'Company', title: 'Company', searchType: 'text', editFieldType: 'text', columnIcon: 'bi bi-building' },
			{ key: 'JobTitle', title: 'JobTitle', searchType: 'text', editFieldType: 'text', columnIcon: 'bi bi-person-workspace' },
		]
	});
});
</script>
</body>
</html>