Column Chooser Example In HTML And JavaScript

Column Chooser Example In HTML And JavaScript.

rajeshAugust 1, 2024

297 2 minutes read

Dynamic Column Chooser Tutorial.

Unlock the potential of your web applications with our comprehensive guide to implementing a dynamic column chooser. This blog post dives into the step-by-step process of building an interactive column selector using HTML, CSS, and JavaScript. Whether you’re looking to enhance the user experience by providing customizable table views or streamlining data presentation, our tutorial covers everything you need to know.

Explore the intricacies of:

Setting up a flexible and responsive HTML table structure.
Styling your table and column chooser for a clean, user-friendly interface.
Adding JavaScript functionality to toggle column visibility seamlessly.

With practical code examples and detailed explanations, you’ll be able to integrate a column chooser into your projects effortlessly. Perfect for web developers aiming to create user-centric solutions that cater to diverse needs and preferences. Elevate your web development skills and improve your application’s usability with this essential feature!

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Column Chooser Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .column-chooser {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="column-chooser">
        <label><input type="checkbox" checked data-column="name"> Name</label>
        <label><input type="checkbox" checked data-column="age"> Age</label>
        <label><input type="checkbox" checked data-column="email"> Email</label>
    </div>
    <table>
        <thead>
            <tr>
                <th class="name">Name</th>
                <th class="age">Age</th>
                <th class="email">Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="name">John Doe</td>
                <td class="age">30</td>
                <td class="email">john@example.com</td>
            </tr>
            <tr>
                <td class="name">Jane Smith</td>
                <td class="age">25</td>
                <td class="email">jane@example.com</td>
            </tr>
        </tbody>
    </table>
    <script>
        document.querySelectorAll('.column-chooser input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', (event) => {
                const columnClass = event.target.getAttribute('data-column');
                const isChecked = event.target.checked;
                document.querySelectorAll(`.${columnClass}`).forEach(cell => {
                    cell.style.display = isChecked ? '' : 'none';
                });
            });
        });
    </script>
</body>
</html>

Explanation:

HTML Structure:
- A div with the class column-chooser contains checkboxes for each column.
- A table is defined with thead and tbody sections.
- Each column and cell have a class corresponding to the column name (name, age, email).
CSS:
- Basic styling is applied to the table and its elements for readability.
JavaScript:
- Adds an event listener to each checkbox in the column chooser.
- When a checkbox is toggled, the corresponding column cells are shown or hidden by changing their display style.

This example provides a simple, interactive way for users to choose which columns they want to display in a table. You can expand this by adding more functionality or integrating it into a larger application as needed.

Export HTML Table To PDF Using JSPDF Autotable. Find the maximum value in an array in JavaScript.

rajeshAugust 1, 2024

297 2 minutes read