Selectable Rows Table Template

Enable bulk actions by allowing users to select multiple rows with this interactive table.

This common UI pattern includes a checkbox for each row and a master "Select All" checkbox in the header, making it easy to perform actions on one or many items at once.

Screenshot of a table with a checkbox in each row and a 'select all' checkbox in the header.

Get Source Code Preview

About this Selectable Table

This template provides the HTML structure and JavaScript logic for row selection. The core components are an input with type="checkbox" in the header and in each row of the table body.

The JavaScript connects these elements:

Clicking the "Select All" checkbox in the header toggles the checked state of all checkboxes in the body.
Clicking an individual checkbox adds a "selected" class to its parent row (tr), allowing for visual highlighting with CSS.
The script also intelligently updates the "Select All" checkbox: if all rows are checked manually, it becomes checked. If even one is unchecked, it becomes unchecked.

This is a fundamental pattern for any interface that supports bulk operations like "delete selected," "archive selected," or "export selected."

Features

Bulk Selection: A master "Select All" checkbox controls all row selections.
Individual Selection: Users can select or deselect single rows.
Visual Highlighting: A CSS class is applied to selected rows for clear visual feedback.
Dependency-Free: The logic is self-contained in vanilla JavaScript.

Implementation Notes

The template provides the front-end selection logic. To make it functional, you would add your own JavaScript to a button (e.g., "Delete Selected") that finds all rows with the .row-selected class and performs an action with their data.

Code

Here's the full code, including the HTML structure and the JavaScript to manage the checkbox states:

/* For demo purposes, a simple button to show which rows are selected */
.action-button {
    margin-top: 15px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
}
</style>

<table class="selectable-table" id="mySelectableTable">
    <thead>
        <tr>
            <th scope="col" class="cell-checkbox">
                <input type="checkbox" id="selectAllCheckbox" title="Select all rows">
            </th>
            <th scope="col">From</th>
            <th scope="col">Subject</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="email-1">
            <td class="cell-checkbox"><input type="checkbox"></td>
            <td>Newsletter</td>
            <td>Weekly Update: New Features Added!</td>
            <td>Today, 10:30 AM</td>
        </tr>
        <tr data-id="email-2">
            <td class="cell-checkbox"><input type="checkbox"></td>
            <td>John Smith</td>
            <td>Re: Project Alpha Meeting</td>
            <td>Today, 09:15 AM</td>
        </tr>
        <tr data-id="email-3">
            <td class="cell-checkbox"><input type="checkbox"></td>
            <td>Billing Dept.</td>
            <td>Your Invoice #12345 is due</td>
            <td>Yesterday, 04:00 PM</td>
        </tr>
        <tr data-id="email-4">
            <td class="cell-checkbox"><input type="checkbox"></td>
            <td>Marketing Team</td>
            <td>Q4 Campaign Draft</td>
            <td>2 days ago</td>
        </tr>
    </tbody>
</table>

<button class="action-button" id="demoButton">Show Selected Row IDs</button>

const selectAllCheckbox = table.querySelector('#selectAllCheckbox');
    const rowCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');

// Event listener for the "Select All" checkbox
    selectAllCheckbox.addEventListener('change', () => {
        rowCheckboxes.forEach(checkbox => {
            checkbox.checked = selectAllCheckbox.checked;
            updateRowHighlight(checkbox);
        });
    });

// Event listeners for each row checkbox
    rowCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', () => {
            updateRowHighlight(checkbox);
            updateSelectAllState();
        });
    });
}

// --- Demo button functionality ---
function setupDemoButton(tableId) {
    const button = document.getElementById('demoButton');
    if(!button) return;

button.addEventListener('click', () => {
        const selectedRows = document.querySelectorAll(`#${tableId} .row-selected`);
        const selectedIds = Array.from(selectedRows).map(row => row.getAttribute('data-id'));
        
        if (selectedIds.length > 0) {
            alert('Selected Row IDs: \n' + selectedIds.join('\n'));
        } else {
            alert('No rows selected.');
        }
    });
}

// Initialize the functionality
enableRowSelection('mySelectableTable');
setupDemoButton('mySelectableTable');

</script>

View Output