Advanced Table using HTML, CSS, and JavaScript with Sorting,...

Advanced Table using HTML, CSS, and JavaScript with Sorting, Filtering, Pagination, Search, and Extra UI Components

Posted 2025-02-27 10:16:00

414

Here's a complete step-by-step guide to creating an Advanced Table using HTML, CSS, and JavaScript with Sorting, Filtering, Pagination, Search, and Extra UI Components.

Step 1: Create the HTML Structure

This HTML file defines the table and includes UI components for search, pagination, and filtering.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="table-container">
        <h2>Advanced Table</h2>
        
        <input type="text" id="searchInput" placeholder="Search..." onkeyup="searchTable()">
        
        <label for="filter">Filter by Role:</label>
        <select id="filter" onchange="filterTable()">
            <option value="">All</option>
            <option value="Admin">Admin</option>
            <option value="User">User</option>
        </select>

        <table id="dataTable">
            <thead>
                <tr>
                    <th onclick="sortTable(0)">ID</th>
                    <th onclick="sortTable(1)">Name</th>
                    <th onclick="sortTable(2)">Email</th>
                    <th onclick="sortTable(3)">Role</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Admin</td></tr>
                <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>User</td></tr>
                <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Admin</td></tr>
                <tr><td>4</td><td>David</td><td>david@example.com</td><td>User</td></tr>
                <tr><td>5</td><td>Emma</td><td>emma@example.com</td><td>Admin</td></tr>
            </tbody>
        </table>

        <div class="pagination">
            <button onclick="prevPage()">Prev</button>
            <span id="pageInfo">Page 1</span>
            <button onclick="nextPage()">Next</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Style the Table with CSS

This styles.css file makes the table visually appealing.

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    text-align: center;
}

.table-container {
    width: 80%;
    margin: auto;
}

input, select {
    padding: 8px;
    margin-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

th:hover {
    background-color: #0056b3;
}

.pagination {
    margin-top: 10px;
}

.pagination button {
    padding: 8px;
    margin: 5px;
}

Step 3: Implement Sorting, Filtering, Search, and Pagination with JavaScript

This script.js file adds interactivity.

// Sorting Function
function sortTable(columnIndex) {
    let table = document.getElementById("dataTable");
    let rows = Array.from(table.rows).slice(1);
    let ascending = table.dataset.sortOrder !== "asc";

    rows.sort((rowA, rowB) => {
        let cellA = rowA.cells[columnIndex].textContent.trim();
        let cellB = rowB.cells[columnIndex].textContent.trim();

        return isNaN(cellA) || isNaN(cellB)
            ? cellA.localeCompare(cellB)
            : cellA - cellB;
    });

    if (!ascending) rows.reverse();
    
    table.tBodies[0].append(...rows);
    table.dataset.sortOrder = ascending ? "asc" : "desc";
}

// Search Function
function searchTable() {
    let input = document.getElementById("searchInput").value.toLowerCase();
    let rows = document.querySelectorAll("#dataTable tbody tr");

    rows.forEach(row => {
        let text = row.textContent.toLowerCase();
        row.style.display = text.includes(input) ? "" : "none";
    });
}

// Filter Function
function filterTable() {
    let filterValue = document.getElementById("filter").value;
    let rows = document.querySelectorAll("#dataTable tbody tr");

    rows.forEach(row => {
        let role = row.cells[3].textContent.trim();
        row.style.display = filterValue === "" || role === filterValue ? "" : "none";
    });
}

// Pagination
let currentPage = 1;
let rowsPerPage = 2;

function showPage(page) {
    let rows = document.querySelectorAll("#dataTable tbody tr");
    let totalPages = Math.ceil(rows.length / rowsPerPage);
    
    if (page < 1) page = 1;
    if (page > totalPages) page = totalPages;

    rows.forEach((row, index) => {
        row.style.display = (index >= (page - 1) * rowsPerPage && index < page * rowsPerPage) ? "" : "none";
    });

    document.getElementById("pageInfo").textContent = `Page ${page} of ${totalPages}`;
    currentPage = page;
}

function nextPage() {
    showPage(currentPage + 1);
}

function prevPage() {
    showPage(currentPage - 1);
}

// Initialize Pagination on Page Load
showPage(1);

How It Works

Sorting: Clicking on a column header sorts the table in ascending/descending order.
Search: Typing in the search box filters the table in real time.
Filtering: Selecting a role from the dropdown filters users based on role.
Pagination: The table displays only 2 rows per page, with "Next" and "Prev" buttons.

Next Steps

Add Edit/Delete buttons for each row.
Allow export to CSV functionality.
Fetch data dynamically from an API.

Would you like additional enhancements or explanations?

Please log in to like, share and comment!