<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack UI - Tables</title>
</head>
<body>
<center>
<h1 style="margin: 2rem">Advanced and Custom tables using HTML CSS and JavaScript</h1>
</center>
<center>
<p><b>CREATED BY - </b> <a href="https://stackui.co/">Stack UI - Freeform UI Library</a> <b>| PATREON LINK - </b><a href="https://www.patreon.com/StackUI">Support on Patreon</a></p>
</center>
<div clas="table-container" style="width: 800px; margin: 0 auto; margin-top: 5%; margin-bottom: 5%"">
<h1 style=" margin-top: 10px;">Regular Tables</h1>
<hr>
<div class="stack-table-container-1">
<table class="stack-table-1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Michael Johnson</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<div class="stack-table-container-2">
<table class="stack-table-2">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Michael Johnson</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<div class="stack-table-container-3">
<table class="stack-table-3">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John Doe</td>
<td data-label="Age">25</td>
<td data-label="City">New York</td>
</tr>
<tr>
<td data-label="Name">Jane Smith</td>
<td data-label="Age">30</td>
<td data-label="City">Los Angeles</td>
</tr>
<tr>
<td data-label="Name">Michael Johnson</td>
<td data-label="Age">28</td>
<td data-label="City">Chicago</td>
</tr>
</tbody>
</table>
</div>
<h1 style="margin-top: 10%;">Filter table inspired by Datatable JS</h1>
<hr>
<div class="filter-table-container">
<input type="text" id="search-input" placeholder="Search the filter table...">
<table class="filter-table" id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John Doe</td>
<td data-label="Age">25</td>
<td data-label="City">New York</td>
</tr>
<tr>
<td data-label="Name">Jane Smith</td>
<td data-label="Age">30</td>
<td data-label="City">Los Angeles</td>
</tr>
<tr>
<td data-label="Name">Michael Johnson</td>
<td data-label="Age">28</td>
<td data-label="City">Chicago</td>
</tr>
<tr>
<td data-label="Name">Emily Davis</td>
<td data-label="Age">22</td>
<td data-label="City">San Francisco</td>
</tr>
<tr>
<td data-label="Name">Alex Turner</td>
<td data-label="Age">35</td>
<td data-label="City">Seattle</td>
</tr>
<tr>
<td data-label="Name">Jessica Brown</td>
<td data-label="Age">27</td>
<td data-label="City">Miami</td>
</tr>
</tbody>
</table>
<div class="filter-pagination" id="pagination"></div>
</div>
</div>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap");
body {
font-family: "Roboto", sans-serif;
background-color: #f1f1f1;
}
.stack-table-container-1 {
width: 100%;
}
table.stack-table-1 {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
width: 100%;
overflow: hidden;
background-color: #fff;
border-bottom: 2px solid #5783db;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table.stack-table-1 th,
td {
padding: 12px 15px;
}
table.stack-table-1 thead {
background-color: #5783db;
color: #fff;
text-align: left;
font-weight: bold;
}
table.stack-table-1 tr:nth-child(even) {
background-color: #f3f3f3;
font-weight: bold;
color: #5783db;
}
.stack-table-container-2 {
width: 100%;
}
table.stack-table-2 {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
width: 100%;
overflow: hidden;
background-color: #fff;
border-bottom: 2px solid #dd7973;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table.stack-table-2 th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table.stack-table-2 thead {
background-color: #dd7973;
color: #fff;
}
table.stack-table-2 td[data-label]:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
.stack-table-container-3 {
width: 100%;
}
table.stack-table-3 {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
width: 100%;
overflow: hidden;
background-color: #fff;
border-bottom: 2px solid #030712;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table.stack-table-3 th,
table.stack-table-3 td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
table.stack-table-3 thead {
background-color: #030712;
color: #fff;
}
table.stack-table-3 tbody tr:nth-child(even) {
background-color: #f4f6fb;
}
table.stack-table-3 tbody td[data-label]:before {
content: attr(data-label);
float: left;
font-weight: bold;
margin-right: 5px;
}
.filter-table-container {
width: 100%;
}
.filter-table-container #search-input {
width: 50%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
font-size: 14px;
margin-bottom: 2px;
float: right;
transition: border-color 0.3s ease;
}
table.filter-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
width: 100%;
overflow: hidden;
background-color: #fff;
border-bottom: 2px solid #00695c;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table.filter-table th,
table.filter-table td {
padding: 10px;
text-align: left;
}
table.filter-table thead {
background-color: #00695c;
color: #fff;
}
table.filter-table tbody tr:nth-child(even) {
background-color: #f4f6fb;
}
table.filter-table tbody td[data-label]:before {
content: attr(data-label);
float: left;
font-weight: bold;
margin-right: 5px;
}
.filter-pagination {
display: flex;
justify-content: right;
margin-top: 2px;
padding: 4px;
}
.filter-pagination button {
padding: 5px 15px;
margin: 0 2px;
cursor: pointer;
background-color: #fff;
color: #030712;
border: none;
border-radius: 3px;
transition: background-color 0.3s ease;
}
.filter-pagination button:hover {
background-color: #00695c;
color: #fff;
}
const table = document.getElementById("data-table");
const searchInput = document.getElementById("search-input");
const pagination = document.getElementById("pagination");
const clearIcon = document.querySelector(".clear-icon");
let currentPage = 1;
const rowsPerPage = 2;
function filterTable() {
const searchTerm = searchInput.value.toLowerCase();
const rows = table.getElementsByTagName("tr");
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
const cells = row.getElementsByTagName("td");
let found = false;
for (let cell of cells) {
if (cell.innerHTML.toLowerCase().includes(searchTerm)) {
found = true;
break;
}
}
row.style.display = found ? "" : "none";
}
if (searchTerm === "") {
currentPage = 1; // Reset current page to 1 when search is cleared
}
updatePagination();
}
function updatePagination() {
const rows = table.getElementsByTagName("tr");
const totalPages = Math.ceil((rows.length - 1) / rowsPerPage);
let paginationHtml = "";
if (totalPages > 1) {
paginationHtml += `<button class="page-button" data-page="1">First</button>`;
for (let i = 1; i <= totalPages; i++) {
paginationHtml += `<button class="page-button" data-page="${i}">${i}</button>`;
}
paginationHtml += `<button class="page-button" data-page="${totalPages}">Last</button>`;
}
pagination.innerHTML = paginationHtml;
const pageButtons = document.querySelectorAll(".page-button");
pageButtons.forEach((button) => {
button.addEventListener("click", () => {
if (button.classList.contains("disabled")) {
return;
}
currentPage = parseInt(button.getAttribute("data-page"));
showRows();
updatePagination();
});
});
// Disable "First" and "Last" buttons if necessary
if (currentPage === 1) {
pageButtons[0].classList.add("disabled");
} else {
pageButtons[0].classList.remove("disabled");
}
if (currentPage === totalPages) {
pageButtons[pageButtons.length - 1].classList.add("disabled");
} else {
pageButtons[pageButtons.length - 1].classList.remove("disabled");
}
}
function showRows() {
const rows = table.getElementsByTagName("tr");
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
if (
i >= (currentPage - 1) * rowsPerPage + 1 &&
i <= currentPage * rowsPerPage
) {
row.style.display = "";
} else {
row.style.display = "none";
}
}
}
searchInput.addEventListener("input", filterTable);
// Initial setup
filterTable();
updatePagination();
showRows();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.