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."

Key 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