Selectable Rows Table

<!DOCTYPE html>
<title>My Example</title>

/* 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>